SvelteKit Form Data


A middleware that automatically parses your SvelteKit form data for use with SvelteKit form actions.

Why?

This reduces boilerplate within SvelteKit form actions where the developer is tasked with parsing individual values from FormData or manually looping over entities via formData.entries().

Setup

$3

You can use a package manager of your choice but npm is used by default.

``bash
npm i sk-form-data
`

Note to pnpm users: pnpm doesn't automatically install peer dependencies, so you might have to include @remix-run/web-file yourself with pnpm i @remix-run/web-file.

$3

Add form_data to your other hooks inside hooks.server.ts. If you have existing hooks you can use sequence from SvelteKit to add more hooks.

`typescript
// hooks.server.ts

import { sequence } from '@sveltejs/kit/hooks'
import { form_data } from 'sk-form-data'

export const handle = sequence(form_data)
`

$3

If you're using TypeScript add these types inside src/app.d.ts.

`ts
// app.d.ts

declare namespace App {
interface Locals {
form_data: Record
}
}
`

$3

Your form actions will have a new form_data property in locals.

`ts
// +page.server.ts

export const actions = {
default: async function ({ locals }) {
console.log(locals.form_data); // whatever you sent from your form
// do rest of your stuff...
},
}
`

Example

Use a form as you would in SvelteKit but keep in mind you can only use the POST method.

`svelte



Title:




`

Inside your form actions you have access to the parsed form data inside locals.form_data you can pass to a function that transforms values based on your Zod schema for example.

`typescript
// +page.server.ts

export const actions = {
default: async function ({ locals }) {
console.log(locals.form_data); // whatever you sent from your form
// do rest of your stuff...
},
}
``

Support My Work

https://syntax.fm

A Tasty Treats Podcast for Web Developers.