Basic Page Editing

Use the page editor panel to make changes to the current previewed page.

The page editor is an upgrade to the traditional CMS editor in that it provides context by showing only the fields related to the page currently being shown in the preview. And it requires only slightly more configuration.

Page Editor Panel
Page Editor Panel

Understanding Model Types

Most content sources do not distinguish between types of models or content types — models are just models.

In contrast, Stackbit has a model type construct, which is necessary to be able to create the contextual editing experience. In fact, there are three types of models within Stackbit: page, data, object.

Learn more about Stackbit model types

Defining Page Models

Page models are those which represent individual URL paths (or pages) on your site. Defining page models is how Stackbit knows when and how to enable the page editor panel.

Because external content sources don't also carry this model-type construct, it is necessary to extend the model definition in the project's configuration.

In most cases, this can be done by specifying a type and urlPath for the model. Here's an example that extends a post model in the CMS, and maps the pages to individual routes under a /blog prefix.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
export default {
  contentSources: [
    // ...
  ],
  models: {
    post: {
      type: 'page',
      urlPath: '/blog/{slug}',
    },
  },
  // ...
}

Sitemap Navigator

The sitemap navigator gets activated once there are page models defined and records for that model. Stackbit uses these records to build up a list of all the pages in your site and display them in tree format, with search feature for easier navigating.

Sitemap Navigator
Sitemap Navigator

Field Extensions

Defining page models is not the only way to extend models from external content sources. While there are many other cases, field controls are another popular use of model extensions.

By default, Stackbit retrieves the schema from every supported content source and does its best to map model fields to the appropriate control type. Stackbit has a number of control types that may not be supported in the content source, but that you can make use of in Stackbit.

Example: Visual Layout

Thumbnail Field from Model Extension
Thumbnail Field from Model Extension

For example, consider a dropdown list of layout options in a CMS. With Stackbit, you can extend this field definition to list the options with thumbnails, rather than a plain text dropdown.

See the full field configuration reference