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. Therefore, 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 click Upload schema, or drag one or multiple schema files to the page.
The JSON editor opens on the left. If you clicked Create schema, the editor displays a default schema. If you uploaded one schema file, the editor displays the schema from the file. If you uploaded multiple schema files, the editor displays the schema from the first file.
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
.
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.
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.
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.
Click Publish and download JSON when you have finished editing the schema. If you uploaded multiple schema files, the next schema will be displayed in the editor so that you can edit and validate it.
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.
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.
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
.
Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.
If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.
Click the help icon on the right of your screen to open the help section. Use the X to close it.
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.
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.
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.
Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.
If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.
Click the help icon on the right of your screen to open the help section. Use the X to close it.
To open an existing schema, click the name of the component and click Edit 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.
Then click Edit schema.
The JSON editor is on the left. If you upload a schema file, this will be filled with your JSON.
If you have a new project, this will be empty to start with. You can input any settings here.
Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.
If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.
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.
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.
Then click Edit 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.
Click the Validate button to check your schema is valid. If you click Publish, this will also validate your schema.
If it's not a valid schema, errors will appear on the right and let you know what line(s) need fixing.
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.
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.
You'll find all your schema drafts under the Drafts section of a schema list, as shown below.
You can select the schema to continue editing it and publish your changes once you're done editing.