Schema Editor
Examples
Table schema
Listen on data change
Remote schema
Refine with UI Schemas
Importing
Properties
Events

Schema Editor

<ol-schema-editor> | OlSchemaEditor

Since 1.1

experimental

Form and table based schema editor.

<ol-schema-editor label="Schema editor" allow-copy schema='
  {
    "properties": {
      "Text": {
        "title": "Text input",
        "type": "string",
        "description": "The help text is from \"description\"."
      },
      "Number": {
        "title": "Number input",
        "type": "number"
      },
      "Date": {
        "title": "Date input",
        "type": "string",
        "format": "date"
      },
      "Time": {
        "title": "Time input",
        "type": "string",
        "format": "time"
      },
      "Checkbox": {
        "title": "Checkbox",
        "type": "boolean",
        "description": "Check me!"
      }
    }
  }
'></ol-schema-editor>

import OlSchemaEditor from '@onlive.site/ui/dist/react/schema-editor';

const App = () => (
  <OlSchemaEditor
    label="Schema editor"
    allow-copy
    schema={{
      "properties": {
        "Text": {
          "title": "Text input",
          "type": "string",
          "description": "The help text is from \"description\"."
        },
        "Number": {
          "title": "Number input",
          "type": "number"
        },
        "Date": {
          "title": "Date input",
          "type": "string",
          "format": "date"
        },
        "Time": {
          "title": "Time input",
          "type": "string",
          "format": "time"
        },
        "Checkbox": {
          "title": "Checkbox",
          "type": "boolean",
          "description": "Check me!"
        }
      }
    }}>
  </OlSchemaEditor>
);

Examples

Table schema

The view-type property can be set to table to show the schema in a table format, passing data as an array of objects.

<ol-schema-editor id="schema-editor-table" view-type='table' label="Table Schema" allow-copy schema='
  {
    "properties": {
      "text": {
        "title": "Text input",
        "type": "string",
        "description": "The help text is from \"description\"."
      },
      "number": {
        "title": "Number input",
        "type": "number",
        "step": 1,
        "min": 1,
        "max": 5,
        "description": "[ui:widget:rating]"
      },
      "date": {
        "title": "Date input",
        "type": "string",
        "format": "date"
      },
      "time": {
        "title": "Time input",
        "type": "string",
        "format": "time"
      },
      "checkbox": {
        "title": "Checkbox",
        "type": "boolean",
        "description": "Check me!"
      },
      "select": {
        "title": "Select",
        "type": "array",
        "uniqueItems": true,
        "items": {
          "type": "string",
          "enum": ["1", "2", "3"]
        },
        "description": "[ui:widget:select][ui:alias:{1:a,2:b,3:c}]Select me!"
      },
      "color": {
        "title": "Color",
        "type": "string",
        "description": "[ui:widget:color]"
      }
    }
  }
'></ol-schema-editor>

<script>
  const tableSchema = document.querySelector('#schema-editor-table');
  tableSchema.data = [
    {
      "text": "John",
      "number": 3,
      "date": "2025-12-08",
      "time": "05:05:05",
      "checkbox": true,
      "select": [1, 2],
      "color": "ffffff"
    },
    {
      "text": "Mark",
      "number": 4,
      "date": "2025-12-09",
      "time": "08:05:05",
      "checkbox": false,
      "select": [2]
    },
    {
      "text": "Jane",
      "number": 5,
      "date": "2025-12-10",
      "time": "07:05:05",
      "checkbox": true,
      "select": [3]
    }
  ];
</script>

Listen on data change

Listen for the ol-data-change event to get the form data each time the form changes.

<ol-schema-editor id="schema-editor-events" schema='
  {
    "properties": {
      "Text": {
        "title": "Text input",
        "type": "string"
      },
      "Number": {
        "title": "Number input",
        "type": "number"
      }
    }
  }
'></ol-schema-editor>

<pre id="data-object"></pre>

