BUILDER

Features

Pricing

Resources

Login

Get Started

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

Get Started

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.

See All Features

...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!

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

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

Getting Started with Builder

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?

Get Started

BUILDER

Product

Features

Pricing

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Jobs

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service