Forms
v1.0.0Added in 1.4.0
An editor for extraction schemas: named fields with unique keys, field types, JSON types, required flags, nesting and a JSON view.
Each row of the table is a field: Name (the label people read), Unique key, Type (the JSON type it stores, as a badge), a Required switch (a red asterisk marks required names) and Description. The Field type (the control a form shows: text, date, currency, select, address...) is set in Edit details and shown on phone cards. Typing a Name fills the key with its slug (Invoice number gives invoice_number, accents dropped) while the key is empty or still follows the name, marked with a link icon; edit the key and it stays yours. Keys are checked as you type, paste, import and move fields: empty, wrong format, or already used by a sibling (or anywhere, with uniqueKeys="global"), ignoring case and outer spaces. Every field involved is marked, the toolbar counts the problems, and clicking the count, or Enter / Shift+Enter in a marked input, steps through them. Picking a field type adjusts the type (Date stores a string with format date, Multi-select an array of options) and the type list offers what fits first; options typed for a select survive a switch to text and back. Groups, lists of objects and options open under their row from a Configure schema bar, each level a table of its own; the checkbox in the Required header marks a whole level required. Drag the grip on a row's left edge (it shows on hover and focus, always on touch) to reorder or to move a field into or out of a group: a line shows where it lands, in amber when the key already exists there. On touch, long press the grip. From the keyboard, Alt+↑/↓ moves a field, Alt+←/→ (on the grip, selects and the checkbox) moves it out of or into a group, and the ⋯ menu does the same plus Duplicate, Edit details and Delete (a field with children asks first). ⌘Z / ⇧⌘Z (Ctrl+Z / Ctrl+Y) undo and redo inside the builder, Escape in an input puts back what it held. Edit details opens a side panel with the format, placeholder, default value and options. The JSON tab shows the draft 2020-12 schema, highlighted, with Show changes for a diff against the schema it opened with. Import JSON reads a pasted or chosen file and points at the line of an error. Below 560px rows become cards that open the editor in a bottom sheet; menus and selects become bottom sheets on phones.
npx wingo-ui@latest add schema-builderPro item: the CLI needs a Pro account. See plans