Before we talk about SvelteKit, we should touch on how React form handling works. I’m writing this to remind myself of the modern way to do it…
useState for every input fieldonChange handlers to update state on every keystrokeonSubmit handler to prevent the browser’s default behavior, construct a JSON payload, fire off a fetch requestThat’s a lot jumps to be hooped.
\nFrameworks like Next.js have improved this with server actions, but the fundamental approach remains the same: a cage match with the browsers native form handling.
\nSvelteKit takes a completely different approach. It just uses regular HTML.
\nIn SvelteKit, you write a standard <form method="POST"> in your +page.svelte file. That’s your UI. Then, in a +page.server.ts file in the same directory, you export an actions object that handles the submission.
The server-side action receives a request object, extracts the form data, runs your logic, and returns either a redirect or a fail with validation errors. No client-side state management, no manual fetch calls, no JSON serialization.
// +page.server.ts\nexport const actions = {\n default: async ({ request }) => {\n const data = await request.formData();\n const email = data.get('email');\n const password = data.get('password');\n\n if (!email) {\n return fail(400, { email, missing: true });\n }\n\n // authenticate user...\n throw redirect(303, '/dashboard');\n }\n};\nIf you’re a backend developer coming from Python or Ruby, this should feel familiar. The browser collects the data, posts it to a URL, and the server processes it. Stateless, reliable, and native.
\nYou might be thinking, “Okay, but I don’t want full page reloads every time someone submits a form.” Fair point. SvelteKit handles this with something called progressive enhancement. You add use:enhance to your form tag:
<form method="POST" use:enhance>\n <!-- your inputs -->\n</form>\nThat single directive tells SvelteKit to automatically intercept the submission, prevent the page reload, submit the data via fetch under the hood, and update the form prop with any validation errors returned from the server.
But wait there’s more.
\nIf JavaScript fails to load or the user is on a terrible connection, the form still works. It falls back to the browser’s native POST request.
\nYour form doesn’t break just because a script didn’t load. That’s how the web is supposed to work.
\nThe React approach treats the browser as a rendering target and reimplements everything in JavaScript. SvelteKit treats the browser as a platform and builds on top of what’s already there.
\nNow, don’t get me wrong. I’ll write React code any day of the week at the ole w2, but I am really liking how Svelte and SvelteKit has decided to approach these sorts of features.
\n", "date_published": "2026-04-11T10:00:00-05:00", "url": "https://llbbl.blog/2026/04/11/sveltekit-forms-back-to-basics.html", "tags": ["Webdev","svelte","React","Sveltekit","Forms"] } ] }