Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

Plugin for integrating to allow drag and drop page building with Gatsby. It puts the schema under an allBuilderModels field of the Gatsby GraphQL query, If a templates map is passed as option, this plugin will create gatsby pages dynamically for each page entry in on the path specified.



npm install

How to use

Make a free account over at and grab your public API key from your organization page and:

// In your gatsby-config.js
const path = require('path');
module.exports = {
  plugins: [
      resolve: '',
      options: {
        // public API Key
        publicAPIKey: 'MY_PUBLIC_API_KEY',
        templates: {
          // `page` can be any model of choice, camelCased
          page: path.resolve('templates/my-page.tsx'),

Then start building pages in, hit publish, and they will be incluced in your Gatsby site on each new build!

For a more advanced example and a starter check out gatsby-starter-builder

Using your components in the editor

See this design systems example for lots of examples using your deisgn system + custom components

👉Tip: want to limit page building to only your components? Try components only mode

Register a component

import { Builder } from '';

class SimpleText extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;

Builder.registerComponent(SimpleText, {
  name: 'Simple Text',
  inputs: [{ name: 'text', type: 'string' }],

How to Query

For an up-to-date complete examples check out the Gatsby + starter

  allBuilderModels {
    myPageModel(options: { cachebust: true }) {

Learn more