Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Visual editing /

Page editor

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

Visual Editor page editor.

# Enable the page editor

The page editor is enabled when Visual Editor 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

Visual Editor 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.

// stackbit.config.ts
import { defineStackbitConfig } from "@stackbit/types";

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

# Enable page editing manually

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.

// stackbit.config.ts
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[];
  }
});

# Highlight active elements

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