Basic Page Editing with Contentful

Unlock basic page editing with just a few lines of configuration.

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.

Sitemap Navigator without Pages
Sitemap Navigator without Pages

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 config file and add a models property with configuration for the page model.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • +
  • +
  • +
  • 18
import { ContentfulContentSource } from '@stackbit/cms-contentful'

export default {
  stackbitVersion: '~0.6.0',
  ssgName: 'nextjs',
  nodeVersion: '16',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID,
      environment: process.env.CONTENTFUL_ENVIRONMENT,
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
    }),
  ],
  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 Navigator with Home Page
Sitemap Navigator 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.
Update Hero Heading
Update Hero Heading

Notice that as you make content change:

  1. Changes are synced with Contentful.
  2. Entries in Contentful are not published, but saved in an updated state.
Updated Content in Contentful
Updated Content in Contentful

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.

Add a Section

Next, add a new section to the home page.

00:0000:00
Add New Hero Section

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

New Entries in Contentful
New Entries in Contentful

Add a Page

Let's also try adding a new page.

Add 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 in Contentful
New Page in Contentful

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

Sitemap Navigator with About Page
Sitemap Navigator 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.

00:0000:00
Add Existing Sections to Page

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.