Superforms 💥
Making SvelteKit validation and display of forms easier than ever!
Feature list
- Merging
PageDataandActionDataconsistently - 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
FormDatainto 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.
- Works both on the server and with single-page applications (SPA)!
- 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
ActionResultand 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.
Installation
npm i -D sveltekit-superforms zod
pnpm i -D sveltekit-superforms zod
Get started
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
Feedback wanted!
Ideas, general feedback, bug reports, PR:s, etc, are very welcome as a Github issue, discussion, or on the Discord server!