@k8ordo/form

One zod schema produces the HTML constraint attributes, the messages, and the server-side validation. The DOM holds the values, so the form works with JavaScript disabled or not yet loaded.

npm GitHub

Running on this very page

The form below submits as GET and lands in this URL’s search params. Its constraint attributes were derived by formFields(demoState.url) in a Server Component, and the same schema is what @k8ordo/state’s definePageState reads back. The row underneath shows the URL the form wrote and the values state read agreeing.

URL: no query (all defaults)
state: {"q":"","min":0}

This site is built with @k8ordo/static, so there is no Server Action. A GET form carries no body, so the router intercepts it, and a navigation to the same pathname is a state update. With JavaScript off, the same form lands on the same URL. Type -1 into min and the browser’s own constraint validation stops it, in the schema’s own words.

Features

One source: the schemarequired, maxLength and type all come from the schema you wrote. No writing the same constraint twice, once in JSX and once on the server.
Works without JavaScriptA Server Action receives the submission. Errors come back per field and so do the values, so a retry never means typing it all again.
The DOM holds the valuesTyping causes no re-render. Values never enter React state — it carries only what the DOM cannot express, like the messages on screen and the identity of each row.
Paths are checked by the compilerA typo like field('titel') fails the build rather than the click. Nested paths and arrays are distinguished the same way.
Never breaks in silenceA field in the schema that never arrived is reported as a wiring mistake, not a validation failure. Checks that could not become attributes are listed too.
Secrets are never echoedValues come back so a retry keeps the input, with password fields excluded automatically — the library generated the attributes, so it knows which ones they are.

Documentation

The guide and reference ship inside the npm package. An AI coding assistant reads the exact installed version out of node_modules/@k8ordo/form/docs/.

Home