React Bricks


The main React Bricks configuration file is located in /react-bricks/config.js.

This file imports the appId and apiKey you set in /credentials.config.js and exports the complete configuration.

Configuration object

    appId: string
    apiKey: string

    blockTypeSchema: IBlockType[]
    pageTypeSchema: IPageType[]

    logo: string
    contentClassName: string
    renderLocalLink: RenderLocalLink
    navigate: (path: string) => void
    loginPath: string
    editorPath: string
    playgroundPath: string
    appSettingsPath: string

We can group configuration settings into three parts: credentials, schemas and environment settings.



Identifies this React Bricks app. Configured in /credentials.config


ApiKey for React Bricks APIs. Configured in /credentials.config



This is where blocks are defined. See The blocks schema


This is where page types are defined. See Page types

Environment settings

Let alone logo and contentClassName, all of these environment settings are already set by the starter you choose.


The URL for the logo you want to appear in the Header of the Admin dashboard


Useful if you need a particular class applied to all of your content, so that the editing environment will look just the same as the front-end.


Very important to manage local links inside the text your users will edit.

The default Link component React Bricks uses to render links renders a <a> tag for external links and uses the component returned by this function to render a local link.

In this way you can provide your framework's router Link component (for example the Gatsby or Next <Link> component), so that local links are managed by the router, with the ability to prefetch pages and without triggering a full page reload.

This function accepts one argument, which is an object with the following keys:

  • href: destination path
  • children: link children elements (the link description)
  • className: class to be applied to links
  • activeClassName: class to be applied to active links
  • isAdmin: useful to do different things for the admin interface header links (used in the Next starter)

A function to navigate to a page. Typically it uses the Gatsby's router navigate or Next.js router's Router.push functions.

React Bricks needs it to manage authentication redirects.


Path to the Admin "Login" page. Defaults to /admin


Path to the Admin "Editor" page. Defaults to /admin/editor


Path to the Admin "Playground" page. Defaults to /admin/playground


Path to the Admin "App Settings" page. Defaults to /admin/app-settings

Usage example

Here you can see an example of a config.js file, for a Gatsby-based project:

import React from 'react'
import { Link, navigate } from 'gatsby'
import pageTypeSchema from './pageSchema'
import blockTypeSchema from './bricks'
import { appId, apiKey } from '../../credentials.config'
import logo from '../images/logo.svg'

const config = {
  contentClassName: 'content',
  renderLocalLink: ({ href, children, className, activeClassName }) => (
    <Link to={href} className={className} activeClassName={activeClassName}>

export default config