React Bricks visual CMS concept illustration

Brick by Brick: Building Visual Content with React Bricks

The Orange Cat
The Orange Cat

React Bricks is a groundbreaking content management system that bridges the gap between developer flexibility and content editor autonomy. By leveraging the power of React components, it allows developers to create visually editable content blocks – or “Bricks” – that content teams can use to build pages with a true WYSIWYG experience. This approach solves the common pitfalls of traditional headless CMSs, which often provide a poor user experience for editors and require frequent developer intervention.

Constructing Your Content Kingdom

React Bricks offers a robust set of features that make it stand out in the CMS landscape:

  • Visual Editing: True inline editing that feels like using a word processor.
  • React-Based Architecture: Leverage your existing React knowledge to create custom content blocks.
  • Design System Integration: Maintain brand consistency while giving editors controlled freedom.
  • TypeScript Support: Fully typed for enhanced developer experience and code reliability.
  • Framework Flexibility: Works with Next.js, Gatsby, and Remix.
  • Enterprise-Ready: Includes features like fine-grained permissions, approval workflows, and content versioning.

Laying the Foundation

To start building with React Bricks, you’ll need to have Node.js v18 or higher installed. Let’s begin by setting up a new project:

# Using npm
npm create reactbricks-app@latest

# Using yarn
yarn create reactbricks-app

# Using pnpm
pnpm create reactbricks-app@latest

This command will launch an interactive CLI that guides you through the project creation process. You’ll be able to choose your preferred framework (Next.js, Remix, or Gatsby) and set up your React Bricks account.

Building Your First Brick

Once your project is set up, let’s create a simple “Hero” brick to showcase the basics of React Bricks development.

Defining the Schema

First, we’ll define the schema for our Hero component:

import { types } from 'react-bricks/rsc'

const schema: types.IBrick = {
  name: 'hero',
  label: 'Hero',
  getDefaultProps: () => ({
    title: 'Welcome to My Site',
    subtitle: 'Discover amazing content',
  }),
  sideEditProps: [
    {
      name: 'title',
      label: 'Title',
      type: types.SideEditPropType.Text,
    },
    {
      name: 'subtitle',
      label: 'Subtitle',
      type: types.SideEditPropType.Text,
    },
  ],
}

This schema defines the structure of our Hero brick, including default props and side edit properties that will appear in the admin interface.

Creating the Component

Now, let’s create the React component for our Hero brick:

import React from 'react'
import { Text, RichText, types } from 'react-bricks/rsc'

interface HeroProps {
  title: string
  subtitle: string
}

const Hero: types.Brick<HeroProps> = ({ title, subtitle }) => {
  return (
    <div className="py-12 px-4 text-center">
      <Text
        propName="title"
        renderBlock={({ children }) => (
          <h1 className="text-4xl font-bold mb-4">{children}</h1>
        )}
        placeholder="Type a title..."
      />
      <RichText
        propName="subtitle"
        renderBlock={({ children }) => (
          <p className="text-xl text-gray-700">{children}</p>
        )}
        placeholder="Type a subtitle..."
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Italic,
        ]}
      />
    </div>
  )
}

Hero.schema = schema

export default Hero

In this component, we use the Text and RichText components from React Bricks to create editable fields. The renderBlock prop allows us to control how the content is rendered, while placeholder provides guidance for content editors.

Assembling Advanced Structures

As you become more comfortable with React Bricks, you can create more complex content structures. Let’s explore how to create a repeatable section using the Repeater component.

import React from 'react'
import { Repeater, types } from 'react-bricks/rsc'

interface GalleryProps {
  items: types.RepeaterItems
}

const Gallery: types.Brick<GalleryProps> = ({ items }) => {
  return (
    <div className="py-12 px-4">
      <h2 className="text-3xl font-bold mb-6 text-center">Image Gallery</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Repeater propName="items" itemProps={{ className: 'w-full' }} />
      </div>
    </div>
  )
}

Gallery.schema = {
  name: 'gallery',
  label: 'Image Gallery',
  getDefaultProps: () => ({
    items: [],
  }),
  repeaterItems: [
    {
      name: 'items',
      itemType: 'gallery-item',
      itemLabel: 'Image',
      max: 6,
    },
  ],
}

export default Gallery

This Gallery brick uses the Repeater component to allow content editors to add multiple gallery items. The repeaterItems in the schema defines the structure of these repeatable elements.

Adding Interactivity

React Bricks also allows you to add interactive elements to your bricks. Here’s an example of a simple counter brick:

import React, { useState } from 'react'
import { Text, types } from 'react-bricks/rsc'

interface CounterProps {
  initialCount: number
}

const Counter: types.Brick<CounterProps> = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount)

  return (
    <div className="p-6 bg-gray-100 rounded-lg text-center">
      <Text
        propName="label"
        renderBlock={({ children }) => (
          <h3 className="text-2xl font-bold mb-4">{children}</h3>
        )}
        placeholder="Counter Label"
      />
      <p className="text-4xl font-bold mb-4">{count}</p>
      <button
        className="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>
    </div>
  )
}

Counter.schema = {
  name: 'counter',
  label: 'Counter',
  getDefaultProps: () => ({
    label: 'My Counter',
    initialCount: 0,
  }),
  sideEditProps: [
    {
      name: 'initialCount',
      label: 'Initial Count',
      type: types.SideEditPropType.Number,
    },
  ],
}

export default Counter

This Counter brick demonstrates how you can combine editable content with interactive React components, giving content editors the ability to customize not just static content, but also dynamic elements of the page.

Cementing Your Content Strategy

React Bricks offers a unique approach to content management that empowers both developers and content creators. By creating a library of customizable, visually-editable bricks, developers can provide a flexible yet constrained system for building pages. This ensures that content editors have the freedom to create engaging content while maintaining brand consistency and design integrity.

As you continue to explore React Bricks, you’ll discover more advanced features like nested bricks, custom sidebar controls, and integration with external data sources. The combination of React’s component-based architecture with React Bricks’ visual editing capabilities opens up a world of possibilities for creating dynamic, content-rich websites that are both developer-friendly and editor-empowering.

Whether you’re building a simple blog or a complex enterprise website, React Bricks provides the tools you need to construct a content management system that’s as flexible as it is powerful. So start laying those bricks, and watch your digital presence come to life, one visually-editable component at a time.