Skip to content
Docs

Admin Interface

In the Starter projects, the Admin interface is accessible at the /admin path.
It’s pre-configured for you, using React Bricks’ <Admin>, <Login>, <Editor>, <MediaLibrary>, <Playground> and <AppSettings> components.

By default, the Admin Interface offers four main views (unless you customize the Menu items):

  • Editor: The primary view for creating pages and editing content.
  • Media: A comprehensive Digital Assets Management (DAM) system.
  • Playground: A preview area for all Bricks and Page Types
  • Settings / Deploy: Enables Editors to trigger static website rebuilds (for Netlify or Vercel hosting). Admins have a more powerful interface to access the React Bricks Dashboard where they can configure all the App settings and manage User invitations.

Editor

This section allows content creators (Admin or Editor users) to edit the website pages content.

Left panel (Pages)

The left panel displays Pages, organized by Page Type.

Selecting a Page allows you to edit its content.

Central panel (content editor)

The central panel serves two main purposes:

  • Visual editing of block content (Text, Images)
  • Adding, removing, and reordering blocks

Right panel (Page, Block, Item, Stories)

The right panel consists of three tabs:

  • Page: Edit page properties, such as Name, Slug, Author, SEO attributes (Meta tags, OpenGraph, Twitter cards, Schema.org structured data), set the page status (draft / published, locked / unlocked), schedule publishing, and delete the page.
  • Block: Edit block properties as defined in the Brick’s sideEditProps (e.g. background color, padding), and manage repeater items (used in <Repeater> components).
  • Item: Edit block properties of a repeater item
  • Stories: Save a brick’s current state to apply the same text, images and props to other content blocks later. This feature allows you to create configuration templates for your bricks. Stories can both be created in code by developers, or by the editors. In this second case, they are stored on our APIs, ensuring persistence across users without code changes.

Playground

Left panel

The left panel displays all Block types and, below them, all Page types. Clicking on a Block or Page reveals its details on the right.

Central panel

This panel shows the default content for a block or page. Here, you can test the block’s functionality with WYSIWYG editing and side-edit props. You can also capture a component screenshot by clicking the pink button. The screenshot’s image URL is copied to your clipboard, to set the previewImageUrl in the brick’s schema.

Right panel

For a Brick, you’ll be able to see all the editable sidebar controls and in which page types the brick is allowed.

App Settings

Admin users can access the React Bricks Dashboard to configure every aspect of a React Bricks App. Users

Users with Editor roles only see the “Deploy” button to initiate rebuilds.

Click to edit

When logged into the Admin interface and browsing the live website, you’ll see a small pencil icon. Clicking this icon takes you directly to the Admin interface for editing the current page.

Through React Bricks configuration’s clickToEditSide setting, which corner the “click to edit” button appears in, or disable it entirely (see ClickToEditSide).