Gatsby Preview
UI ExtensionDeveloped by Contentful

Gatsby Cloud

Gatsby is an open-source, modern website framework based on React to create and deploy websites or web apps with ease. This UI Extension connects to Gatsby Cloud which lets you see updates to your Gatsby site as soon as you change content in Contentful. This makes it easy for content creators to see changes they make to the website before going live.

Note: Gatsby Cloud is still in beta, please be mindful when using this extension.

Demo of the extension


The extension has the following features:

  • monitor changes on content as you type
  • real time site updates (de-bounced by 1000 ms)

The extension has the following spec:

  • it is a sidebar extension used in a custom sidebar
  • uses the Contentful design system Forma 36
  • installation parameter to set global projectId
  • site parameters to
    • set an optional slug fragment for each content type
    • toggle auto-update when typing

Screenshot of the extension


In order to use this extension, you need:

  • a Gatbsy Cloud setup to use this extension
  • a space and the Contentful CLI installed


After cloning, install the dependencies

npm install

To bundle the extension

npm run build

To host the extension for development on http://localhost:1234

npm run start

To install the extension:

contentful extension update --force --installation-parameters '{"projectId": "yourGatsbyPreviewId"}'
Featured, Editorial, Deployment

UI Extensions always act on behalf of the logged in user and have the same permissions.

This UI Extension can only be installed by space admins. It will be installed in the most recently used space.