Using the schema editor

From the schema editor, you can manage schemas for Frontend components, data sources, dynamic pages, page folders, and project settings.

Access the schema editor

From the Components, Data sources, Dynamic pages, and Schemas areas, you can access the schema editor by:

  • Clicking Upload schema and uploading a schema JSON file.

  • Clicking Create schema.

  • Dragging one or more schema JSON files to the page. If you drag multiple files, the schema editor displays the schemas in sequence.

  • Selecting a schema and clicking Edit schema.

    When editing a schema, make sure it is backward and forward compatible. Otherwise, it can damage your website.

The Components area with the Upload schema and Create schema buttons

Schema editor interface

The schema editor interface consists of three parts:

The schema editor with a schema in the editing pane and its preview displayed in the preview pane

The menu bar displays the following commands:

  • Back arrow: closes the schema editor and navigates to the previous page. If you didn't save your changes, a confirmation dialog appears before leaving the schema editor.
  • Undo: reverts your last change.
  • Redo: reverts your last undo action.
  • Save as draft: saves the schema as a draft and closes the schema editor.
  • Publish and download JSON: publishes the schema, closes the schema editor, and downloads the schema JSON file on your computer.
  • Help icon: opens the Help section in the preview and information pane.

Editing pane

The editing pane displays the following:

  • Number of lines: the number of lines in your schema code.
  • Copy: copies the schema in JSON format.
  • Validate: displayed for all schemas except Frontend component schemas. Validates the code of your schema and displays the validation result in the preview and information pane.
  • Validate and preview: displayed for Frontend component schemas. Validates the code of your schema, displays the validation outcome, and displays the Frontend component preview in the preview and information pane if the schema is valid.
  • Schema-specific field (for example, tasticType): for further information, open the Help section by clicking the help icon in the menu bar.
  • Code editor: where you can edit the code of your schema.

Preview and information pane

The preview and information pane displays the following:

  • Success, error, and information messages: displayed when you click Validate or Validate and preview in the editing pane.
  • Preview: displayed for Frontend component schemas. The preview of the Frontend component settings as they will appear in the page builder.
  • Help section: displays information on how to create and edit a schema.