Visual editing !== No code

Belief #1: I believe that a corporate website should be created with code.

Belief #2: I believe that a CMS should offer the best experience to its everyday users: content creators. And the best user experience is visual editing.

Are these beliefs in contrast? Not at all! Follow me.

The problem

If you are a web developer...

...you know it: every corporate website is unique.

• You need total control for pixel-perfect corporate image
• You must be sure nobody will break the design
• You may have ad-hoc interactive features which require a JavaScript framework

If you are a content creator...

... you know it: creating content filling gray forms is boring.

• You want to edit visually, like you do in Word or Pages
• You want the freedom to compose your page as you need
• You want to be sure you won't break things

Solutions

1. No-code tools 🙁

Tools like Wix or Webflow have a great user experience, but they have pitfalls that make them unusable for corporate websites. They are either:

• Not flexible: the tools that are easier to use, usually force you to choose one of the proposed graphic templates. Great for a freelancer project, no-go for a corporate website.
• Complex: more advanced tools, like WebFlow, are very flexible, but they are more complex to use.
• Too flexible: what's more, it's not the content creator business to create the design and tweak CSS parameters. For a corporate website, the design system is created by designers and developers: content creators should not have the ability to alter the the design system. We don't want green text on red background, right?

2. Headless CMSs 😐

Headless CMS ⇒ gray forms ⇒ not great for content creators.

3. React Bricks 😍

React Bricks has the advantages of both Headless CMSs and a No-code tools, without the problems that Content creators have with headless CMSs and that Developers have with No-code tools.

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 it's really fun.
React Bricks provides also the documentation for your design system.

For Content creators

Content creators have a best-in-class visual interface:

• They can edit text and images directly as you do in Word or Pages
• They can change properties like background color etc. using sidebar controls. They can change only the properties that the developers chose to be editable and with the values that are allowed.

They have all the freedom they want and no more than they need.

Conclusion

Code and Visual editing can go hand-in-hand: to create a corporate website that's easy and fun to edit in a visual way, you need code.
And a bit of magic. React Bricks brings the magic.

Learn more on the React Bricks website

Comments

[Oleg Proskurin]

Hey, thanks for the article! What do you think about a headless CMS with Visual editing enabled? There is a new trend based on Vercel solution, and could be really cool combination of custom design and a convenient editorial experience. We recently tried this with Sanity - and it looks promising dev.to/focusreactive/a-deep-dive-i...

[Matteo Frana]

Well, I am a bit biased here, but I prefer the true inline visual editing of React Bricks, where you directly edit text and images as you would do in a word processor, instead of editing in a sidebar and seeing a preview on the page.

[Oleg Proskurin]

Does it allow the creation of a responsive UI? How do you manage to control appearance on all variations of screen sizes?