Form Kit
A typed form model, a stateless fill-time renderer and a visual designer. One immutable FormDefinition feeds both the form your users fill in and the editor your authors design with.
Key Capabilities
Typed, portable definitions
A FormDefinition is plain immutable Dart: sealed field types, a layout tree, validations and rules. It is checked when constructed and round-trips through JSON with FormCodec.
Real layout
Groups, repeating groups, 6 or 12 column rows with spans, and free grids with fixed cells. Minimum sizes are enforced, and rows and grids stack on narrow screens.
Rules and formulas
Conditions show, hide, enable and activate validations. Formula fields compute from fields in the same scope, once per repeating-group entry.
Visual designer
FormKitEditor: palette, canvas, inspector, preview and Definition JSON over a controller with undo, redo and refusal reasons.
Core Concepts
- Form definition — Fields, the layout tree, FieldSlot, construction-time checks and JSON
- Field types — Every built-in field type and its options
- Layout — Groups, repeating groups, rows, grids, gaps and minimum sizes
- Validation — Per-field validations, severity and the engine
- Rules and formulas — Conditions, effects and formula scopes
Packages
| Package | Owns |
|---|---|
| vyuh_form_types | Pure Dart. FormDefinition, fields, layout, validations, rules, formulas, FormCodec and the engines. |
| vyuh_form_kit | Flutter. FormView and the field controls. Re-exports vyuh_form_types. |
| vyuh_form_kit_editor | Flutter. FormKitEditor, FormKitEditorController, palette, actions, inspector and preview. |
| vyuh_cdx_ui | Flutter. CdxConfig and CdxFieldStyle that theme the controls (classic and refined presets). |
Three parts
| Part | Package | What it does |
|---|---|---|
| Model | vyuh_form_types | Describes a form as data: fields, a layout tree, validations and rules. Runs the rule, formula and validation engines. No Flutter dependency, so servers and tools can use it. |
| Fill-time renderer | vyuh_form_kit | FormView renders a definition. It holds no state: the host owns the value map and receives every change through onChanged. |
| Designer | vyuh_form_kit_editor | FormKitEditor edits a definition visually. Every command produces a new, valid definition, or is refused with a reason. |
Form Kit or Form Editor?
The CDX docs also cover the older Form Editor (vyuh_feature_forms and vyuh_form_editor). The two are separate systems with separate models.
| Form Kit | Form Editor | |
|---|---|---|
| Model | Immutable FormDefinition, checked when constructed | Form with FormGroup, built with a fluent DSL |
| Layout | Groups, repeating groups, 6/12-column rows, free grids | Rows, sections, repeating sections, step forms |
| Runtime | Stateless FormView; the host owns values | reactive_forms controls owned by the form |
| Framework | Plain Dart and Flutter; no vyuh_core feature registration | A Vyuh feature (forms.feature) |
| Use it for | New forms, and forms that need precise layout or JSON portability | Existing apps built on vyuh_feature_forms |
Pick the Form Kit for new work. Keep the Form Editor where an app already depends on it.
Status
The packages are at 0.1.x. Pages mark anything that is not on main yet:
- Coming in 0.2.0 (in review): the validator registry, which enforces every built-in validation, checks repeating-group entries, and lets apps register their own validators. See Custom validators.
- Planned: container validations, extensible rules, more field types and presentations, and one-registration custom types. See the Roadmap.
Next steps
- Installation
- Quick Start: define a form, render it, then open it in the designer
- The form definition