Visual Editing

Visual Editing is one of React Bricks’ strongest unique selling propositions.

In your Bricks, you can use React Bricks’ Visual Editing components to enable inline editing of text and images directly on the content, eliminating the need for a cumbersome preview system.
React Bricks also allows for infinite nesting of bricks within bricks, enabling the creation of galleries, features, buttons in hero units, or pricing pages.

Visual components

The following are the visual editing components. Each has a dedicated page in the subsequent sections of the documentation:

Text For editable plain text. Provide a render function to render your JSX.

RichText For editable rich text. Choose the allowed rich-text capabilities and override the default render functions.

Image For editable images. Select from the Media Library, upload, use Unsplash, or input a URL. Crop, rotate, or flip images. Images are optimized and served from a CDN.

Repeater To repeat multiple nested items, such as images in a gallery. Allows for infinite nesting of bricks and multiple item types per repeater.

Link Simplifies link management for standalone links or within RichText render functions. It uses the framework's link component for local paths.

File Enables editors to upload files and provides a render function for frontend downloads. Files are served from a global CDN.

RichTextExt An extensible RichText component that allows for the creation of custom RichText plugins for advanced use cases.