Using the schema builder

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

Access the schema builder

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, then 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 builder interface

The schema builder 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 builder, and then navigates you to the previous page. If you didn't save your changes, then a confirmation dialog appears before you leave the schema builder.
  • Save as draft: saves the schema as a draft, and then closes the schema builder. This will only be displayed for unpublished schemas.
  • Publish: publishes the schema, and then closes the schema builder. For additional options, click the drop-down arrow and then select any one of the following options:
    • Publish and duplicate: publishes the schema and creates a duplicate schema.
    • Publish and download: publishes the schema and downloads a JSON file.
  • Help icon: opens the Help pane.
  • Version History icon: opens the Version history pane. This will be displayed only after you have saved or published a schema.

Editing pane

The editing pane displays the following:

  • Name of editor type: either Code editor or Visual editor depending on your selection.
  • Switch editor type icon: changes the view to either Visual editor or Code editor.

  • Schema-specific field (for example, tasticType): for further information, open the Help section by clicking the help icon in the menu bar.
  • Editor: you can edit the options in your schema.

    • Code editor: add your JSON code here. Use the Help section for information on how to write your schema or see more details on the Schemas page.
    • Visual editor: use the input boxes to enter your options. To add a new section, click Add object. To add a new field, click Add field, select a field type, and then add your inputs.
    The available field types in the visual editor

Preview and information pane

The preview and information pane displays the following items:

  • 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.
  • 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.

Version history pane

The version history pane displays previously saved versions of the schema from the last 90 days.
To restore a version, select it from the list and click Restore version.
When the version history pane is open, the schema builder is locked and you cannot make any changes to the schema.

Before restoring a version of a schema, make sure it is backward and forward compatible. Otherwise, it can damage your website.

The schema editor with the version history pane expanded