Example of Gatsby source plugin for Mozaik
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



Mozaik & Gatsby example

Live demo: https://serene-johnson-0beba2.netlify.com


git clone https://github.com/mozaikio/mozaik-gatsby-example.git && cd mozaik-gatsby-example yarn or npm i


yarn develop or npm run develop

Project setup

Content type schema

This example is built on a project using the Sample Blog template.

API access

After creating a project on Mozaik, you can find your API endpoint on the Project settings page. You have to create an access token with read permission to be able to query the published documents. Although in this example the api endpoint url and the access token is hard-coded in the gatsby-config.js you shouldn't commit this information but get it from environment variables.

Connecting Gatsby to Mozaik

The project uses gatsby-source-mozaik plugin. You have to define your query to get all required documents and fields in Gatsby.

Generating pages programmatically

As it would be quite tedious work to create every page for each post, we implemented automatic page generation as well. You can check the source in the gatsby-node.js file and read more about in the Gatsby tutorial

Deploying to Netlify

The built version gets deployed to Netlify every time new code is pushed to the repository. Since both Mozaik and Netlify supports webhooks in their free plan, it is easy to automatically trigger a new build every time a document gets published with Mozaik. (You can also trigger new builds on other events. You can read more about supported events in Mozaik documentation).