In React Bricks CMS you define your content blocks as React components (using the react-bricks library) and you get visual editing for free.
React Bricks infact is both a React library to create your content blocks (=> pure fun) and a SaaS where the content is persisted (=> no hassles).
A React Bricks application (for example created with Next.js or Gatsby) is composed of:
This front-end application talks with React Bricks APIs to persist and retrieve the content and to process images which are optimized for responsive view and blur-up lazy loading and served from a fast global CDN.
The bricks are your content blocks, the different Lego bricks that your content editors may use to compose the pages.
They are just React components which import React Bricks' special visual editing componentds and render them in the returned JSX.
Another peculiarity is that they must have a "schema" static property which defines the brick name, label, default values, which props can be edited via sidebar controls (and with which type of control), eventual repeating nested items, etc.
Almost everything in React Bricks is customizable.
For example, you can provide your own components as sidebar controls (want a custom color picker? great!), you can create your own visual editing components, you can have custom fields on pages, you can access everything in your content blocks via hooks, you can configure from the logo to the responsive breakpoints, or use any React framework, any router, and so on...
React Bricks works with any CSS framework and any CSS-in-js library that our customers tried so far.
With React Bricks you don't have to go back and forth between the headless CMS where you set up fields, queries to fetch those fields and the React frontend where you finally use them.
You define your fields as props of your component, never leaving your code editor with your React project.