<script>
  const schemaEditor = document.querySelector('#schema-editor-events');
  schemaEditor.addEventListener('ol-data-change', (e) => {
    document.querySelector('#data-object').innerText = JSON.stringify(e.detail.data);
  });
</script>

import OlSchemaEditor from '@onlive.site/ui/dist/react/schema-editor';

const App = () => (
  const [data, setData] = useState('{}');
  <OlSchemaEditor
    schema={{
      "properties": {
        "Text": {
          "title": "Text input",
          "type": "string"
        },
        "Number": {
          "title": "Number input",
          "type": "number"
        }
      }
    }}
    @OlDataChange={(e) => setData(JSON.stringify(e.detail.data))}
  >
  </OlSchemaEditor>
  <pre>{data}</pre>
);

Remote schema

Import schema from remote url https://cdn.onlive.site/widget/otv/latest/options-schema.json.

<ol-schema-editor schema-url='https://cdn.onlive.site/widget/otv/latest/options-schema.json'></ol-schema-editor>

Refine with UI Schemas

Use the ui-schema property to define which type of ui elements to use. Valid refine values:

ui:widget: radio | button | textarea | code | color | range | password | rating | select | checkbox | switch
ui:title (Title override): <string>
ui:description (Description override): <string>
ui:help (Help text override): <string>
ui:placeholder: <string>
ui:disabled: <boolean>
ui:readonly: <boolean>
ui:alias: <object> Ex: {myValue:myAliasValue,my_value_two:My Alias Value Two}

You can use refines on attribute description of schema property, example [ui:widget:color] or [ui:alias:{myValue:myAliasValue}]. Multiple hits are supported.

<ol-schema-editor schema='
  {
    "properties": {
      "Color": {
        "title": "Color picker",
        "type": "string",
        "default": "#ff1212",
        "description": "Choose a nice color!"
      },
      "Switch": {
        "title": "<em>Active</em>",
        "type": "boolean",
        "description": "Change <b>active</b> status or get <a target=\"_blank\" href=\"https://example.com/\">Help</a>"
      },
      "Range": {
        "title": "Range",
        "type": "integer",
        "minimum": -50,
        "maximum": 50,
        "multipleOf": 10
      },
      "Rating": {
        "title": "Rating",
        "description": "5 stars, With half star precision.",
        "type": "number",
        "minimum": 0,
        "maximum": 5,
        "multipleOf": 0.5,
        "default": 3
      },
      "Code": {
        "title": "Code",
        "description": "Javascript function.",
        "type": "string",
        "default": "console.log(0)"
      }
    }
  }
' ui-schema='
  {
    "Color": {
      "ui:widget": "color"
    },
    "Switch": {
      "ui:widget": "switch"
    },
    "Range": {
      "ui:widget": "range"
    },
    "Rating": {
      "ui:widget": "rating"
    },
    "Code": {
      "ui:widget": "code",
      "ui:language": "javascript"
    }
  }
'></ol-schema-editor>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/schema-editor/schema-editor.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/schema-editor/schema-editor.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/schema-editor/schema-editor.js';

To import this component as a React component:

import OlSchemaEditor from '@onlive.site/ui/dist/react/schema-editor';

Properties

Name	Description	Type	Default
`viewType` `view-type`	View Type.	`string`	-
`label`	Form label.	`string`	-
`allowCopy` `allow-copy`	Allow copy form data.	`boolean`	-
`schema`	The schema JSON object.	`JSONSchema7`	-
`schemaUrl` `schema-url`	Remote schema url.	`string`	-
`uiSchema` `ui-schema`	The ui schema JSON object.	`UiSchema`	-
`uiSchemaUrl` `ui-schema-url`	Remote ui schema url.	`string`	-
`data`	Initial data.	`unknown`	`{}`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`ol-change`	`onOlChange`	[Deprecated use `ol-data-change` instead] Emitted on data changed.	-
`ol-data-change`	`onOlDataChange`	Emitted on data changed.	-

Learn more about events.