# Use 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**](/frontend-studio/using-components-in-the-studio.md), [**Data sources**](/frontend-studio/using-data-sources-in-the-studio.md), [**Dynamic pages**](/frontend-studio/using-dynamic-pages.md), and [**Schemas**](/frontend-studio/using-schemas-in-the-studio.md) areas, you can access the schema editor by:

- Clicking **Upload schema** and uploading a [schema JSON file](/frontend-development/schemas.md).
- 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](https://docs.commercetools.com/frontend-studio/images/components-area-with-create-upload-schema-button.png)

## Schema builder interface

The schema builder interface consists of three parts:

- The [menu bar](/frontend-studio/using-the-schema-builder.md#menu-bar) at the top
- The [editing pane](/frontend-studio/using-the-schema-builder.md#editing-pane) on the left
- The [preview and information pane](/frontend-studio/using-the-schema-builder.md#preview-and-information-pane) on the right

![The schema editor with a schema in the editing pane and its preview displayed in the preview pane](https://docs.commercetools.com/frontend-studio/images/schema-editor-new.png)

### Menu bar

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](/frontend-studio/using-the-schema-builder.md#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](/frontend-development/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](https://docs.commercetools.com/frontend-studio/images/visual-editor-fields.png)

### 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](/frontend-studio/using-the-page-builder.md).
- **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](https://docs.commercetools.com/frontend-studio/images/schema-editor-version-history-pane.png)

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Create anchor points](/frontend-studio/creating-anchor-points.md)
- [Next page: Work with environments](/frontend-studio/using-environments-in-the-studio.md)
- [Search documentation and API specs](/search.md)