- Content management
React CMS: The missing link
Intro
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?