Made in Builder.io

Join us for an AI launch event by

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

Get Started Free

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

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} />
    </>
  );
};

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.

Get Started with Builder

Did we mention this website was made with Builder?

Drag-and-drop page building with Gatsby and your components

View example

Builder + Gatsby using our GraphQL API and our Gatsby plugin

View example

Get Started with Builder

What will you create?

Connect Builder to your Gatsby site or app in minutes

Get Started Free

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Features

Pricing

What's New

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Headless CMS: Visual Guide

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Use Cases

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Your content development workflow is broken.

Stop drowning in a backlog of requests to create, edit, and manage content. Adopt a better, simpler, and more component-driven approach.

Get Started

Drag & drop page building for Gatsby

Stop drowning in a backlog of requests to create, edit, and manage content. Adopt a better, simpler, and more component-driven approach.

Try for freeTalk to us

Stop hard-coding,
embrace your Gatsby components

Builder.io uses a Gatsby component-driven approach to content management that makes it easy and elegant, without sacrificing performance

Hard Coded Content

Component-Driven

Use your components directly
in the visual editor!

Integrates with your existing
Gatsby sites and apps

Integrate seamlessly with complete flexibility. Simple SDK or API integrations with any tech stack

Move fast - as one team

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!