Sourcing from Builder.io

Builder.io has all the benefits of a modern headless CMS platform, plus the power of a drag and drop editor that enables everyone to edit more than just content. Builder.io + Gatsby empowers your entire team to create performant and fully customizable pages quickly.

Editor example

Quick Start

Prerequisites

Make a free account over at Builder.io and grab your public API key from your organization page

Fresh project:

To start on a fresh project quickly, use the BuilderIO Gatsby starter

gatsby new my-builder-site https://github.com/BuilderIO/gatsby-starter-builder

Existing project:

Use @builder.io/gatsby plugin which will expose Builder.io data and optionally generate pages dynamically from a provided templates.

Query Builder.io data

The @Builder.io/gatsby plugin will add allBuilderModels to GraphQL, under which you can specify which model you’d like to get entries from.

For example to get the entries from your models myHeader, myFooter:

{
  allBuilderModels {
    myHeader(limit: 1, options: { cachebust: true }) {
      content
    }
    myFooter(limit: 1, options: { cachebust: true }) {
      content
    }
  }
}

Or you can query by urlPath for your page models:

query($path: String!) {
  allBuilderModels {
    myPageModel(
      target: { urlPath: $path }
      limit: 1
      options: { cachebust: true }
    ) {
      content
    }
  }
}

Learn more

Edit this page on GitHub