In this lesson, we'll enable basic content editing with two-way syncing using Stackbit's visual editor.

This is a lesson within the Next.js + Contentful tutorial. Following it requires completing all previous steps.

Given that we're working with a headless CMS, this also assumes you understand how structure content works for modern websites. Learn more about how Stackbit works with structured content.

Configuring Contentful Pages

Stackbit's only real requirement is that content must be structured and separated from code.

Because we're using a headless CMS (Contentful), your content is inherently structured and decoupled from the example project code. We only need a small amount of configuration to unlock page editing capabilities with Stackbit.

Understanding Page Models

Stackbit considers pages to be a unique type of model that represents a single webpage (or URL) within your site. But with Contentful, every piece of content is of a generic entry type, structured from and governed by some content type.

Therefore, Stackbit cannot infer which models are pages, and does not know how to render the sitemap or provide basic page editing capabilities without further configuration.

Empty sitemap

Specifying Page Models

Fortunately, all it takes to tell Stackbit which Contentful content types represent pages is a few lines of configuration. Learn more about model configuration.

Open your stackbit.yaml file and add a models property with configuration for the page model.

# stackbit.yaml

# ...

stackbitVersion: ~0.5.0
ssgName: nextjs
nodeVersion: '16'
cmsName: contentful
modelsSource:
  type: contentful
# Add model config for pages
models:
  page:
    type: page
    urlPath: '/{slug}'

Now if you go back to the Stackbit application in your browser, you should see the sitemap populated with the Home Page entry.

Sitemap with home page

Editing Content Using the Page Editor

That's all we need to be able to start editing content directly with Stackbit!

Update Content

Once Stackbit understand which content types are pages, you'll have the ability to drill into any page and make edits that sync with Contentful.

Try it!

  1. Open the page editor panel.
  2. Drill down into the first section.
  3. Change the heading.
  4. Check the content in Contentful.

Edit hero heading

Notice that as you make content change:

  • Changes are synced with Contentful.
  • Entries in Contentful are not published, but saved in an updated state.

Automatic Content Reload

Stackbit also listens for content changes in the content source. If you change content from Contentful directly, notice that the preview in the visual editor reflects those changes. Learn more about automatic content reload.

Edit hero heading

Add a Section

Next, add a new section to the home page.

Then look at Contentful and notice that you have a new hero entry with your new content.

New contentful entries

Add a Page

Let's also try adding a new page.

Add new page

The page is blank here because we haven't added any sections to it. An upcoming lesson will cover presets, which can make this process much smoother for content editors.

You now have a new entry in Contentful!

New page entry

And you can also see the new page in the sitemap.

Sitemap with about page

Working with References

Because Contentful doesn't have the option to embed rich objects within entries, every embedded object you see in Stackbit is a linked entry in Contentful. When added an embedded object in a page, Stackbit provides the option to create a new entry in Contentful or link to an existing one.

For example, you could build an entirely new page using existing entries from the home page.

New page with references

⚠️ It's important to understand the risk of working with existing content. This example puts you in a scenario in which Home and About are two different pages, but their content comes from the same entries. Changing an entry used in one page would change the entry's content on the other page as well.

Detailed Content-Editing Data Flow

There's a lot going on in the Stackbit dev server and API to make all this functionality work with minimal configuration. You're welcome to pause and dig into the details on how Stackbit updates and retrieves content.

Otherwise, let's take content editing to the next level by introducing inline editing.