FREE Workshop on January 9th »

How-To Guides

Create a custom brick
Visually editable Text
Visually editable Image
Visually editable Rich Text
Customize Rich Text Styles
Use Links in bricks
Add Sidebar Controls
Add Preview Image and Tags
Turn existing components to Bricks
Validate sidebar controls values
Nested Bricks with Repeaters
Let users upload files

Know if you are in Admin or Frontend
Sidebar controls in-depth: Text, Textarea, Date, Boolean, Number, Range
Sidebar controls in-depth: Select and Autocomplete
Sidebar controls in-depth: Image and Icon Selector
Sidebar controls in-depth: Relationship
Sidebar controls in-depth: Custom component

Create Page Types
Page Templates
Custom Fields
Page Meta and Schema.org
Fetch pages by type

Stories
Embed pages (by reference)
Manage Header and Footer

Fetch external data in bricks
Fetch external data in pages

Invite users
Standard user roles
Custom roles and Permissions
Lock pages and blocks
Deploy a React Bricks website

Configuration and feature flags
Custom RichText plugins
Custom Visual editing components

Digital Assets Management (DAM)
Image optimization
Localization
Real-time Collaboration
Schedule publishing
Advanced SEO
Approval Workflows
SAML Single Sign-On (SSO)
Content environments
Change history (content versioning)
Backup and Restore (also off-site)
Custom CDN Domain
Build Hooks and Audit Logs

All the features

Create a custom brick
Visually editable Text
Visually editable Image
Visually editable Rich Text
Customize Rich Text Styles
Use Links in bricks
Add Sidebar Controls
Add Preview Image and Tags
Turn existing components to Bricks
Validate sidebar controls values
Nested Bricks with Repeaters
Let users upload files

Create Bricks - In depth

Know if you are in Admin or Frontend
Sidebar controls in-depth: Text, Textarea, Date, Boolean, Number, Range
Sidebar controls in-depth: Select and Autocomplete
Sidebar controls in-depth: Image and Icon Selector
Sidebar controls in-depth: Relationship
Sidebar controls in-depth: Custom component

Create Page Types
Page Templates
Custom Fields
Page Meta and Schema.org
Fetch pages by type

Reuse content across pages

Stories
Embed pages (by reference)
Manage Header and Footer

Integrate external data

Fetch external data in bricks
Fetch external data in pages

Users, Permissions, Deployment

Invite users
Standard user roles
Custom roles and Permissions
Lock pages and blocks
Deploy a React Bricks website

Customize React Bricks

Configuration and feature flags
Custom RichText plugins
Custom Visual editing components

CMS Capabilities

Digital Assets Management (DAM)
Image optimization
Localization
Real-time Collaboration
Schedule publishing
Advanced SEO
Approval Workflows
SAML Single Sign-On (SSO)
Content environments
Change history (content versioning)
Backup and Restore (also off-site)
Custom CDN Domain
Build Hooks and Audit Logs

How to install the VSCode Snippets Extension

Video Guide

Coming soon

In this short guide, we'll explore how to install the React Bricks snippets extension for Visual Studio Code to speed up your brick creation process.

Open Visual Studio Code, go to Settings > Extensions, and search for "React Bricks" in the search box.

After installation, you can create a brick by simply typing brick.

The extension also lets you quickly add visually editable elements like Text, RichText, and Image. For sideEditProps, you can easily insert sidebar controls and select props, making your development workflow more efficient.

Available snippets

`brick→`	Scaffolds a new Brick. Use it in a new file
`sideEditProp→`	Creates a new `SideEditProp`
`selectOptions→`	Creates the `selectOptions` for a select `SideEditProp`
`Text→`	Adds a React Bricks `<Text>` component
`RichText→`	Adds a React Bricks `<RichText>` component
`Image→`	Adds a React Bricks `<Image>` component
`Repeater→`	Adds a React Bricks `<Repeater>` component
`File→`	Adds a React Bricks `<File>` component