This guide covers the high-level process of adding Stackbit to an existing project that uses a headless CMS as its content source.

If you don't have an existing project you can follow this tutorial to get started. For guides to specific content sources, see our integration guides.

Adding Stackbit's visual editing capabilities to a site using a headless CMS as its content source has a few requirements:

  1. A Paid Plan: Although you can still work locally to try it out. Our guides follow this process.
  2. Draft Content: Stackbit runs your development and enables you to see changes before deploying to production. This means that, when in development mode, your site must display draft content from the CMS.
  3. Stackbit Configuration: Settings in the root of your project that tell Stackbit where to find your content.
  4. Annotated Components: Data attributes that tell Stackbit about the relationship from the structured data in your CMS to content within HTML elements on the screen.

Stackbit Configuration

A stackbit.yaml configuration file must exist and be properly configured for your project to work with Stackbit.

Here's an example of a stackbit.yaml file for a project using Next.js with Contentful that has a single Page model:

stackbitVersion: ~0.5.0
ssgName: nextjs
cmsName: contentful
nodeVersion: '14'
buildCommand: npm run build
publishDir: .next
modelsSource:
  type: contentful
models:
  page:
    type: page
    urlPath: '/{slug}'

See the full reference to help configure for your project.

Annotated Components

Annotations are how Stackbit knows how to highlight elements on the page and where to retrieve/store content for those elements. Annotations create a mapping between your content source and the content displayed by your site.

Head over to the API reference to understand the full capabilities of annotations.

Integrating with Any Content Sources

We can support any API-based content source. Contact us to learn more.