{"id":28434396,"url":"https://github.com/builderio/gatsby-starter-builder","last_synced_at":"2025-08-03T03:42:43.684Z","repository":{"id":38433294,"uuid":"250334108","full_name":"BuilderIO/gatsby-starter-builder","owner":"BuilderIO","description":"Gatsby example with drag and drop page building","archived":true,"fork":false,"pushed_at":"2023-06-15T19:03:23.000Z","size":9256,"stargazers_count":72,"open_issues_count":26,"forks_count":39,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-05T19:08:51.061Z","etag":null,"topics":["cms","drag-drop","gatsby","headless","page-builder","react","wysiwyg"],"latest_commit_sha":null,"homepage":"https://builder.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BuilderIO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-26T18:03:28.000Z","updated_at":"2025-05-15T05:29:05.000Z","dependencies_parsed_at":"2023-02-15T08:16:24.358Z","dependency_job_id":null,"html_url":"https://github.com/BuilderIO/gatsby-starter-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BuilderIO/gatsby-starter-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fgatsby-starter-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fgatsby-starter-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fgatsby-starter-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fgatsby-starter-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BuilderIO","download_url":"https://codeload.github.com/BuilderIO/gatsby-starter-builder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BuilderIO%2Fgatsby-starter-builder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262765746,"owners_count":23360968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","drag-drop","gatsby","headless","page-builder","react","wysiwyg"],"created_at":"2025-06-05T19:08:50.970Z","updated_at":"2025-06-30T11:32:56.091Z","avatar_url":"https://github.com/BuilderIO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Builder.io Gatsby Example\n\nGatsby starter with drag + drop page building with your React components via Builder.io's visual headless CMS\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cimg src=\"https://imgur.com/HjBWIbv.gif\" alt=\"Editor example\" /\u003e\n\n## Quick Start\n\n1. **Sign up at Builder.io and Create a Gatsby site.**\n\n   - Clone this repository or use `gatsby new`\n\n   ```shell\n   # create a new Gatsby site using this starter\n   gatsby new my-builder-site https://github.com/BuilderIO/gatsby-starter-builder\n   ```\n\n   - Grab a free account at [builder.io](https://builder.io/signup) and create a new space. Then return to this page and follow this [link](https://builder.io/fork-sample-org) to get set up with all the models used in this starter and some sample content to get you started.\n\n   - In Builder.io, click on the Account icon on the left sidenav.\n\n   \u003cfigure\u003e\n     \u003cimg src=\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd26eb45cd52a4cada42413cd5c99419d\"  alt=\"Account icon in left sidenav\" width=\"200\" style=\"display:  block; margin: auto\"/\u003e\n   \u003c/figure\u003e\n\n   - Change the Site URL to `http://localhost:8000` and copy the [Public API Key](https://builder.io/account/space).\n\n   - In your code editor, add the Public API Key you just copied to [src/config.js](src/config.js)\n\n    ```shell\n    builderAPIKey: '59bb518773c14842921abe05d5e2bee3' \u003c-- replace this with your API Key\n    ```\n\n2. **Start developing.**\n\n   Navigate into your new site’s directory and start it up.\n\n   ```shell\n   cd my-default-starter/\n   gatsby develop\n   ```\n\n   Then start building pages in Builder! Use the pre-built templates, and components to create exactly what you want. This starter uses [@builder.io/gatsby plugin](https://github.com/BuilderIO/builder/tree/master/packages/gatsby) to fetch all your published pages and add them to your Gatsby build.\n\n3. **Deploy.**\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/BuilderIO/gatsby-starter-builder)\n\nFor continuous deployment from netlify \u003c\u003e Builder.io :\n\n- Create a [build hook](https://docs.netlify.com/configure-builds/build-hooks/) in netlify\n- Add the build hook from last step to Builder.io global webhooks in your new [space settings](https://builder.io/account/space).\n\n## 🧐 What's inside?\n\nThis starter demonstrates creating dynamic pages in Builder.io on new URLs and generating them with Gatsby, as well as rendering specific parts of your site with Builder.io content via GraphQL queries (e.g. for pages, header, footer, etc)\n\nSee:\n\n- [src/templates/LandingPage.jsx](src/templates/LandingPage.jsx) for using GraphQL to query and render Builder.io components and pages manually in parts of your Gatsby site and content\n- [src/layouts/PageLayout.jsx](src/layouts/PageLayout.jsx) for an example on wrapping your pages with content from `header` and `footer` model entries.\n- [@builder.io/gatsby](https://github.com/builderio/builder/tree/master/packages/gatsby) the plugin used in this starter to generate pages dynamically.\n\n### Using your custom components in the editor\n\n\u003e 👉**Tip: want to limit page building to only your components? Try [components only mode](https://builder.io/c/docs/guides/components-only-mode)**\n\nRegister a component\n\n```tsx\nimport { Builder } from '@builder.io/react';\n\nclass SimpleText extends React.Component {\n  render() {\n    return \u003ch1\u003e{this.props.text}\u003c/h1\u003e;\n  }\n}\n\nBuilder.registerComponent(SimpleText, {\n  name: 'Simple Text',\n  inputs: [{ name: 'text', type: 'string' }]\n});\n```\n\nThen import it in the template or in your [builder-settings.js](src/builder-settings.js)\n\n```tsx\nimport './components/simple-text';\n// ...\n```\n\nSee:\n\n- [src/components/Hero/hero.builder.js](src/components/Hero/hero.builder.js) for an example of using a custom react component in the Builder.io visiaul editor.\n\n- [design systems example](https://github.com/BuilderIO/builder/tree/master/examples/react-design-system) for lots of examples using your deisgn system + custom components\n\n### Mixed Content errors when hosting on insecure http\n\nOur editor uses the preview URL you supply for live editing. Because the editor is on `https`, the preview might not work correctly if your development setup uses http. To fix this, change your development set up to serve using https. Or, as a workaround, on Chrome you can allow insecure content on localhost, by toggling the `insecure content` option here [chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A9009](chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A8000)\n\n## Prerequisites\n\n- Node\n- [Gatsby CLI](https://www.gatsbyjs.org/docs/)\n\n## Available scripts\n\n### `build`\n\nBuild the static files into the `public` folder\n\n#### Usage\n\n```sh\n$ npm run build\n```\n\n### `clean`\n\nRuns `gatsby clean` command.\n\n#### Usage\n\n```sh\nnpm run clean\n```\n\n### `develop` or `start`\n\nRuns the `clean` script and starts the gatsby develop server using the command `gatsby develop`.\n\n#### Usage\n\n```sh\nnpm run develop\n```\n\n### `format`\n\nFormats code and docs according to our style guidelines using `prettier`\n\n#### Usage\n\n```sh\nnpm run format\n```\n\n## CONTRIBUTING\n\nContributions are always welcome, no matter how large or small.\n\n## Learn more\n\n- [Official docs](https://www.builder.io/c/docs/getting-started)\n\n## Gatsby starters and resources:\n\n| Resource                                                                                            | description                                                                                                                                 |\n| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| [@Builder.io/gatsby plugin](https://github.com/BuilderIO/builder/tree/master/packages/gatsby)       | Plugin for sourcing content from Builder.io to Gatsby                                                                                       |\n| [Minimal starter](https://github.com/BuilderIO/builder/tree/master/examples/gatsby-minimal-starter) | Example of using Builder.io to build landing pages in Gatsby                                                                                |\n| [Headless Shopify Store](https://github.com/BuilderIO/gatsby-builder-shopify)                       | Starter kit for building headless shopify storefronts with GatsbyJS and Builder.io [Demo](https://builder-shopify-starter.firebaseapp.com/) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fgatsby-starter-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuilderio%2Fgatsby-starter-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuilderio%2Fgatsby-starter-builder/lists"}