Jotl
English · 简体中文
Write JSON Schema in Jotl with checks as you type, and see the compiled schema, TypeScript declarations and form update live.
Jotl is a compact language that compiles to JSON Schema 2020-12. This extension is for people who maintain form or configuration schemas and are tired of hand-editing nested JSON. You write one line per field, the editor flags mistakes while you type, and a preview panel shows the exact schema, the TypeScript declarations and the form that @jotl/form renders from them, so you never switch to another tool to check the result.
See what one file produces
Five lines of Jotl describe a profile with a required name, an optional email and an age range:
Profile: {
name(Name): string[minLength: 1]
email?: email
age: integer[minimum: 0, maximum: 150]
}
Jotl: Open Preview shows the compiled JSON Schema in the first tab, these TypeScript declarations in the second, and a form with a required Name field, an email field and an age field limited to 0 to 150 in the third:
export interface Profile {
/**
* @title Name
* @minLength 1
*/
name: string;
/**
* @format email
*/
email?: string;
/**
* @asType integer
* @minimum 0
* @maximum 150
*/
age: number;
}
The Form tab checks values as you type, using the same rules as the schema:
Get a live preview in three steps
You need VS Code 1.101 or later; the Jotl language server is bundled, so nothing else is installed.
Install the extension:
code --install-extension heavensky.vscode-jotl
Save the example above as profile.jotl and open it:
code profile.jotl
Click the preview button in the editor title bar, or run Jotl: Open Preview from the Command Palette. The panel opens beside the editor and follows your edits.
What you get
- Mistakes show up while you type. Diagnostics come with quick fixes, and completion covers widget names, metadata keys,
widget values, condition op values and the <root/> / <default/> markers.
- See the output before you ship it: the preview has JSON Schema, TS and Form tabs, and the first two list their own compile and conversion diagnostics. The form is for previewing only and never writes back to the file; the panel follows the light, dark or high-contrast theme.
- Understand a field without leaving the editor: hover shows its description and the compiled snippet, and Go to Definition, Find All References and the outline work on top-level types.
- Use your project's own widgets: register them in a
jotl.config.json that the jotl command line reads too, and optionally load their React modules into the preview form. See Register project widgets and Load widget modules in the preview.
- Edit
x-ui in existing JSON Schema files: *.schema.json files get completion and validation for x-ui definitions.
Know the limits
Two current limits:
x-ui validation in *.schema.json stops working when the file has a root $schema, because VS Code then loads only the schema at that address and ignores schemas associated by file name. Remove the root $schema while you edit x-ui and add it back afterwards (schemas generated by Jotl always include it), or edit the .jotl source instead.- The extension is an editor. To compile or check files in scripts and CI, use the
jotl command line; to edit and preview Jotl in a browser, use the playground.
The extension UI, the preview form and the language server's messages follow the VS Code display language: Simplified Chinese for Chinese display languages, English for all others.
Read more
License
MIT
