DOCSEARCHbyAlgolia
Submit Docs

React Bricks Documentation

website·Indexed 35 days ago

https://docs2.reactbricks.com/

Documentation for React Bricks, a visual CMS featuring a Media Library DAM, real-time collaboration, and an advanced SEO interface. Includes API references for hooks like useVisualEdit and useReactBricksContext, guides on RSC data fetching, internationalization, and approval workflows.

Tokens
43.5K
Snippets
173
Records
329
Agent score
50%

What's inside React Bricks

  1. Overview of React Bricks Visual CMS

    React Bricks is a combination of a React framework for building visual, "Wix-like" CMS experiences and a SaaS backend for content storage. It bridges the gap between headless CMSs and content creators by providing a WYSIWYG editing experience where the Admin interface reflects the actual published website. It is framework-independent (supporting Next.js, Gatsby, and Remix), styling-independent, and hosting-independent.

  3. Use React Bricks with React Server Components (RSC)

    Starting from v4.2, React Bricks supports React Server Components (RSC) via the react-bricks/rsc package. This is primarily targeted at Next.js projects using the App Router. Users can scaffold a project using the "Next.js with App Router" starter to get a complete RSC-enabled setup.

  4. Manage general App Settings in the Admin interface

    The Admin user can configure the following global application settings within the Admin interface: App name, internationalization languages, and Deploy settings (including staging and production build hooks). These settings can also be managed via the React Bricks Dashboard.

  5. Manage content using React Bricks Environments

    Environments in React Bricks act as content branches, providing separate repositories of content to isolate different stages of a project. Each environment maintains its own unique set of content, users, build hooks, languages, and change history. This is particularly useful for creating a development sandbox for developers, managing a website version migration (e.g., v1 to v2), or creating temporary content backups for seasonal events like Black Friday.

  6. Manage Page publishing and backups in v3

    New administrative features in v3 include:

    • Backup and Restore: App content can be backed up and restored via the React Bricks Dashboard.
    • Scheduled Publishing (Pro): Set a specific date and time for a Page to be published, with an optional trigger for staging or production rebuilds.

  7. Manage SEO metadata and social tags in React Bricks

    Since v4, React Bricks provides an advanced SEO interface allowing administrators to manage Meta tags, Open Graph values, and Twitter Cards. For Enterprise plans, this includes full Schema.org metadata support with comprehensive schema entities and repeatable form fields. Access to edit these SEO attributes can be restricted or granted based on the user's invitation settings.

  8. Use React Bricks UI for Tailwind CSS projects

    React Bricks UI is a free collection of fully responsive and dark-mode compatible bricks built with Tailwind CSS. These bricks are designed as starting points to help developers learn how to create their own custom bricks. They are pre-included in all React Bricks starter projects that use Tailwind CSS.
    # React Bricks UI is available on GitHub
https://github.com/ReactBricks/react-bricks-ui

  9. Understand default User Roles in React Bricks

    React Bricks provides two primary user roles to manage content and application access. These roles can be further expanded using Custom Roles and Permissions.

    • Admin: Full access to edit content, lock/unlock pages, manage users via the React Bricks Dashboard, and modify application settings.
    • Editor: Can edit all pages. Ability to create pages, delete pages, or trigger build hooks is dependent on permissions granted by the Admin.

  10. Manage assets in the React Bricks Media Library

    The React Bricks Media Library serves as the central repository for all images and files uploaded to a project. It provides the following capabilities:

    • Viewing Options: Images can be viewed in a thumbnail layout (with adjustable sizes) or as a list. Files are exclusively displayed in a list view.
    • Discovery: Assets can be located using the search bar or by applying filters.
    • Organization: Users can create folders to categorize assets and move elements between folders.
    • Deletion & Recovery: Assets can be moved to the trash bin, where they can either be permanently deleted or restored to the library.

  11. Manage application locales for content translation

    In the React Bricks dashboard, you can define the languages (locales) required by your application. When multiple locales are configured, the React Bricks interface enables the translation of content for each page across all defined locales.

  12. Use the Image component for responsive optimized images

    The Image component renders responsive, optimized images on the frontend with progressive lazy loading. When images are uploaded via the Admin interface, React Bricks automatically generates responsive versions, creates a srcSet for optimal selection, generates a light blurred placeholder for progressive loading, stores assets on a global CDN, and applies SEO-friendly names via rewrite rules.