# React Bricks

React Bricks is a visual headless CMS for React, Next.js, and Astro. Developers create reusable React components called bricks, define which props editors can change, and keep full control over design, code, performance, and integrations. Content teams compose and edit pages visually using those approved bricks.

Use this file as a map to the most useful public React Bricks resources for LLMs, AI coding assistants, and search tools.

## Product Summary

React Bricks is designed for teams that want the editing experience of a visual website builder without giving up a real React codebase. It combines:

- Inline visual editing on top of real React components
- A headless CMS architecture for Next.js and Astro projects
- Reusable content blocks controlled by developers
- Sidebar controls for safe editor customization
- Digital Asset Management (DAM)
- Localization
- Collaboration
- Scheduled publishing
- Content versioning
- Approval workflows
- Advanced SEO controls
- External API integration
- Multiple environments
- SSO and role-based permissions
- ISO 27001 certification, GDPR compliance, and EU/US data residency
- Enterprise support and optional self-hosted backend APIs

React Bricks is a good fit for corporate websites, enterprise websites, composable commerce experiences, marketing sites, blogs, landing pages, universities, public administration, and digital agencies.

## Start a Project

Use the React Bricks CLI to create a new project:

```bash
pnpm create reactbricks-app@latest
```

The CLI guides developers through login, project creation, starter selection, and framework selection for Next.js or Astro. The project requires Node.js 22 or later.

## Primary Resources

