Creating and managing web content should be easy and fun, right? Well, you might be surprised.
The tools we use play a big role in this process, and choosing the wrong platform can turn it into frustrating experience.
As a result, two prominent types of website creation tools have emerged: headless CMS and page builders. Each represents one side of the coin. Going headless offers greater control and makes your developers happy, whereas page builders are built for content editors, but are more suitable for simpler websites.
But what if there is a third way that makes everyone happy?
Enter visual editing. Visual editing is all about simplicity. It's user-friendly for editors and saves developers time.
Let's explore headless CMSs and page builders to understand where visual editing bridges the gap between them, and how React Bricks represents the best of both worlds.
Unlike a traditional CMS, a headless Content Management System (CMS) separates the content repository from the presentation layer.
Headless architecture allows content to be stored, managed, and delivered to any platform or device via an API, without being tied to a specific front-end framework or technology.
Page builders, also known as website builders, provide a user-friendly interface that allows users to create, design, and manage web pages without the need for manual coding.
Typically, a website builder offers drag-and-drop functionality, pre-designed templates, and widgets. This enables users to visualize the end result while they are creating it.
Visual editing is about simplifying tasks. When editors find it user-friendly, they can work independently without relying on developers for assistance. They also save time because they can focus on writing instead of figuring out a complicated tool.
And if it's fun and easy, they'll probably update content more frequently because they won’t be wrestling with a tricky system.
Page builders like Webflow let you create and change stuff on your website with lots of freedom. They let editors play around with both content and design, in a single place. But this freedom can have its drawbacks.
Being able to change the design is great, it can also be risky. Content editors and marketing folks usually lack the design expertise of a professional designer. So, giving them free rein on design can break the design and mess up the corporate image.
Then there’s headless CMS, which keeps content and design in separate boxes. This means the look of your platform stays consistent because editors can’t accidentally change the design.
But this strict setup has its own problems. If an editor wants to add something new, like a paragraph, a developer needs to be involved to update the CMS structure and make sure it shows up right on the website.
And using a headless CMS can be a bit dull for editors because of its plain, gray user interface. While some headless CMSs offer a visual preview feature to enhance user-friendliness, it still feels like editing a Word document in a sidebar with gray forms and wait for the preview to appear on the page after a second - not the most enjoyable experience!
React Bricks combines the advantages of a headless CMS and a page builder.
It is based on the concept of “Lego bricks” of content. Developers prepare these bricks using React components, and Content editors use them to compose pages. With Lego bricks, you can create anything, but you cannot change a single Lego brick. Similarly, with React Bricks, editors can create freely, without breaking the atomic design of components.
Unlike Lego, editors can change some properties of the content blocks, using sidebar controls. But it is not like WebFlow, where editors can change anything: only the controls defined by the developers are available, with only the values defined in code (for example, the developer can choose that, for a hero unit, editors can change only the background color, which can be white or light gray).
Inline visual editing is enabled by the React Bricks library, which enhances React components with visual editing components and a schema to define sidebar controls.
Choosing between a page builder and a headless CMS really depends on what you need and what challenges you face. Page builders give you lots of freedom and are super easy to use, while a headless CMS makes sure your design stays consistent and your data is neatly organized.
It's all about figuring out what's more important to you and picking the tool that fits best with your goals and how you work. Anyway, visual builders are usually not suitable for corporate websites, as they are not flexible enough, with pre-made templates, or too flexible, letting the editors take design choice.
React Bricks combines the perks of a headless CMS and a no-code side builder, offering a smooth and efficient platform, great for both developers and content editors.
For developers, it's all about creating content blocks using code, specifically React components, all within the familiar territory of the code editor. The platform adds the visual editing magic, and it's compatible with any React and CSS framework, providing starters for Next.js, Gatsby, and Remix to assist in crafting visually appealing and high-speed websites.
Content creators, get a straightforward, click-and-edit interface, making the content creation process intuitive and hassle-free. They can directly edit text and images with a simple click, akin to using familiar platforms like Word or Pages, and adjust properties like the background color, all within the boundaries set by developers and designers.
This approach ensures creators have ample freedom, but good constraints, providing a guided, user-friendly, more engaging experience than navigating through grey forms.
Be the first to discover our latest news. No spam, promise.