Page Editor | Netlify Create Docs

The page editor provides the ability to edit fields based on the context of actions taken within the sitemaps navigator and preview.

Enabling the Page Editor#

The page editor is enabled when Netlify Create knows that a document is associated with a particular URL path in the website. In other words, the sitemap must be populated, with documents attached to the proper URL paths.

Automatic Document Resolution#

Netlify Create automatically builds the sitemap by combining the urlPath properties of all documents of type page, attaching each document to each URL path.

These properties get set on model definitions, which often requires using modelExtensions for API-based content sources.

import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    // ...
  ],
  modelExtensions: [{ name: 'page', type: 'page', urlPath: '/{slug}' }],
})

Manually Enabling Page Editing#

For cases where the there isn't a direct one-to-one mapping between document objects and URL paths, pages can be enabled by setting the document property when manually building the siteMap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import {
  defineStackbitConfig,
  getLocalizedFieldForLocale,
  SiteMapEntry,
} from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  siteMap: ({ documents, models }) => {
    const pageModels = models
      .filter((m) => m.type === 'page')
      .map((m) => m.name)
    return documents
      .filter((d) => pageModels.includes(d.modelName))
      .map((document) => {
        // ...
        return {
          document,
          // ...
        }
      })
      .filter(Boolean) as SiteMapEntry[]
  },
})

Highlighting Active Elements#

Netlify Create highlights elements in the preview that are actively focused in the page editor. Enabling this requires annotating pages and components.