- [Home](https://www.reactbricks.com/) - Product overview for React Bricks.
- [Quick Start](https://www.reactbricks.com/quick-start) - Create a React Bricks project with the CLI and start visual editing.
- [Learn](https://www.reactbricks.com/learn) - Tutorials, guides, documentation, and video resources.
- [Interactive Tutorial](https://www.reactbricks.com/interactive-tutorial) - Step-by-step tutorial for learning React Bricks.
- [Documentation](https://docs.reactbricks.com/welcome) - Official React Bricks documentation.
- [Features](https://www.reactbricks.com/features) - Overview of React Bricks capabilities.
- [Visual Editing](https://www.reactbricks.com/visual-editing) - Explanation of React Bricks inline visual editing.
- [Developers](https://www.reactbricks.com/developers) - React Bricks for React developers.
- [Marketplace](https://www.reactbricks.com/marketplace) - Pre-made UI packages and design systems for React Bricks.
- [Pricing](https://www.reactbricks.com/pricing) - React Bricks plans and pricing.
- [Support](https://www.reactbricks.com/support) - Community, paid, and enterprise support resources.
- [Security and Compliance](https://www.reactbricks.com/security-compliance) - ISO 27001, SSO, MFA, backups, EU data residency, and governance controls.
- [Enterprise CMS Buyer's Guide](https://www.reactbricks.com/enterprise-cms-buyers-guide) - Public landing page for the Enterprise CMS Buyer's Guide.
- [Blog](https://www.reactbricks.com/blog) - Product news and CMS, React, and web development articles.
- [Videos](https://www.reactbricks.com/videos) - Talks, demos, and workshops.
- [FAQ](https://www.reactbricks.com/faq) - Frequently asked questions.
- [Contact Sales](https://www.reactbricks.com/contact-sales) - Contact React Bricks sales.

## AI Developer Tooling

- [React Bricks Skill for AI Assistants](https://www.reactbricks.com/downloads/agents.zip) - Downloadable skill and context package that developers can add manually to supported AI coding tools to help them work more effectively with React Bricks projects.
- [Developer Resources](https://www.reactbricks.com/developers) - Developer tools, snippets, AI assistant resources, and learning links.

## How-to Guides as Raw Markdown

These URLs return the source MDX as plain text and are the best entry points for code-focused AI assistance.

### 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.

## Comparisons

### Architecture Comparisons

- [React Bricks vs Headless CMS](https://www.reactbricks.com/comparisons/react-bricks-vs-headless-cms) - Discover why visual editing on top of React gives teams a better authoring experience than a traditional headless CMS alone.
- [React Bricks vs No-code builders](https://www.reactbricks.com/comparisons/react-bricks-vs-nocode-builders) - Compare React Bricks with no-code site builders to see which approach is better for teams that need visual editing without losing frontend quality.
- [Headless CMS vs No-code Site Builder vs React Bricks](https://www.reactbricks.com/comparisons/headless-cms-vs-nocode-website-builder) - Compare form-based headless CMSs, visual site builders, and the middle ground offered by React Bricks for modern teams.
- [React Bricks vs AI-generated Next.js site](https://www.reactbricks.com/comparisons/react-bricks-vs-ai-generated-nextjs-site) - Compare React Bricks with a plain AI-generated Next.js website to see why structured, reusable, visually editable content is the better long-term foundation.

### Product Comparisons

- [React Bricks vs Webflow](https://www.reactbricks.com/comparisons/react-bricks-vs-webflow) - Webflow or React Bricks? Compare a visual site builder with a React-first visual headless CMS built to protect your design system.
- [React Bricks vs Builder.io](https://www.reactbricks.com/comparisons/react-bricks-vs-builder-io) - Builder.io and React Bricks both offer visual editing, but differ significantly in developer control, AI approach, and enterprise readiness.
- [React Bricks vs Plasmic](https://www.reactbricks.com/comparisons/react-bricks-vs-plasmic) - Plasmic and React Bricks both combine visual editing with code, but they differ in a fundamental way: Plasmic is a visual builder that integrates with code, while React Bricks is a headless CMS built on developer-defined React components.
- [React Bricks vs Prismic](https://www.reactbricks.com/comparisons/react-bricks-vs-prismic) - React Bricks and Prismic are both headless CMS platforms, but differ significantly in editing experience, developer workflow, AI approach, and enterprise capabilities.
- [React Bricks vs Contentful](https://www.reactbricks.com/comparisons/react-bricks-vs-contentful) - React Bricks and Contentful are both modern CMS platforms for digital teams, but they differ in visual editing, React developer experience, AI workflow, and how closely the CMS is tied to your design system.
- [React Bricks vs Sanity](https://www.reactbricks.com/comparisons/react-bricks-vs-sanity) - React Bricks and Sanity are both modern CMS platforms for serious digital teams, but they differ in visual editing, React developer experience, AI workflow, and how closely the CMS is tied to your design system.
- [React Bricks vs Tina CMS](https://www.reactbricks.com/comparisons/react-bricks-vs-tina-cms) - React Bricks and Tina CMS both serve modern React teams, but they differ in editing model, content operations, AI capabilities, marketing tooling, and enterprise readiness.
- [React Bricks vs Strapi](https://www.reactbricks.com/comparisons/react-bricks-vs-strapi) - React Bricks and Strapi are both modern CMS platforms, but they differ in visual editing, React developer experience, AI workflow, hosting model, and how much of the marketing stack is built in.
- [React Bricks vs WordPress](https://www.reactbricks.com/comparisons/react-bricks-vs-wordpress) - React Bricks and WordPress both help teams publish content fast, but they differ dramatically in visual editing, React developer experience, AI workflow, and enterprise governance.

## Solution Pages

- [Enterprise Headless CMS](https://www.reactbricks.com/solutions/enterprise-headless-cms) - Visual headless CMS for enterprise teams.
- [CMS for Marketing Teams](https://www.reactbricks.com/solutions/cms-for-marketing-teams) - React Bricks for fast, editable marketing websites.
- [CMS for Digital Agencies](https://www.reactbricks.com/solutions/cms-for-digital-agencies) - React Bricks for agencies building client websites.
- [Headless Commerce CMS](https://www.reactbricks.com/solutions/headless-commerce-cms) - React Bricks for composable commerce experiences.

## Key Feature Pages

- [Visual Editing CMS](https://www.reactbricks.com/features/visual-editing-cms)
- [React CMS](https://www.reactbricks.com/features/react-cms)
- [Next.js CMS](https://www.reactbricks.com/features/nextjs-cms)
- [Astro CMS](https://www.reactbricks.com/features/astro-cms)
- [Remix CMS](https://www.reactbricks.com/features/remix-cms)
- [AI Content Generation](https://www.reactbricks.com/features/ai-content-generation)
- [Advanced SEO](https://www.reactbricks.com/features/advanced-seo)
- [Localization](https://www.reactbricks.com/features/localization)
- [Collaboration](https://www.reactbricks.com/features/collaboration)
- [Roles, Permissions, and SSO](https://www.reactbricks.com/features/roles-permissions)
- [Security and Compliance](https://www.reactbricks.com/features/security-compliance)
- [Approval Workflow](https://www.reactbricks.com/features/approval-workflow)
- [Content Versioning](https://www.reactbricks.com/features/content-versioning)
- [Scheduled Publishing](https://www.reactbricks.com/features/scheduled-publishing)
- [Digital Asset Management](https://www.reactbricks.com/features/digital-asset-management)
- [External API Integration](https://www.reactbricks.com/features/external-api-integration)
- [Page Templates](https://www.reactbricks.com/features/page-templates)
- [Form Management](https://www.reactbricks.com/features/form-management)
- [A/B Testing](https://www.reactbricks.com/features/ab-testing)
- [Self-hosted Backend](https://www.reactbricks.com/features/self-hosted-backend-visual-cms)
- [Self-hosted Frontend](https://www.reactbricks.com/features/self-hosted-frontend-visual-cms)

## Public Case Studies

- [YuLife](https://www.reactbricks.com/case-studies/yulife)
- [Deel / Capbase](https://www.reactbricks.com/case-studies/capbase-deel)
- [The Weather Channel / HBCU Go](https://www.reactbricks.com/case-studies/hbcu-go-the-weather-channel)
- [La Banque Postale / Django](https://www.reactbricks.com/case-studies/django-la-banque-postale)
- [Woosmap](https://www.reactbricks.com/case-studies/woosmap)
- [Casavo](https://www.reactbricks.com/case-studies/casavo)
- [Everfund](https://www.reactbricks.com/case-studies/everfund)
- [LaVita](https://www.reactbricks.com/case-studies/la-vita)
- [Cortina Bikes](https://www.reactbricks.com/case-studies/cortina)
- [Beara Beara](https://www.reactbricks.com/case-studies/beara-beara)
- [React Brussels](https://www.reactbricks.com/case-studies/react-brussels)
- [Neoskop](https://www.reactbricks.com/case-studies/neoskop)
- [Flowe / Banca Mediolanum](https://www.reactbricks.com/case-studies/flowe-banca-mediolanum)
- [Skyro](https://www.reactbricks.com/case-studies/skyro)

## Notes for AI Assistants

- Prefer official documentation and raw how-to MDX links for implementation details.
- Use comparison pages for product positioning and migration questions.
- Use feature and solution pages for high-level capability questions.
- Buyer guide chapters may require access; use the public Enterprise CMS Buyer's Guide landing page unless the user provides an accessible guide URL.
- For account-specific, pricing, or enterprise-contract questions, direct users to the pricing page or contact sales.