Skip to main content

Preview results live

Use the built-in playground to edit and preview your specs (including optional uiSchema) before rolling them out. It gives you instant visual feedback for quick sanity checks.

ℹ️ Note: The playground is available for service and scope specs only. Catalog specs don’t have a playground yet.

Test it out using the playground​

To open the playground, just navigate to Platform settings > Scopes (or Services) > Specifications.

  1. Click + New specification or open an existing one.
  2. Add or update your JSON Schema and UI schema.
  3. Preview the form on the right to confirm layout, labels, and markdown render.
  4. Save when you’re happy. (We recommend testing in a non-prod scope or a draft spec first.)

Minimal example​

The playground lets you quickly test how JSON Schema and UI Schema.

Step 1: Add a JSON Schema​

In the JSON Schema

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 120
    },
    "status": {
      "type": "string",
      "enum": ["active", "inactive", "pending"]
    },
    "newsletter": {
      "type": "boolean"
    }
  },
  "required": ["name", "email"]
}

You should now see the default form rendered on the right side of the screen based only on JSON Schema.

UI schema 1

Step 2: Add a UI Schema​

Switch to the UI Schema tab and paste this layout:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Label",
      "text": "## Profile",
      "options": { "format": "markdown" }
    },
    {
      "type": "Control",
      "scope": "#/properties/name",
      "label": "Full name"
    },
    {
      "type": "Control",
      "scope": "#/properties/email",
      "label": "Email"
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        { "type": "Control", "scope": "#/properties/age" },
        {
          "type": "Control",
          "scope": "#/properties/newsletter",
          "options": { "toggle": true }
        }
      ]
    },
    {
      "type": "Control",
      "scope": "#/properties/status",
      "options": {
        "format": "chip",
        "mapping": {
          "active":   { "label": "Active",   "color": "success", "icon": "ic:outline-check" },
          "inactive": { "label": "Inactive", "variant": "outlined" },
          "pending":  { "label": "Pending",  "color": "warning" }
        }
      }
    }
  ]
}

Now the preview updates instantly with a custom layout, including headers, markdown labels, toggle switches, and chip formatting.

UI schema 2

What's next?​

Now that you tried it out and got a hand on how the preview works, check the reference pages for special json schemas keys and UI attributes to customize your own forms.