True inline visual editing

Why Visual Editing?

Visual editing offers the most intuitive interface for content creators: it replicates the familiar experience of editing a document in Word or Pages. While developers may be accustomed to editing code in one place and viewing the result in another, this approach is much less appealing to marketers and content creators.

Headless Content Management Systems were primarily designed to make the developers' life easier, decoupling the content structure and editing from the presentation layer. But, with the advent of headless CMSs, we lost the visual editing capabilities that were available for example with a blank WordPress page. Instead, content editors are now faced with boring, gray forms.

This is why we need to get back visual editing, but in a code-controlled way. This approach would allow us to keep the advantages of headless CMSs while ensuring that the corporate design system can't be compromised by content editors.

What about Wix or Webflow?

Visual page builders like Wix or Webflow offer a great user experience for marketing teams, but they have drawbacks that make them impractical for corporate websites. Specifically, these tools are either:

• Not flexible enough: Tools like Wix are easy to use but lack flexibility in design. This means you can't recreate an exact corporate image, but you are limited to choosing from their proposed templates. This is great for a freelancer project, but not suitable for corporate use.
• Too flexible: More advanced tools like WebFlow are highly flexible but tend to be more complex to use. This flexibility allows content editors to make design choices, which isn't desirable for a corporate website. We aren’t seeking the thrill of a green Comic Sans text over a red background, right?

Read more about Visual Site Builders vs Headless CMS

The Holy Grail of CMS

Based on the consideration above, corporate customers need a headless CMS that:

• Is as user-friendly as Wix, with inline visual editing
• Allows developers to define a pixel-perfect design system that reflects the corporate identity
• Ensures content editors cannot compromise the design, thanks to well-defined constraints in the code
• Is based on React and TypeScript, offering a great developer experience, excellent performance, and comprehensive documentation
• Works well with the major React frameworks like Next.js, Remix, and Gatsby
• Includes all the features of mature headless CMSs, such as Digital Asset Management, Localization, SEO, Collaboration, Workflows, and so on

The React Bricks Approach

When we created React Bricks we knew that a corporate website must start with code and that the best user experience for content editors is visual editing.

This is why we built a visual headless CMS that combines the benfits of both a Headless CMS and a No-code website builder.

A. Code for Developers

Developers create content blocks in code as React components, never leaving the code editor and leveraging a fully TypeScript typed library that adds the visual editing magic.

React Bricks is compatible with all the main React framework, with starters for Next.js, Remix and Gatsby, which helps creating a blazing fast website.

It works with any CSS framework and allows you to host the frontend website wherever you perfer, including the content editing administration interface.

Discover all the advantages for Developers

B. Visual editing for Marketers

Marketing teams and content editors benefit from an intuitive visual interface, with

• Direct text and image editing: Just like using a word processor, they can click on the text to edit it and click on images to change them and writing, as you do in a word processor and clicking on images to change them.
• Customizable content block properties: They can modify properties such as the background color using sidebar controls. However, only the properties that developers have made editable can be changed, and only within the allowed values, ensuring adherence to validation rules

C. Enterprise-ready

React Bricks is an Enterprise-grade Visual CMS that includes:

• Fine-grained permissions and custom roles
• Approval workflows
• Multiple content environments
• SSO, GDPR compliance and backup
• Enterprise support
• Ability to self-host the backend