Superforms 💥

https://superforms.vercel.app/
Discord • Discussions • API • FAQ • npm • Issues

Superforms is a SvelteKit library that helps you with server-side validation and client-side display of forms.

Feature list

Merging PageData and ActionData consistently - Forget about which one to use and how, just focus on your data.
Server-side data validation using Zod, with output that can be used directly on the client.
Auto-centering and auto-focusing on invalid form fields.
Tainted form detection, prevents the user from losing data if navigating away from an unsaved form.
No JS required as default, but full support for progressive enhancement.
Automatically coerces the string data from FormData into correct types.
For advanced data structures, forget about the limitations of FormData - Send your forms as devalued JSON, transparently.
Generates default form values from validation schemas.
Support for nested data structures, snapshots and multiple forms on the same page.
Proxy objects for handling data conversions to string and back again.
Client-side validators for immediate user feedback.
Provide submit state feedback with three auto-updating timers, based on human perception research.
Even more care for the user: No form data loss, by preventing error page rendering as default.
Hook into a number of events for full control over the ActionResult and the validation update, with a possibility to cancel the update at every step.
Complete customization with a huge list of options.
Comes with a Super Debugging Svelte Component: SuperDebug.

 npm i -D sveltekit-superforms zod

 pnpm i -D sveltekit-superforms zod

Follow the get started tutorial on the website to get a hands-on introduction to Superforms: https://superforms.vercel.app/get-started

You can also watch this excellent introduction video to see what's possible: https://www.youtube.com/watch?v=MiKzH3kcVfs

Ideas, feedback, bug reports, PR:s, etc, are very welcome as a Github issue or discussion!