Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Visual editing /

Field controls

Control how form fields are displayed for content editors.

Thumbnail field from model extension.

Visual Editor infers field editor controls as best as possible. Fields can then be further customized through model extensions.

# Automatic control inference

Every content source supports some limited set of field types for their editing interface.

Visual Editor offers a superset of every officially-supported content source. There is a default control type that can be inferred based on the defined schema within the source.

Mappings from content source fields to Visual Editor controls are unique to each content source and derived from the content source module.

# Customize control types

Field controls can be customized by extending models through the modelExtensions property, or controlled directly if using Git content source.

For example, a field in a content source that is a string, chosen from a limited set of options. Visual Editor will likely render this as an enum field with a dropdown control type.

# Example: thumbnail options

Here's a simplified example that results in the field controls shown at the top of this document. A grid model has an arrangement field being extended to use thumbnail images rather than a dropdown.

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

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  modelExtensions: [
    {
      name: "grid",
      fields: [
        {
          name: "arrangement",
          controlType: "thumbnails",
          options: [
            {
              label: "Two column grid",
              value: "two-col-grid",
              thumbnail:
                "https://assets.stackbit.com/components/images/default/two-col-grid.png"
            },
            {
              label: "Three column grid",
              value: "three-col-grid",
              thumbnail:
                "https://assets.stackbit.com/components/images/default/three-col-grid.png"
            }
            // ...
          ]
        }
      ]
    }
  ]
});