React CMS: The missing link

You are a developer. You love your headless CMS.
Having an API with no hassles and a modern front-end feels great.

Do you think your users are happy too? Think again.

What content creators want

Content creators want to have a solution that is easy and inspiring to use, possibly with no instruction to read.
Wix is such a tool, with its point and click interface.
An headless CMS, with its gray forms and complex interface, is neither easy nor inspiring.

What about designers?

Designers want to be able to express the corporate design system and be sure that nobody will ever break it.
This is why they don't like visual editing, as it often implies too much freedom. Designers want flexibility (for themselves) and constraints (for content creators).

Are you really happy?

Do you like going back and forth between your headless CMS to define fields and your code to fetch these fields and use them in your React app?
Wouldn't it be great if you could save time, stay in your editor and define there your fields, as you do for the props of React components?

The missing link

The missing link is a framework that has decoupled APIs as a service, but lets you define your content blocks as components (for example React or Vue components), providing some magic to enable visual editing over the texts and images. The props of this components enforce constraints so that designers can be sure that nobody will break the design. As a plus, it would be great if the schema of components could self-document itself.

I didn't find the missing link...

... so I created it ;P
Its name is React Bricks.

How does it work?

It’s just React

Content blocks are React components. No back and forth between the front-end and the headless CMS. Define the fields as props on your component, get visual editing for free from React Bricks <Text>, <RichText>, <Image>, <Repeater> components.
Props like background or anything you need can be changed via sidebar controls (you can choose a standard control like text, number, select, color, etc. or provide a custom component).

Great editing experience

The editing interface is very easy and familiar with Visual editing and a Sidebar to change props, with no way to break the design.
In the Playground you get the documentation for all of your content blocks for free.

Is it flexible enough?

You can configure everything: add custom fields on the page accessible via hooks, provide your own components for rich text rendering or for the sidebar controls, validate props, change ui like logo or responsive breakpoints, set user permissions...

Is it fast?

You bet! The starter projects use the latest Next.js versions with a blazing fast statically generated website.
Images are optimized for responsive view and lazy load and served from a fast global CDN.
You can provide a build web hook to let your editors trigger a rebuild on the server with the click of a button.

Developer experience

React Bricks is written in TypeScript and fully typed.
Scaffold a project in seconds using the CLI.
The Documentation is very complete.
You may start from the Step-by-step Tutorial where you gain points... with a final surprise!

Ok, but you are biased!

Of course I am, but I am sincere when I tell you that I love creating "bricks" of content in React and seeing our customers happy while creating content.
But don't take my word for it. We have big startups like CapBase and Casavo powering their websites (and empowering their marketing) with React Bricks. And Swizec Teller wrote a great post about React Bricks.

What do you think about it?

Please, let me know what do you think about React Bricks.
What do you like (or not) about it? What would you use it for? How may I help you start with a project?

Last thing: see me explain why React Bricks will change the way we edit websites

Comments

[Anton Frattaroli]

npx create-reactbricks-app breaks on install w/npm 7 b/c legacy peer deps:

Error: Command failed with exit code 1: npm install
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! Found: react@17.0.2
    npm ERR! node_modules/react
    npm ERR!   react@"^17.0.2" from the root project
    npm ERR!   peer react@"^16.6.0 || ^17" from next@10.2.3
    npm ERR!   node_modules/next
    npm ERR!     next@"^10.2.3" from the root project
    npm ERR!   6 more (react-dom, react-bricks, @next/react-dev-overlay, ...)
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^16.8.0" from cogo-toast@4.2.3
    npm ERR! node_modules/react-bricks/node_modules/cogo-toast
    npm ERR!   cogo-toast@"^4.2.3" from react-bricks@2.3.11
    npm ERR!   node_modules/react-bricks
    npm ERR!     react-bricks@"^2.3.8" from the root project

[Matteo Frana]

Thank you! I just tried and cannot reproduce the error. Really it found yarn on my system so it used yarn to install packages. We'll investigate it now.

[Matteo Frana]

Ok, we could not reproduce it with npm 7 too, but I see what the problem is with that library specifying react ^16.8 as a peer dependency (which should require --force on npm install). I'll publish a new version soon to fix this.

[Matteo Frana]

Ok, released v2.3.12 that should solve the problem you encountered! 🎉

[Ruslan Elishaev]

Amazing!
Keep up the good work.

P.S. I’m using netlify cms for some of my projects