How to Build: Localization webinar today @ 10am PST. Register Now

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Log in

Product

Features

Integrations

Talk to an Expert

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

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

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

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

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

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

Security

Privacy Policy

SaaS Terms

How to Build: Localization webinar today @ 10am PST. Register Now

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Log in

Product

Integrations

Talk to an Expert

Developers

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.

Get Started

Hard Coded Content

Component-Driven

Use your components directly
in the visual editor!

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!

Made in Builder

Made in Builder.io