React Bricks

The blocks schema

The blocks schema defines the set of "bricks" that can be used in pages.

It is an array of objects, one for each block type.
In our starter examples you will create your block types in the /react-bricks/bricks folder.


Each object has the following shape (I think it is clear even if you don't use Typescript):

interface IBlockType {
  name: string
  label: string
  superType: BlockSuperType
  render: (props: any) => React.ReactElement
  getDefaultProps: () => object
  hideFromAddMenu?: boolean
  sideEditProps?: ISideEditProp[]
  textEditProps?: string[]
  itemsType?: string
  addItemText?: string
  removeItemText?: string

Properties definition


The unique name for this block type (for example "heading").


The name displayed in the Sidebar when you want to add a new block (for example "Heading")



See Nested blocks »


The render function used by the ContentEditor to render this block type.

The returned JSX may also contain the React Bricks WYSIWYG components: Text, RichText and Image.

The render function receives as arguments:


A function returning the default props for new blocks.


If true, the component isn't shown in the list of components available in the "add block" menu. For example, you may want to hide a block that can be use only inside a repeater block.


The array of the objects representing the props the user will be able to modify in the right Sidebar, with their display properties.

See Side Edit Props definition »


Array of strings, with the names of the props edited via WYSIWYG text components (Text or RichText). This prop is needed now, but it will likely be deprecated in coming versions of React Bricks.


The type of the children items (for a repeater component)


the text for the "Add item" button (for a repeater component)


the text for the "Remove item" button (for a repeater component)

Is the block in edit mode?

If you need to do conditionally render based on the fact that the brick is in edit mode (inside the admin dashboard) or view mode (frontend site), you may use the AdminContext's prop isAdmin

Usage example

const schema = {
  name: BlockNames.HeroUnit,
  label: 'Hero Unit',
  superType: types.BlockSuperType.Single,
  render: props => <HeroUnit {...props} />,
  getDefaultProps: () => ({
    padding: 'BIG',
    title: Plain.deserialize('We develop beautiful web applications'),
    text: Plain.deserialize(
      "We are a hi-tech web development company committed to deliver great products on time. We love to understand our customers' needs and exceed expectations."
  sideEditProps: [
      name: 'padding',
      label: 'Padding',
      type: types.BlockPropType.Select,
      selectOptions: {
        display: types.OptionsDisplay.Select,
        options: [
          { value: 'NO', label: 'No padding' },
          { value: 'SMALL', label: 'Small padding' },
          { value: 'BIG', label: 'Big padding' },
  textEditProps: ['title', 'text'],

The padding prop value is used by the HeroUnit component to apply the correct CSS class.