JSON Schema Form Playground

ProNew

A split editor: type or paste a JSON Schema on one side and see the generated form on the other, with parse errors explained and the last good form kept while you type. Use this when authors define forms as schemas and need to see them as they write.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

Guide and examples

When to use it

Developers or admins author form definitions (schema-driven config, internal tools) and need instant feedback.

Do not use it when: For end users building forms visually, build a drag-and-drop builder; a schema text area is a developer tool.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string`	The starting schema text.

parseSchema(text) is exported and returns { schema } or { error }.

Accessibility

The editor is a labelled textarea; its validity is a linked status line that becomes an alert with the parser's message, and the textarea gets aria-invalid.
While the text is invalid the previous good form stays visible, so the preview never flashes empty during typing; the message says so.
The preview is a labelled region, so people can jump to it with landmark navigation.

Testing

The pattern ships with a Testing Library test (json-schema-playground.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Developers or admins author form definitions (schema-driven config, internal tools) and need instant feedback.

Do not use it when: For end users building forms visually, build a drag-and-drop builder; a schema text area is a developer tool.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string`	The starting schema text.

parseSchema(text) is exported and returns { schema } or { error }.

Accessibility

The editor is a labelled textarea; its validity is a linked status line that becomes an alert with the parser's message, and the textarea gets aria-invalid.
While the text is invalid the previous good form stays visible, so the preview never flashes empty during typing; the message says so.
The preview is a labelled region, so people can jump to it with landmark navigation.

Testing

The pattern ships with a Testing Library test (json-schema-playground.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.