Flexibility & Extensibility

React Bricks is designed to adapt to your project, not force your project to adapt to the CMS.

You can create custom content blocks as React components, define your own sidebar controls, extend rich text editing, customize the admin experience, use the tools you prefer, and host the frontend wherever it fits best.

React Bricks gives developers the control needed to make the CMS fit real design systems, editorial workflows, and technical constraints.

Customization in React Bricks

What it is: Customization means adapting the CMS experience, editable components, controls, rich text, and hosting setup to the needs of a real project.

How React Bricks handles it: React Bricks lets developers define custom bricks, sidebar controls, rich-text plugins, visual editing components, page fields, and frontend integrations in code.

Why it matters: The CMS can follow the project's design system and technical architecture instead of forcing the project into a fixed builder model.

Customization in code

Content Blocks

The most important level of customization in React Bricks is the ability to create custom content blocks as React components. That is the foundation of the product, together with the visual editing layer. For more information, check out the React integration and the corresponding documentation.

Sidebar controls

For brick sidebar controls, you can use built-in controls such as text, textarea, number, date, range, boolean, select, autocomplete, image, and relationship fields. You can also build your own custom sidebar controls when the default ones are not enough.

This is useful when you want to support project-specific editing patterns, such as a custom color picker or a mini-map to select coordinates.

Review the documentation on Sidebar controls.

Custom Visual Editing Components

Sometimes, you may want to create a custom visual editing component instead of using the default ones such as Text, RichText, Image, Link, File, or Repeater.

For example, you could build a custom code editor for a documentation site or any other editing interface tailored to your product.

Learn more about custom visual editing components.

Custom RichText Plugins

The RichText component allows content editors to write formatted text. Developers can define the allowed styles in the allowedFeatures prop and customize how each style is rendered. Refer to the Text component documentation.

For more advanced use cases, you can create entirely new rich text styles with their own command bar button, render function, and custom popup interface.

One customer, for example, used this feature to create a stock picker plugin that lets editors highlight text, select a stock symbol from a popup, and display the live stock value on the frontend.

To enable these kinds of advanced customizations, you can use the extensible RichText component, RichTextExt.

Customize the UI

You can customize the login UI of the admin interface and the main menu. The menu can also be personalized based on the currently logged in user. Refer to the documentation to learn about the available configuration options.

Custom Roles

As mentioned on the Security & Compliance page, you can define custom user roles to manage permissions more precisely.

Freedom to use the tools you like

React Framework

You can choose the framework that best fits your project, including Next.js and Astro.

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 interface wherever you prefer. If your hosting environment supports your chosen framework, it can host React Bricks as well. There is no need for external services like Cloudinary or Imgix, because React Bricks includes built-in image optimization and a global CDN for assets.

Custom CDN Domain

On enterprise plans, you can choose to use 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 the option to self-host the backend APIs and database.

Ready to start building?