Using the schema editor

You'll find the schema editor in any area where you can create or edit schemas. In this article, we'll show you the general layout of the editor and how to use it in each area of the studio.

Schemas are only available to edit in their highest available environment. So, if your schema is available in production, you'll only be able to edit it in production.

Component schema

To open the component schema editor, click Components on the dashboard or the left-hand navigation. Then, click Create schema. You can also drag in a schema file or click the Upload schema button.

b17963a Click create schema to create a component

The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON. You need to input the required fields (in this case, tasticType). This must be the same as specified when registering the React component in tastics/index.tsx.

7354764 Component schema editor layout

Once you've finished writing your JSON, click the Validate and preview button. This will make sure you've entered a valid schema. It checks for all required properties, required fields for each type, correct syntax, and values match types. The preview of how it'll look in the page builder will appear on the right if it's valid.

fe73abe Validated and preview of schema

The preview can't save the information you enter in it. It's for visualization purposes only. If you want to set default information, you need to do this in the JSON.

If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.

e5f94d9 Schema with error

Click the help icon on the right of your screen to open the help section. Use the X to close it. You can copy the code examples from the help and paste them into your JSON.

4166eb8 Schema help

You can publish your schema and download the JSON file when you've finished.

Click the back arrow on the top left of the screen to exit the editor without saving your changes.

To open an existing schema, click the name of the component and click Edit schema.

7dee216 Edit schema of components

You can edit an existing schema, but be careful. A schema must always be backward and forward compatible, or it can break your site.

Click the copy icon to copy all the JSON code to your clipboard. Then, you can paste it into a new schema.

Data sources schema

To open the data source schema editor, click Developer on the dashboard or the left-hand navigation and then click Data sources. You can also drag in a schema file or click the Upload schema button.

fb8d4c3 Create data source schema

The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON. You need to input the required fields (in this case, customDataSourceType). The customDataSouceType must be the same as the data source extension key in backend/index.ts.

c3922cf Data source schema editor

Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.

d01a60f Validated data source schema

If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.

30b55f1 Errors in data source schema

Click the help icon on the right of your screen to open the help section. Use the X to close it.

6ebc866 Data source schema help

Click the back arrow on the top left of the screen to exit the editor without saving your changes.

To open an existing schema, click the name of the component and click Edit schema.

58f9195 Edit data source schema

You can edit an existing schema, but be careful. A schema must always be backward and forward compatible, or it can break your site.

Dynamic page schema

To open the dynamic page schema editor, click Developer on the dashboard or the left-hand navigation and then click Dynamic pages. You can also drag in a schema file or click the Upload schema button.

9f06c26 Click create schema to create a new dynamic page schema

The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON. You need to input the required fields (in this case, dynamicPageType). The fields provided in the editor are the only fields you can add in a dynamic page schema.

86ca16b Dynamic page schema example

Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.

b6d3d60 Validated dynamic page schema

If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.

06dfd37 Errors in dynamic page schema

Click the help icon on the right of your screen to open the help section. Use the X to close it.

e72542d Dynamic page schema help

To open an existing schema, click the name of the component and click Edit schema.

5d023a0 Edit dynamic page schema

You can edit an existing schema, but be careful. A schema must always be backward and forward compatible, or it can break your site.

Project settings schema

To open the project settings schema editor, click Developer on the dashboard or the left-hand navigation and then click Schemas. Then click Project schema. You can also add a schema file. Click the Upload schema button to do this.

c2d803a Click project settings to open the right hand drawer

Then click Edit schema.

8e914cd Click edit schema to edit project settings schema

The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON.

b37f374 Empty project settings

If you have a new project, this will be empty to start with. You can input any settings here.

381613a New project setting schema

Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.

970ef04 Validated schema

If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.

2246c4d Error in schema

Click the help icon on the right of your screen to open the help section. Use the X to close it. You can copy the code examples from the help and paste them into your JSON.

54f9e4e Project schema help settings

Click the back arrow on the top left of the screen to exit the editor without saving your changes.

Page folder schema

To open the project settings schema editor, click Developer on the dashboard or the left-hand navigation and then click Schemas. Then click Page folder schema. You can also add a schema file. Click the Upload schema button to do this.

e4095eb Click page folder schema to open right hand drawer

Then click Edit schema.

531e0f3 Click edit schema to edit page folder schema

The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON.

You can input any settings here.

1e0aecd Page folder schema

Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.

f7f64da Validated page folder schema

If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.

a41450b Error in page folder schema

Click the help icon on the right of your screen to open the help section. Use the X to close it. You can copy the code examples from the help and paste them into your JSON.

9cd112d Page folder schema help

Click the back arrow on the top left of the screen to exit the editor without saving your changes.

Saving a schema as draft

While creating a new schema, you'll see a Save as draft button on the top right that you can click to save your schema as a draft and resume your work later.

3519dad save schema as draft

You'll find all your schema drafts under the Drafts section of a schema list, as shown below.

0a68af4 resume editing a schema draft

You can select the schema to continue editing it and publish your changes once you're done editing.