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.
Top comments (3)
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...
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.
Does it allow the creation of a responsive UI? How do you manage to control appearance on all variations of screen sizes?