How-to GuidesFind what you need, now.
Step-by-step guides with code examples for common React Bricks tasks.
Filter guides by topic, feature, or setup step.
Project Setup
- 01
Create a React Bricks project
4 minCreate a new React Bricks project with the CLI and run it locally.
- 02
Install the VSCode extension
1 minInstall the React Bricks VSCode extension for snippets and faster development.
- 03
Add your company logo
1 minPersonalize the React Bricks Content Editor by adding your company logo.
Create a brick
- 01
Create a custom brick
5 minCreate your first custom brick and register it in React Bricks.
- 02
Make text visually editable
2 minMake the text in custom brick visually editable by adding a Text component.
- 03
Add rich text
2 minAdd a RichText component to your custom brick for editable formatted text.
- 04
Customize rich text styles
3 minCustomize the RichText render functions for bold text and links.
- 05
Add an editable image
3 minAdd a visually editable image to your custom brick and place it beside the text.
- 06
Add a sidebar control
4 minAdd a sidebar control to let editors choose whether the image appears on the left or right.
- 07
Set a preview image
3 minSet a preview image for your brick so editors can recognize it more easily in the add-brick interface.
- 08
Use links in bricks
5 minCreate a LinkButton brick using the React Bricks Link component and editable text.
- 09
Validate values
3 minAdd validation to sidebar controls so editors get feedback when they enter invalid values.
- 10
Nesting bricks with Repeater
5 minNest LinkButton bricks inside a TextImage brick using the React Bricks Repeater component.
- 11
Render differently in admin and frontend
4 minDetect whether a brick is rendering in the Admin interface or on the public frontend and render different UI accordingly.
- 12
Use the File component
4 minLet editors upload a file and render a download link using the React Bricks File component.
Page Types, Templates and Custom Fields
- 01
Create a page type
5 minOrganize content into different kinds of pages by defining page types in the React Bricks configuration.
- 02
Create a page template
6 minDefine a page template with fixed slots to give a page type a structured layout.
- 03
Add custom fields
6 minAdd page-level custom fields to a page type and access their values inside bricks with usePageValues.
- 04
Use page meta data
6 minUse page meta data for SEO, social sharing, structured data, and bind visual components directly to title, description, and meta image.
- 05
List pages (by type)
7 minFetch and render lists of pages by page type using the List component, usePagesPublic, or fetchPages.
Integrate external data
- 01
Fetch external data in bricks
7 minFetch data directly inside a brick with getExternalData and merge the API response into the brick props.
- 02
Fetch external data in page types
7 minFetch external data once at page type level and map the shared result to brick props with mapExternalDataToProps.
- 03
Generate pages from a visual template and external data
12 minCreate one visually editable template page in React Bricks and generate many dynamic pages by passing args into getExternalData.
Reuse content across pages
- 01
Create a story
4 minSave and reuse a brick configuration with stories created by editors or defined in code.
- 02
Reuse a fragment (embed)
5 minReuse a page or entity as a shared fragment with embeds so updates propagate everywhere.
- 03
Manage header and footer
6 minRender shared header and footer entities in the app layout with dedicated PageViewer components.
Customize React Bricks
- 01
Configure React Bricks
7 minUnderstand what lives in the React Bricks config file, what you usually customize first, and where to go for deeper docs.
- 02
Create custom visual components
7 minUse the useVisualEdit hook to build advanced custom editing components beyond Text, RichText, Image, and File.
- 03
Create custom rich text plugins
8 minUse RichTextExt and the plugin constructors to add your own rich text toolbar buttons, behaviors, and popup-driven plugins.
Sidebar controls in depth
- 01
Organize controls in groups
4 minGroup many sideEditProps into collapsible sections so the sidebar stays easier to scan and easier to use.
- 02
Use Textarea, Date, Boolean, Number, and Range controls
6 minUse the built-in input-like sidebar controls for plain values such as text areas, dates, booleans, numeric values, and sliders.
- 03
Use the Image control
5 minUse the sidebar Image control for media that editors should manage from the sidebar instead of directly in the canvas.
- 04
Use the Select control
7 minUse the Select control when editors must choose one value from a controlled list, whether as a dropdown, radio buttons, or color swatches.
- 05
Use the Autocomplete control
8 minUse the Autocomplete control when editors need search-based selection from async results instead of a short fixed list.
- 06
Use the Icon Selector control
5 minUse the Icon Selector control when editors need to search for and choose an icon from supported icon libraries.
- 07
Use the Relationship control
7 minUse the Relationship control when editors need to connect a brick to one or more pages or entities of a given page type.
- 08
Create a custom control
9 minCreate your own sideEditProp UI when the built-in controls are not enough for the editing experience you want.