Visual CMS… cool for React devs? Now’s the time!

1. A brief history of web content management since 1996, with alternating code and visual tools:
   - The “FTP” era: Code editors > FrontPage/Dreamweaver
   - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables > WordPress visual > WordPress with ACF
   - The “current” era: Headless CMSs <> Visual tools like Wix and WebFlow
2. Why now’s the time we need a new kind of CMS
3. What is React Bricks
4. The experience for content editors (explained by a customer’s content editor)
5. The experience for developers (explained by a partner agency’s web developer)

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

React Bricks is a content management system that allows content editors and developers to create visually editable content blocks as React components. It combines structured data management with inline visual editing, ensuring design consistency while providing an easy-to-use interface.

React Bricks differs by offering a unique approach that combines visual editing with structured data management. Unlike traditional CMSs that may sacrifice visual editing for structured data, React Bricks provides content blocks that are visually editable without breaking the design, thanks to predefined design system constraints.

Agencies benefit from React Bricks' ease of use, GDPR compliance, and robust customer support. It enables agencies to quickly develop visually appealing and functional websites that adhere to strict design systems, making it ideal for corporate clients. Additionally, a partner program is available for agencies.

Yes, React Bricks is suitable for corporate websites as it provides a pixel-perfect image and design constraints that prevent content editors from breaking the design. This makes it an ideal choice for maintaining a professional corporate image.

React Bricks offers features like multilingual support, fine-grained permissions, the ability to reuse content across pages, integration with external data sources like Shopify, and collaboration tools. These features make it a comprehensive solution for modern web development needs.

To get started with React Bricks, create a free account and launch the CLI command 'npx create Reactbricks app at latest'. The website provides a step-by-step tutorial with gamification to help users become proficient in using React Bricks quickly.

React Bricks is user-friendly due to its simple and clear concept of using 'Lego bricks' of content, which are fun for editors and ensure they can't break the design. Its interface is intuitive, resembling familiar document editing software, which reduces the learning curve.

Matteo Frana
Matteo Frana
8 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.

1. The Evolution of Content Management

Short description:

I am Matteo Frana, founder of React Bricks. Let me show you why we need a revolutionary product that will change the way people edit websites. Back in 1996, creating websites was a different process. Frontpage and CGI were introduced, but visual editing was lost. CMSs like Joomla! and WordPress brought visual editing back, but we still faced challenges. Wix and Webflow offer great UX for visual editing, but they are not suitable for corporate websites. We need a solution that provides a Pixel Perfect corporate image and constraints for content editors.

Hello, everybody. Welcome to my talk. I am Matteo Frana, founder of React Bricks, and I'm gonna tell you the story of content management since the very beginning. So get ready and I will show you why we need a revolutionary product today that will change the way people edit websites.

Back to 1996 when I started creating websites, you used a tool like this to write HTML that you would send to a server via FTP and was it a pain? No. It was great, I was 17 and they had customers who paid me to write this strange code, but the fact is those pages never changed. So let's start our journey from HTML.

When the need to edit pages became a thing, Frontpage appeared. On the CD you read professional websites without programming. Microsoft added GPT already, no? But you could edit in a visual way with the added bonus of beautiful unusable themes. So we had visual editing, but the code created was a mess. For anything you touched, you added four levels of nested tables inside of tables. And then, customers wanted to edit the content by themselves. But if you gave them Frontpage, they would destroy the website before you could say Frontpage. And so came CGI. You wrote programs in Perl, executed on the server, that would write the HTML code for you. So you could create a beautiful interface to let customers edit content on a database and then read from this database and create HTML, which is powerful. And ASP and PHP just made it easier with the templating language.

But you see, the visual editing of Frontpage was lost. And there was another problem. We were reinventing the wheel every time. So CMSs were created, Joomla!, then WordPress, and we had visual editing again. Essentially, HTML saved on database, and users could write the big green comic sans title over red background. So we added custom fields to WordPress to get back our beloved gray forms. All structure, all good. And we lost visual editing once again. But the need for visual editing is there so Wix and Webflow satisfy it with a great UX. The problem is that they are not suitable for corporate websites because we don't need a template we love, but the Pixel Perfect corporate image. And we need also good constraints for content editors to be sure that the design can't be broken. As soon as editors understand how to touch margins and paddings in Webflow they can use their creativity to break the design.

2. The Challenge of Headless CMSes

Short description:

Headless CMSes provide freedom for developers on the frontend and structured data on the backend. However, visual editing is sacrificed, making it a nightmare for editors. We need a solution that benefits both content editors and developers.

So we have great visual editing, but we need to move away from it. And so we come to headless CMSes, a dream for developers because we are free to do whatever we want on the frontend and we have structured data on the backend. But guess what? We are back to great forms and bye-bye to visual editing. Oh yeah, we have the instant preview which is like writing a Word or Pages document in a sidebar form and see the preview on the page. You think it's a great UX? Well, if this is a dream for developers it is surely a nightmare for editors. This is why we need something new which is finally good for both content editors and developers.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Power Fixing React Performance Woes
React Advanced 2023React Advanced 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Monolith to Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Fetch, useEffect, React Query, SWR, what else?
React Advanced 2023React Advanced 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!