React CMS: The missing link
Tags: react, nextjs, cms, visualediting
Published: 2021-06-29 15:39:18

**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](https://reactbricks.com?utm_source=devto&utm_medium=social&utm_campaign=missing_link)**.

# 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).

{% youtube Y0Odt3W6L48 %}

## 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.

{% youtube I8eL7HexnmQ %}

## 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](https://docs.reactbricks.com?utm_source=devto&utm_medium=social&utm_campaign=missing_link) is very complete.
You may start from the [Step-by-step Tutorial](https://reactbricks.com/learn/welcome?utm_source=devto&utm_medium=social&utm_campaign=missing_link) 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](https://capbase.com) and [Casavo](https://casavo.com) powering their websites (and empowering their marketing) with React Bricks. And [Swizec Teller](https://twitter.com/Swizec) wrote a [great post about React Bricks](https://swizec.com/blog/react-bricks-visual-blocks-editor-for-nextjs-codewithswiz-22/).
{% twitter 1237872398889701378 %}
{% twitter 1374480533955047424 %}
{% twitter 1374479894692818950 %}
{% twitter 1359186869402013699 %}

# What do *you* think about it?
Please, let me know what do you think about [React Bricks](https://reactbricks.com?utm_source=devto&utm_medium=social&utm_campaign=missing_link).
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
{% youtube WVVX4PvrTp0 %}