How to Build: Localization webinar today @ 10am PST. Register Now
☰
Use Cases
Pricing
The only drag and drop page builder and CMS for Gatsby
Builder's headless CMS for Gatsby comes with a powerful drag-and-drop visual editor that lets you create 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...
Drag and drop to build & optimize
Create pages and content visually, no coding required
High-speed A/B testing
Setup A/B tests and create targeted content experiences. No coding required.
Schedule content to go live
Set scheduled releases and publish content without code changes
See all features
Use your favorite optimization, personalization, and analytics tools, or use Builder’s out-of-the-box features to drive sustainable growth.
...while keeping developers happy
Rich experiences anyone can create
Free up developers to write code, not content
Works with any website or app
Leverage your existing code and components
Tailor to your needs
Completely customize and extend the platform—full control and no limits!
See all features
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
Reap performance gains of using Gatsby, GraphQL, and React
Blazing fast content delivery at the edge
Lazy loading and asset optimization comes out of the box
Learn more
Connect Builder to your Gatsby site or app in minutes
or app in minutes
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} />
</>
);
};REST API Example
React Example
Plain JS Example
// example of server side rendering
// Run when your code doesn't match a page to check Builder for one
let page = await request(
'https://cdn.builder.io/api/v1/html/page?url=' + encodeURIComponent(request.url) + '&apiKey=' + apiKey
)
if (page) {
// use any template language, just put the html between your header and footer
response.status(200).send(yourHeaderHtml + page.data.html + yourFooterHtml)
} else {
response.statua(404).send(notFoundHtml)
}Use your favorite optimization, personalization, and analytics tools, or use Builder’s out-of-the-box features to drive sustainable growth.
Did we mention this website was made with Builder?
Get Started with Builder
What will you create?
Connect Builder to your Gatsby site or app in minutes
Get Started Free
How to Build: Localization webinar today @ 10am PST. Register Now
☰
Use Cases
Pricing
Drag & drop Headless CMS for Gatsby
Stop drowning in a backlog of requests to create, edit, and manage content. Adopt a better, simpler, and more component-driven approach.
Hard Coded Content
Component-Driven
Use your components directly
in the visual editor!
Builder.io is the world’s first Visual CMS. It allows you to adopt a truly collaborative development process to find your perfect balance of developer control and business team autonomy, and build faster together.
1
Add to your codebase
2
Drag and Drop
3
Click to publish!