Flexibility & Extensibility

Customization in Code

Content Blocks

Undoubtedly, the ability to create custom content blocks as React components is the key feature of React Bricks, along with the inline visual editing layer. For more information, check out the React integration and the corresponding documentation.

Sidebar controls

For a brick's sidebar controls, you can choose pre-defined controls such as Text, TextArea, Number, Date, Range, Boolean, Select, Autocomplete, Image, and Relationship. Interestingly, you also have the option to create your own custom sidebar controls. This can be useful if you want to implement unique features like a custom color picker or a mini-map for users to select latitude and longitude. The possibilities are endless.

Review the documentation on Sidebar controls.

Custom Visual Editing Components

Sometimes, you may want to create a custom visual editing component rather than using the default ones (Text, RichText, Image, Link, File, Repeater).

For example, you could create a custom code editor for a documentation site, as we have done with a pre-made Tailwind brick you can find in the starter projects.

Learn more about custom visual editing components.

Custom RichText Plugins

The RichText component allows content editors to write formatted text. Developers can specify allowed styles, such as Bold, Italic, Link, Code, Highlight, Ordered Lists, Unordered Lists, H1 to H6, and Quote, in the Text component allowedFeatures. They can also define a custom render function for each style (refer to the Text component documentation).

For advanced use cases, you might want to create a new style with its own command bar button, render function, and possibly a custom popup interface for the style configuration.

For instance, a customer used this feature to create a stock picker plugin. With this, you can highlight a part of the text, select a stock symbol from a popup using an autocomplete field, and display the current stock value beside the text on the frontend.

To enable such advanced customizations, you need to use the Extensible RichText component, RichTextExt.

Customize the UI

You can customize the login UI of the Admin interface as well as the main menu. The main menu can also be customized based on the user currently logged into the system. Refer to the documentation to learn about the various configurations you can set.

Custom Roles

As mentioned on the Security, SSO, and Backup page, you can create custom user roles to manage permissions more effectively.

Freedom to use the tools you like

React Framework

You can choose the React framework of your choice: Next.js (with Pages or App Router), Remix or Gatsby.

CSS Framework

React Bricks is CSS agnostic: it works with any CSS framework, CSS-in-JS or plain CSS.

Of course, if you are using Server Components, consider that currently you cannot use CSS-in-JS (this is not a limit of React Bricks, but of how Server Components work).

Discover all the advantages for Developers

Freedom to host where you like

Host the Frontend Anywhere

You have the flexibility to host the frontend website along with the Admin (the content management interface) wherever you prefer. If your hosting environment supports your chosen framework (Next.js, Remix, or Gatsby), it will also support React Bricks. There's no need for any external services like Cloudinary or ImgIx because React Bricks has built-in image optimization. A global CDN to serve assets is already included in all plans.

Custom CDN Domain

On Enterprise plan, you can choose the option to have a custom CDN domain to serve assets, like assets.yourdomain.cominstead of the default assets.reactbricks.com.

Host the Backend on Premise

In specific cases, Enterprise plans also offer also the option to self-host the backend APIs and Database.