React Bricks is the first CMS with true visual editing (inline, like Word or Pages) based on React components.
Developers build visually editable content blocks as React components using the react-bricks
library.
Content editors have an easy to use interface with the freedom to create and no way to break the design system.
Getting started is as easy as launching a CLI command:
npx create-reactbricks-app@latest
We have a great Step-by-step Tutorial with gamification to learn React Brick very quickly.
If you are not a developer, you can Spin up a demo already hosted for you, to try the visual editing interface!
Define visually editable content blocks as React components. In the JSX use React Bricks components like Text
, RichText
, Image
, Repeater
to add the Visual editing magic. Decide which rich text features you want to enable for each text and define custom render functions for each style. Add sidebar controls that map to your component's props to let the editors change properties like the background color, with only the options that you allow.
Everything is beautifully typed in TypeScript. You can have infinitely nested bricks inside of bricks, reuse content across pages via Stories or Embeds, manage deploy hooks, translations, fine-grained permissions, get content from external data sources like Shopify, define Entities with custom fields and much more.
React Bricks has the best visual editing interface on the market.
It's not like others, where you click on the content and then write in a sidebar form or a popup: with React Bricdks you directly write the content as if you where in a word processor.
With React Bricks it's possible to create your pixel-perfect design system and be sure that nobody will break the design, because with bricks you can decide exactly what the editors will be able to touch, visually or via sidebar controls, with only the options or the colors that you allow and validation rules over content. Your design is safe.
Find more headless content management systems.