Stackbit is a composable visual editor that supports multiple content sources and site frameworks.

Visual Editing with Stackbit

Contentlayer can be used in sites that are Stackbit-enabled to ease the process for developers working with content in their components and pages.

Contentlayer provides a method for transforming Stackbit configuration into Contentlayer configuration, so you only have to define the shape of your content in one place.

How it Works

With the appropriate packages installed, the process works like this:

  1. Define the shape of your documents using Stackbit's models property.
  2. Import Stackbit config object into the Contentlayer configuration file.
  3. Extend any necessary properties to support your code.
  4. Configure the Contentlayer source.

See below for an example, and also view the API reference for specific usage details.

Example Project

If you'd like to see this in process, check out this example project, which integrates Stackbit and Contentlayer in a Next.js site.

The README file has setup information, but we recommend reading through the tutorial below to understand how the pieces fit together.

Stackbit Guides

The following docs will get you started integrating Stackbit and Contentlayer into your Next.js project.


Stackbit + Contentlayer Tutorial

Learn how to use Stackbit and Contentlayer to add visual editing to a Next.js application.

Stackbit Configuration

API reference for transforming a Stackbit configuration object into Contentlayer config for source-files.

Stackbit Development Server

Hook the Stackbit development server into Next.js and Contentlayer.


Was this article helpful to you?
Provide feedback

Last edited on May 24, 2023.
Edit this page