The use:enhance Directive
Progressively enhance form submissions with client-side fetch, no full reload.
The use:enhance Directive is a free Sveltejs Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
Progressive Enhancement
Forms work without JS; use:enhance upgrades them to fetch-based submissions for snappy UX.
Import enhance
From $app/forms.
import { enhance } from "$app/forms";Apply to a Form
Use the use: directive on the form element.
<form method="POST" use:enhance>...</form>No Reload
The page does not reload. SvelteKit submits via fetch, processes the action, and updates the page reactively.
Custom Handler
Pass a callback to enhance for fine control over submission.
<form use:enhance={({ formData }) => {
return ({ result }) => { /* custom handling */ };
}}>Default Behavior
Without a callback, enhance redirects/refreshes data exactly like a full page submit would.
Loading State
Track submission state with a local variable in the callback for spinners.
Error Recovery
Errors returned by the action surface in the form prop on the page.
Optimistic UI
Update local state in the callback before the server responds for instant feedback.
Multiple Forms
Each form can have its own enhance behavior. No global state needed.
Why It Matters
You get the resilience of HTML forms and the smoothness of an SPA in one directive.
Quick Check
What does use:enhance do?
Recap
use:enhance upgrades native forms to client-side submissions. Customize via callback.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “The use:enhance Directive” lesson free?
Yes — the full text of “The use:enhance Directive” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO. The Sveltejs Academy course includes 4 lessons in total.
What will I learn in “The use:enhance Directive”?
Progressively enhance form submissions with client-side fetch, no full reload. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “The use:enhance Directive” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- +page.server.js with actions
- The use:enhance Directive
- Progressive Enhancement for Forms
- Handling Validation Errors in Actions