Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Using with Gatsby

A demo for integrating with Gatsby using our GraphQL API and our plugin

This demo demonstrates creating dynamic pages in on new URLs and generating them with Gatsby, as well as rendering specific parts of your site with content via GraphQL queries (e.g. for pages, components, etc)


🚀 Quick start

  1. Sign up for Then replace the demo API key in gatsby-config.js with your public API key, which you can find in

  2. Clone this demo.

    git clone
    cd builder/examples/gatsby
    npm install
    npm run dev
  3. Connect to your localhost Now that you have the development server running on localhost, point the entry to it by assigning the preview URL to be http://localhost:3000

Screen Shot 2020-02-18 at 9 48 51 AM

When you deploy this to a live or staging environment, you can change the preview URL for your model globally from (see more about models here and preview urls here)

This example create pages dynamically based on the url you add to your entries on, if you want to create a page manually, do not include the model in your tempaltes config as above, add a file under the pages folder and query all the entries your page needs from, for example:

import React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent } from '';

export default class ExamplePage extends React.Component<any> {
  render() {
    const { header, page } =;
    return (
        {/* next line assumes you have a header model in, alternatively you use your own <Header /> component here */}
        <BuilderComponent model="header" content={header[0].content} />
        {/* Render other things in your code as you choose */}
        <BuilderComponent model="page" content={page[0].content} />

// See for more info on our
// GraphQL API and our explorer
export const pageQuery = graphql`
  query {
    allBuilderModels {
      # (optional) custom "header" component model
      header(limit: 1, options: { cachebust: true }) {
      # Manually grab the example content matching "/"
      # For Gatsby content, we always want to make sure we are getting fresh content
      example(limit: 1, target: { urlPath: "/" }, options: { cachebust: true }) {
You can’t perform that action at this time.