# 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. - [Product Facts](https://www.reactbricks.com/product-facts.md) - Concise factsheet for LLMs covering positioning, supported frameworks, security, hosting, pricing model, and ideal users. - [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. - [All How-to Guides Markdown Index](https://www.reactbricks.com/how-tos/raw) - Markdown index linking every published raw how-to MDX file. ### 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 as Raw Markdown These URLs return the comparison source MDX as plain text. ### Architecture Comparisons - [React Bricks vs Headless CMS](https://www.reactbricks.com/comparisons/react-bricks-vs-headless-cms/raw) - 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/raw) - Compare React Bricks with no-code site builders 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/raw) - 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/raw) - Compare React Bricks with a plain AI-generated Next.js website for structured, reusable, visually editable content. ### Product Comparisons - [React Bricks vs Webflow](https://www.reactbricks.com/comparisons/react-bricks-vs-webflow/raw) - 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/raw) - Compare visual editing, developer control, AI approach, and enterprise readiness. - [React Bricks vs Plasmic](https://www.reactbricks.com/comparisons/react-bricks-vs-plasmic/raw) - Compare visual editing, code ownership, AI workflows, design-system guardrails, and enterprise CMS needs. - [React Bricks vs Prismic](https://www.reactbricks.com/comparisons/react-bricks-vs-prismic/raw) - Compare editing experience, developer workflow, AI content generation, marketing tools, and enterprise capabilities. - [React Bricks vs Contentful](https://www.reactbricks.com/comparisons/react-bricks-vs-contentful/raw) - Compare visual editing, React developer experience, AI workflow, and design-system control. - [React Bricks vs Sanity](https://www.reactbricks.com/comparisons/react-bricks-vs-sanity/raw) - Compare visual editing, React developer experience, AI workflow, structured content, and design-system control. - [React Bricks vs Tina CMS](https://www.reactbricks.com/comparisons/react-bricks-vs-tina-cms/raw) - Compare visual editing, Git-based workflows, AI capabilities, marketing tooling, and enterprise readiness. - [React Bricks vs Strapi](https://www.reactbricks.com/comparisons/react-bricks-vs-strapi/raw) - Compare visual editing, React developer experience, AI workflow, hosting model, and built-in marketing tools. - [React Bricks vs WordPress](https://www.reactbricks.com/comparisons/react-bricks-vs-wordpress/raw) - Compare visual editing, React developer experience, AI workflow, enterprise governance, and publishing speed. ## 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. - Prefer raw comparison MDX links 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.