Drag and drop page builder and CMS for React - Builder.io

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Github

Get Started Login

☰

This page was made in Builder!

The only drag and drop page builder and CMS for React

Builder's headless CMS for React comes with a powerful drag-and-drop visual editor that lets you create digital experiences in minutes

Get Started

Render Builder pages

Use your components

import { BuilderComponent, builder } from '@builder.io/react'

builder.init('YOUR_KEY')

export default let HomePage = () => {
  const [pageJson, setPage] = useState(null)

  useEffect(() => 
    builder.get('page', { url: '/' }).promise().then(setPage)
  , [])

  return <BuilderComponent model="page" content={pageJson} />
}

Empowering teams and powering content for leading brands

Unlock and unblock non-technical talent...

Create pages and content visually, no coding required

Set scheduled releases and publish content without code changes

Setup A/B tests and create targeted content experiences. No coding required.

See All Features

...while keeping developers happy

Free up developers to write code, not content

Leverage your existing code and components

Completely customize and extend the platform - full control and no limits!

See All Features

The control you need

Import your custom React components to leverage your design system in the visual editor

Use our Storybook add-on to bring Builder into your existing workflow

Create custom components within the Builder drag and drop editor

Set permissions at the user and content levels to ensure brand design guidelines are followed

The experience you deserve

Integrate with our React SDK, HTML API, or GraphQL API

Bring your custom data into Builder using fetch APIs or passing data at runtime

Enjoy the perfect mix of visual drag and drop editing mixed with the full control of writing code

The performance you expect

Supports server-rendering with React as well as single page apps

Blazing fast content delivery at the edge

Asset optimization comes out of the box

Learn more about performance

Connect Builder to your React site or app in minutes

Simple SDK and API integrations work seamlessly with React

Also see our guides for Next.js and Gatsby

import { BuilderComponent, builder } from "@builder.io/react";

builder.init("YOUR_KEY");

export default CatchAllPage = () => {
  const [pageJson, setPage] = useState();

  useEffect(() => {
    builder
      .get("page", { url: location.pathname })
      // The value will be `null` if no page was found
      .promise()
      .then(setPage);
  }, []);

  return pageJson === undefined ? (
    <Loading />
  ) : pageJson ? (
    <BuilderComponent model="page" content={pageJson} />
  ) : (
    <NotFound />
  );
};

// Then in your app.js
export default pages = () => {
  <Switch>
    <Route path="/" component={Home} />
    {/* Your other routes... */}
    <Route component={CatchAllPage} />
  </Switch>;
};