Headless CMS for Gatsby
Welcome to Builder, the best Gatsby CMS designed for developers and marketers alike. Our drag & drop headless content management system seamlessly integrates with Gatsby to create fast, dynamic, and SEO-friendly websites. Discover how you can build scalable static sites quickly and effortlessly.
Why Choose Builder and Gatsby?
Integrating Builder with GatsbyJS combines the speed, performance, and vibrant plugin ecosystem of Gatsby with the flexibility and ease of use of Builder's visual editing. This Jamstack integration provides a streamlined workflow to build blazing-fast websites with future-proof flexibility. The strengths of Gatsby and Builder complement each other to create a compelling modern solution for teams and projects of all sizes.
Visual CMS Features
Get more done with less effort
Visual Editor
Enable everyone to get experiences to market. Let anyone drag and drop to compose experiences with your React components.
Structured Content
Scale content efficiently. Create flexible data models for content that needs to scale across experiences or channels.
Asset Library
Store and manage optimized assets. Upload, optimize, organize, and search for images and videos.
AI
Auto-generate content and sections. Use AI to generate content or entire visual sections with chat prompts.
Create a project using our Gatsby and React SDK
This Gatsby and Builder starter shows how to create dynamic pages with new URLs in Builder that can be generated by Gatsby. It also demonstrates rendering specific sections of your site with Builder.io content through GraphQL queries, such as pages, headers, footers, and more. Embrace content modeling and content types and say goodbye to markdown files. During the setup process, environment variables are automatically selected to connect different components, enabling faster builds with incremental content changes.
npm install @builder.io/gatsby @builder.io/react
git clone the repo
Start building
Check out Builder's integration guide for detailed, step-by-step instructions on using Gatsby. The docs walkthrough page building while also covering sections, components, and data integration. Follow the guide to seamlessly connect your Gatsby project and Builder's Visual Headless CMS capabilities.
Leverage a range of scalable built-in tools
Utilize Builder however you need with powerful server-side and static optimization tools.
Roles and permissions
Determine who can input content, who can use your approved design system, and who can create fully bespoke experiences.
Localization
Deliver highly personalized and localized experiences at scale.
Environments
Create pre-production environments to test updates and functionality
Performance
Build blazing fast experiences with advanced optimization, content delivery at the edge, and more.
Build using your Gatsby components
Here's an example of code that uses Builder for a component-driven page.
Quick Code Reference
builder.init()
Each project you build in Builder has a Public API key that you can use to request your Builder content. Pass your key here to tell Builder where to look.
builder.get()
Fetches your content from Builder as JSON. You can add parameters and queries to get the right result.
<BuilderComponent/>
Pass the JSON you got from builder.get() to render a Builder page or section.
Builder.registerComponent()
Register any code component in your app to Builder. Then, it can be used for drag-and-drop page building.
4 Approaches to Visual Editing with a Headless CMS
In today's digital landscape, agile content management is crucial for rapidly publishing new content across platforms. This has led to the rise of headless CMS as a flexible approach. For Gatsby frontend developers, integrating a headless CMS like Builder provides a powerful way to separate the content backend from Gatsby's frontend framework. This enables dynamic content delivery while leveraging Gatsby's strengths for the UI.
Learn more about Builder.io + Gatsby
Pressed for time to begin from square one, yet eager to dive into Gatsby and Builder? Launch a Gatsby site or ecommerce storefront in minutes. Customize and tailor it in real-time to your developer experience —it's entirely yours!
Partof
a
Compose content and iterate fast without sacrificing what you love.
BETA
Introducing
Visual Copilot
Visual Copilot saves developers time by using AI to turn Figma designs into code that looks like yours.
Learn more
Get started with Builder
Use what you already have, or build a future-proof Gatsby application
Lastly, Builder’s Visual Headless CMS can be incrementally adopted for a better user experience. You don't have to rebuild your frontend from scratch—you can build on top of what you already have. And if you decide to replatform, it's easy: content created in Builder's Visual CMS will seamlessly migrate to your new platform.
