Dial Playground

Experiment with Dial annotations and see the generated schemas and UI controls in real-time.

Initializing WebContainer and installing dial-cli...

First load may take 15-30 seconds. This only happens once per session.

Choose an example:

Generated Schema (from real dial-cli)

{
  "schemas": [],
  "groups": []
}

Booting WebContainer...

Real CLI Execution

This playground uses WebContainer to run the actual dial-cli in your browser. The schema generation is identical to running the CLI locally.

Edit the Code

Select an example or write your own TypeScript interface with @dial annotations. Changes are automatically processed after 1 second.

Interact with Controls

The generated controls on the right are fully functional. Try changing values to see real-time updates.