React Bricks: a CMS with visual editing based on React components

React Finland

React Finland 2021

Matteo Frana

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

React Summit

React Summit 2023

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 &gt; FrontPage/Dreamweaver    - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables &gt; WordPress visual &gt; WordPress with ACF    - The “current” era: Headless CMSs &lt;&gt; 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)For professional <a href="https://focusreactive.com/services/headless-cms-expert-agency/" target="_blank">headless CMS agency</a> help, check our partners at FocusReactive.

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

Developer productivity

Headless CMSs are great for developers, but not for content creators. React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>