The only visual and headless CMS and page builder 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
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.
...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!
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
Connect Builder to your React site or app in minutes
Simple SDK and API integrations work seamlessly with React
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>;
};
Did we mention this website was made with Builder?
Let’s build something!
Using Builder with React
View example
Create design system with your React components
View example
Bring Storybook design system into Builder
View example
What will you create?
BUILDER
© 2020 Builder.io, Inc.