# React Bricks How-to Guides

This index links all published React Bricks how-to raw Markdown files for LLMs and AI coding assistants.

Base URL: https://www.reactbricks.com

## Project Setup

- [Create a React Bricks project](https://www.reactbricks.com/how-tos/setup/create-a-react-bricks-project/raw) - Create a new React Bricks project with the CLI and run it locally.
- [Install the VSCode extension](https://www.reactbricks.com/how-tos/setup/install-the-vscode-extension/raw) - Install the React Bricks VSCode extension for snippets and faster development.
- [Add your company logo](https://www.reactbricks.com/how-tos/setup/add-your-company-logo/raw) - Personalize the React Bricks Content Editor by adding your company logo.

## Create a brick

- [Create a custom brick](https://www.reactbricks.com/how-tos/create-a-brick/create-a-custom-brick/raw) - Create your first custom brick and register it in React Bricks.
- [Make text visually editable](https://www.reactbricks.com/how-tos/create-a-brick/make-text-visually-editable/raw) - Make the text in custom brick visually editable by adding a Text component.
- [Add rich text](https://www.reactbricks.com/how-tos/create-a-brick/add-rich-text/raw) - Add a RichText component to your custom brick for editable formatted text.
- [Customize rich text styles](https://www.reactbricks.com/how-tos/create-a-brick/customize-rich-text-styles/raw) - Customize the RichText render functions for bold text and links.
- [Add an editable image](https://www.reactbricks.com/how-tos/create-a-brick/add-an-editable-image/raw) - Add a visually editable image to your custom brick and place it beside the text.
- [Add a sidebar control](https://www.reactbricks.com/how-tos/create-a-brick/add-a-sidebar-control/raw) - Add a sidebar control to let editors choose whether the image appears on the left or right.
- [Set a preview image](https://www.reactbricks.com/how-tos/create-a-brick/set-a-preview-image/raw) - Set a preview image for your brick so editors can recognize it more easily in the add-brick interface.
- [Use links in bricks](https://www.reactbricks.com/how-tos/create-a-brick/use-links-in-bricks/raw) - Create a LinkButton brick using the React Bricks Link component and editable text.
- [Validate values](https://www.reactbricks.com/how-tos/create-a-brick/validate-values/raw) - Add validation to sidebar controls so editors get feedback when they enter invalid values.
- [Nesting bricks with Repeater](https://www.reactbricks.com/how-tos/create-a-brick/nesting-bricks-with-repeater/raw) - Nest LinkButton bricks inside a TextImage brick using the React Bricks Repeater component.
- [Render differently in admin and frontend](https://www.reactbricks.com/how-tos/create-a-brick/render-differently-in-admin-and-frontend/raw) - Detect whether a brick is rendering in the Admin interface or on the public frontend and render different UI accordingly.
- [Use the File component](https://www.reactbricks.com/how-tos/create-a-brick/use-the-file-component/raw) - Let editors upload a file and render a download link using the React Bricks File component.

## Page Types, Templates and Custom Fields

- [Create a page type](https://www.reactbricks.com/how-tos/page-types/create-a-page-type/raw) - Organize content into different kinds of pages by defining page types in the React Bricks configuration.
- [Create a page template](https://www.reactbricks.com/how-tos/page-types/create-a-page-template/raw) - Define a page template with fixed slots to give a page type a structured layout.
- [Add custom fields](https://www.reactbricks.com/how-tos/page-types/add-custom-fields/raw) - Add page-level custom fields to a page type and access their values inside bricks with usePageValues.
- [Use page meta data](https://www.reactbricks.com/how-tos/page-types/use-page-meta-data/raw) - Use page meta data for SEO, social sharing, structured data, and bind visual components directly to title, description, and meta image.
- [List pages (by type)](https://www.reactbricks.com/how-tos/page-types/list-pages-by-type/raw) - Fetch and render lists of pages by page type using the List component, usePagesPublic, or fetchPages.

## Integrate external data

- [Fetch external data in bricks](https://www.reactbricks.com/how-tos/integrate-external-data/fetch-external-data-in-bricks/raw) - Fetch data directly inside a brick with getExternalData and merge the API response into the brick props.
- [Fetch external data in page types](https://www.reactbricks.com/how-tos/integrate-external-data/fetch-external-data-in-page-types/raw) - Fetch external data once at page type level and map the shared result to brick props with mapExternalDataToProps.
- [Generate pages from a visual template and external data](https://www.reactbricks.com/how-tos/integrate-external-data/generate-pages-from-a-template-and-external-data/raw) - Create one visually editable template page in React Bricks and generate many dynamic pages by passing args into getExternalData.

## Reuse content across pages

- [Create a story](https://www.reactbricks.com/how-tos/reuse-content-across-pages/create-a-story/raw) - Save and reuse a brick configuration with stories created by editors or defined in code.
- [Reuse a fragment (embed)](https://www.reactbricks.com/how-tos/reuse-content-across-pages/reuse-a-fragment-embed/raw) - Reuse a page or entity as a shared fragment with embeds so updates propagate everywhere.
- [Manage header and footer](https://www.reactbricks.com/how-tos/reuse-content-across-pages/manage-header-and-footer/raw) - Render shared header and footer entities in the app layout with dedicated PageViewer components.

## Customize React Bricks

- [Configure React Bricks](https://www.reactbricks.com/how-tos/customize-react-bricks/configure-react-bricks/raw) - Understand what lives in the React Bricks config file, what you usually customize first, and where to go for deeper docs.
- [Create custom visual components](https://www.reactbricks.com/how-tos/customize-react-bricks/create-custom-visual-components/raw) - Use the useVisualEdit hook to build advanced custom editing components beyond Text, RichText, Image, and File.
- [Create custom rich text plugins](https://www.reactbricks.com/how-tos/customize-react-bricks/create-custom-rich-text-plugins/raw) - Use RichTextExt and the plugin constructors to add your own rich text toolbar buttons, behaviors, and popup-driven plugins.

## Sidebar controls in depth

- [Organize controls in groups](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/organize-controls-in-groups/raw) - Group many sideEditProps into collapsible sections so the sidebar stays easier to scan and easier to use.
- [Use Textarea, Date, Boolean, Number, and Range controls](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-simple-sidebar-controls/raw) - Use the built-in input-like sidebar controls for plain values such as text areas, dates, booleans, numeric values, and sliders.
- [Use the Image control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-the-image-control/raw) - Use the sidebar Image control for media that editors should manage from the sidebar instead of directly in the canvas.
- [Use the Select control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-the-select-control/raw) - Use the Select control when editors must choose one value from a controlled list, whether as a dropdown, radio buttons, or color swatches.
- [Use the Autocomplete control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-the-autocomplete-control/raw) - Use the Autocomplete control when editors need search-based selection from async results instead of a short fixed list.
- [Use the Icon Selector control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-the-icon-selector-control/raw) - Use the Icon Selector control when editors need to search for and choose an icon from supported icon libraries.
- [Use the Relationship control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/use-the-relationship-control/raw) - Use the Relationship control when editors need to connect a brick to one or more pages or entities of a given page type.
- [Create a custom control](https://www.reactbricks.com/how-tos/sidebar-controls-in-depth/create-a-custom-control/raw) - Create your own sideEditProp UI when the built-in controls are not enough for the editing experience you want.

## CMS Features

- [Implement Localization](https://www.reactbricks.com/how-tos/cms-features/localization/raw) - Configure languages in React Bricks, translate pages, and fetch localized content in a Next.js project.
- [Implement A/B Testing](https://www.reactbricks.com/how-tos/cms-features/ab-testing/raw) - Configure A/B Testing variants in React Bricks, resolve the active variant in middleware, and fetch the right page variant in Next.js.
- [Implement Form Management](https://www.reactbricks.com/how-tos/cms-features/form-management/raw) - Create forms in React Bricks, configure form actions, and submit visitor data from a form brick.
- [Implement Email Marketing](https://www.reactbricks.com/how-tos/cms-features/email-marketing/raw) - Configure email marketing page types, render email HTML, and let editors create and send campaigns visually.