Simple form
The number one production case: a spec saved in your database, rendered with FkFormRender, validated and submitted.
Examples
FormKrafter examples
This app demonstrates the FormKrafter stack consumed from React through the generated wrappers: the drag & drop builder, the form renderer, rules and validation.
Open the playgroundEvery example below can also be opened pre-loaded in the playground.
Browse the examples
Rendering
Wizard
A stepper with per-step validation, locked step navigation and a final submit button.
Multilingual form
Labels, options and error messages carry per-locale en/fr values — switch the app language and the form follows, errors included.
Nested form
The host form embeds two reusable forms through nested-form bricks: at render time each specRef is resolved by services.specSourceService and inlined — fields, validations and rules included.
Data
Remote selects
Options fetched from a public API with server-side search, plus a second select depending on the first through URL interpolation.
Data grid
A data grid with per-row validation and a minimum row count — validate to see contacts[0].name style errors.
Context & auth
A token injected through the data prop and referenced as _authToken in the request headers — and provably absent from the submitted payload.
Advanced
Dynamic rules
Show, disable and compute fields from other answers — json-logic by default, sandboxed JavaScript when needed. Pick “Other”, tick the checkbox, set quantity above 10.
Server validation
The submitted data is revalidated inside a TanStack server function with validateFormData from the core — compare both verdicts.
Custom brick
A star-rating brick registered at runtime with registerBrick, validated and rendered like any built-in.
Theming
Every FormKrafter style flows through --fk-* CSS custom properties. The same form below, themed six different ways — each card shows the exact code that produces it.
Import Form.io
Paste a Form.io form definition, convert it with convertFormioForm from the core, and get a live FormKrafter spec — fields, layout, validations and simple conditionals included. Whatever cannot be mapped is listed as a warning.