An editor interface represents the look and feel of the Entry Editor in the Web App. They are tightly coupled to a content type and define which widgets are rendered in both content fields and the sidebar.

For example, the following content type describes a typical blog post data structure. It has a title, a body, and a category that can be either "General", "iOS" or "Android".

{
  "fields": [
    { "id": "title", "name": "Title", "type": "Symbol" },
    { "id": "body", "name": "Body", "type": "Text" },
    {
      "id": "category", "name": "Category", "type": "Symbol",
      "validations": [{ "in": ["General", "iOS", "Android"] }]
    }
  ]
}

An editor interface could, for example, define that the title field should be rendered as an input field (the widget ID is singleLine and it comes from a builtin widget the Web App provides). It could then define that the body should be a normal text area (the widget id is multipleLine), and that the category should be rendered as a dropdown field (the widget id is dropdown).

The editor interface would look like this:

{
  "controls": [
    {
      "fieldId": "title",
      "widgetNamespace": "builtin",
      "widgetId": "singleLine"
    },
    {
      "fieldId": "body",
      "widgetNamespace": "builtin",
      "widgetId": "multipleLine"
    },
    {
      "fieldId": "category",
      "widgetNamespace": "builtin",
      "widgetId": "dropdown"
    }
  ]
}

There are sets of compatible builtin widgets per content type field type:

Widget ID	Applicable field types	Description
assetLinkEditor	Asset	Search, attach, and preview an asset.
assetLinksEditor	Asset (array)	Search, attach, reorder, and preview multiple assets.
assetGalleryEditor	Asset (array)	Search, attach, reorder, and preview multiple assets in a gallery layout
boolean	Boolean	Radio buttons with customizable labels.
datePicker	Date	Select date, time, and timezon.
entryLinkEditor	Entry	Search and attach another entry.
entryLinksEditor	Entry (array)	Search and attach multiple entries.
entryCardEditor	Entry	Search, attach, and preview another entry.
entryCardsEditor	Entry (array)	Search, attach and preview multiple entries.
numberEditor	Integer, Number	A simple input for numbers.
rating	Integer, Number	Uses stars to select a number.
locationEditor	Location	A map to select or find coordinates from an address.
objectEditor	Object	A code editor for JSON
urlEditor	Symbol	A text input that also shows a preview of the given URL.
slugEditor	Symbol	Automatically generates a slug and validates its uniqueness across entries.
listInput	Symbol (array)	Text input that splits values on , and stores them as an array.
checkbox	Symbol (array)	A group of checkboxes. One for each value from the in validation on the content type field
tagEditor	Symbol (array)	A text input to add a string to the list. Shows the items as tags and allows to remove them.
multipleLine	Text	A simple <textarea> input
markdown	Text	A full-fledged markdown editor
singleLine	Text, Symbol	A simple text input field
dropdown	Text, Symbol, Integer, Number	A <input type="select"> element. It uses the values from an in validation on the content type field as options.
radio	Text, Symbol, Integer, Number	A group of radio buttons. One for each value from the in validation on the content type field
richTextEditor	RichText	A default rich text editor

Settings

You can pass custom settings to a control that change the behavior or presentation of a widget.

The entry for a field of type Boolean, for example, would look like this.

{
  "fieldId": "isFeatured",
  "widgetNamespace": "builtin",
  "widgetId": "boolean",
  "settings": {
    "helpText": "Feature this post on the homepage?",
    "trueLabel": "yes",
    "falseLabel": "no",
  }
}

If present, the settings object of a control must be an object. All widgets accept the helpText setting and use it to render extra information with the widget. Other settings are widget specific.

Widget ID	Setting name	Description
boolean	trueLabel	Shows this text next to the radio button that sets this value to true. Defaults to “Yes”.
boolean	falseLabel	Shows this text next to the radio button that sets this value to false. Defaults to “No”.
rating	stars	Number of stars to select from. Defaults to 5.
datePicker	format	One of “dateonly”, “time”, “timeZ” (default). Specifies whether to show the clock and/or timezone inputs.
datePicker	ampm	Specifies which type of clock to use. Must be one of the stringss “12” or “24” (default).

Custom widgets

Editor interfaces can be used to assign custom widgets to a field, sidebar or the entire entry editor. Currently there are two types of custom widgets: Apps and UI Extension. To do so just use one of app or extension namespaces and provide the widget ID:

{
  "controls": [
    {
      "fieldId": "title",
      "widgetNamespace": "extension",
      "widgetId": "myextension",
      "settings": {
        "devMode": false
      }
    },
    {
      "fieldId": "image",
      "widgetNamespace": "app",
      "widgetId": "myapp"
    }
  ]
}

Sidebar

By default the Web App renders a set of predefined widgets (like "Status" or "Preview") in the entry editor sidebar. Using the editor interface, it's possible to alter the default sidebar by hiding, rearranging built-in widgets and/or adding custom widgets.

{
  "sidebar": [
    {
      "widgetNamespace": "builtin-sidebar",
      "widgetId": "content-preview-widget"
    },
    {
      "widgetNamespace": "app",
      "widgetId": "myapp"
    }
  ]
}

Sidebar items are rendered in exactly the same order as they are defined in the sidebar property. The sidebar above will render two widgets, the first being the builtin preview widget and the other one using an app.

Builtin sidebar widgets (widgets in the builtin-sidebar namespace) have the following IDs:

• Status (publish button): publication-widget
• Entry-level versioning: versions-widget
• Content preview: content-preview-widget
• Translations (locale selection): translation-widget
• Incoming links: incoming-links-widget
• Online editing users: users-widget

Custom editor

It is possible to add an editor or even completely replace the default Entry Editor provided by the Web App with a custom editor implemented as an App or a UI Extension.

Once you've built your custom editor, you can use it by setting an optional editors property with your custom editor. This will render both the custom editor and the default editor. You can also disable the default editor, by including it in the list and marking it as disabled.

{
  "editors": [
    {
      "widgetNamespace": "extension",
      "widgetId": "mycustomeditor",
      "settings": {
        "devMode": true
      }
    },{
      "widgetNamespace": "editor-builtin",
      "widgetId": "default-editor",
      "disabled": true
    }
  ]
}

Similarly to field and sidebar configuration, instance parameters for the UI Extension used can be passed as settings.