The only visual and headless CMS and page builder for Gatsby
Builder's headless CMS for Gatsby comes with a powerful drag-and-drop visual editor that lets you create blazing fast digital experiences in minutes
Render Builder pages
Use your components
// get content using @builder.io/gatsby plugin
export const pageQuery = graphql`
query($path: String!) {
allBuilderModels {
page(target: { urlPath: $path }) {
content
}
}
}
`;
// pass content to BuilderComponent
export default function PageTemplate ({ data }) {
return <BuilderComponent
content={data.allBuilderModer.page[0].content}
/>
}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, Builder.io built-in components, open source widgets. You can create components in Builder too
Set permissions at the user and content levels to ensure brand guidelines are followed
The experience you deserve
Integrate with our Gastby plugin, HTML API, or GraphQL API
Bring your custom data into Builder using fetch APIs or passing data at runtime
The performance you expect
Blazing fast content delivery at the edge
Reap performance gains of using Gatsby, GraphQL, and React
Lazy loading and asset optimization comes out of the box
Connect Builder to your Gatsby site or app in minutes
Simple SDK or API integrations with any tech stack
Page Template
Gatsby Config
Live Preview Setup
import * as React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent, builder } from '@builder.io/react';
import { Helmet } from 'react-helmet';
import '@builder.io/widgets';
builder.init(process.env.BUILDER_API_KEY);
export const pageQuery = graphql`
query($path: String!) {
allBuilderModels {
page(target: { urlPath: $path }, limit: 1, options: { cachebust: true }) {
content
}
}
}
`;
export default function PageTemplate({ data }) {
const content = data.allBuilderModels.page[0]?.content;
return (
<>
<Helmet>
<title>{content?.data.title}</title>
</Helmet>
<BuilderComponent content={content} />
</>
);
};Did we mention this website was made with Builder?
Let’s build something!
Drag-and-drop page building with Gatsby and your components
View example
Builder + Gatsby using our GraphQL API and our Gatsby plugin
View example
What will you create?
BUILDER
© 2020 Builder.io, Inc.