What is a CMS with visual editing?

Headless = Back to gray forms

With the advent of headless CMS we lost the direct visual editing of content, which represents a great UX for content editors. That is what you got once with a blank WordPress page, or now using Elementor. It is the experience of a nocode tool like Wix.

The best headless CMSs try to fill this gap providing an instant preview: you edit the code on a form which lays on a sidebar and you see the result on the page.

Unfortunately that is not direct visual editing. Writing in one place and looking for result in another place causes a much higher cognitive load. Developers are used to this: edit code in your IDE and see the result in the browser. Content creators are used to the much better experience of Word or Pages: you just click on the text that you want to change and write.

No code = Too much freedom

On the other end, tools like Wix or Webflow have a great user experience, but they have many other pitfalls that make them unusable for corporate websites:

  • Not flexible: tools that tend to be very easy to use are not flexible regarding the design system, so that you cannot reproduce the exact corporate design system, but you need to choose one of the proposed templates. Great for a freelancer project, no go for corporate.
  • Complex: More advanced tools like WebFlow are very flexible, but they tend to be complex to use, because the content creator is supposed to know what a margin or a padding are.
  • Too flexible: What's more, it's not the content creator business to create the design and tweak the CSS parameters. For a corporate website, the design system is created by the designers together with the developers and nobody should be able to break the design system. We want to be sure we won't have green text on red background! :)

React Bricks to the rescue!

React Bricks has the advantages of both a Headless CMS and a No-code tool.

We know that a corporate website must start with code and we also know that the best user experience for a content creator is visual editing.

Code for Developers...

Developers create content blocks with code (they are just React components) using the React Bricks library.

React Bricks adds the visual editing magic. And developers love it. Read how React Bricks works with React!

...visual for Content creators!

Content creators have a point and click interface:

  • They directly edit text and images, just clicking on the text and writing, as you do in Word or Pages and clicking on images, uploading and cropping (with set constraints).
  • They can change properties like background color etc., but only the properties that the developers chose to be editable and with the values that are allowed, with validation rules.

In this way, content creators have all the freedom they need and no more. Good constraints guide their work without limiting them.

And that is much more inspiring than grey forms!

Subscribe to our newsletter!

Be the first to discover our latest news. No spam, promise.