Cosmic Gatsby Starter is a boilerplate for building Gatsby.js sites with content managed through Cosmic JS, a headless CMS. It provides a pre-configured Gatsby app that pulls content from a Cosmic JS Bucket using the official gatsby-source-cosmicjs plugin, so developers can skip the wiring and start with demo content.
What is the Cosmic Gatsby Starter?
The starter is a GitHub repository published by Cosmic JS that combines the Gatsby static site generator with the Cosmic JS headless CMS. It accepts a Cosmic JS Bucket as its content source and produces a static Gatsby site with pages populated from that Bucket's content. The project runs on the Gatsby development server (npm run develop) and builds to a static site. It is maintained by Cosmic JS and is available as an open-source template.
Key Features
- Gatsby + React stack — Built on Gatsby, the React-based static site generator, producing fast, pre-rendered pages.
- Cosmic JS source plugin — Uses the official gatsby-source-cosmicjs plugin to fetch content from a Cosmic JS Bucket during the build.
- Two installation paths — Clone the repo directly and connect to the demo Bucket, or use the Cosmic CLI (npm i -g cosmic-cli) to install demo content into a new or existing Bucket.
- Demo content included — The demo Bucket provides sample content so the site runs immediately after setup.
- Headless CMS integration — Content is managed in the Cosmic JS dashboard, decoupled from the Gatsby front end.
- CLI support — Using
cosmic initandcosmic startautomates bucket creation and local development.
Who is it for?
- Gatsby developers — who want a pre-configured project with CMS integration instead of setting up data fetching from scratch.
- Content teams — who need a headless CMS backend and a static front end, with content editable from the Cosmic dashboard.
- Agencies and freelancers — who build client sites on Gatsby and need a fast starter that already includes sample data and a CMS workflow.
What can you do with the Cosmic Gatsby Starter?
- Scaffold a CMS-backed Gatsby site — Run
cosmic init gatsby-starterto create a new project, install demo content, and connect to your own Bucket. - Prototype with demo content — Clone the repo and run
npm run developto see a working Gatsby site populated from the Cosmic demo Bucket without creating an account. - Customize the content model — Add new object types in your Cosmic Bucket and query them through the Gatsby source plugin.
How does the Cosmic Gatsby Starter work?
The setup offers two flows. In the first, you clone the repository, install dependencies with npm, and run npm run develop; the app connects to the Cosmic JS demo Bucket. In the second, you install the Cosmic CLI, log in with cosmic login, then run cosmic init gatsby-starter to download the starter and install example content into a new or existing Bucket, followed by cosmic start to run it locally.
FAQ
Is the Cosmic Gatsby Starter free?
The starter is open source on GitHub and can be cloned or downloaded via the Cosmic CLI at no cost. Cosmic JS offers its own pricing for hosted Buckets, but the template code itself is free to use.
What is the Cosmic JS Source Plugin for Gatsby?
It is the official plugin that connects a Gatsby site to a Cosmic JS Bucket, allowing content to be pulled in as Gatsby nodes. The starter uses this plugin (gatsby-source-cosmicjs) to make Bucket content available to the site's pages.
Do I need a Cosmic JS account to use the starter?
No. Option 1 connects to the public demo Bucket and works immediately after npm install and npm run develop. Option 2 requires a Cosmic JS account because the CLI installs content into your own Bucket.
What tech stack does this starter use?
It uses Gatsby (built on React) for static site generation and Cosmic JS as the headless CMS backend. The content is stored in a Cosmic Bucket and delivered to the Gatsby build via the official source plugin.
