Web Dev Academy Meta-frameworks · SvelteKit Tool 21 / 64
Meta-frameworks

SvelteKit

The Svelte meta-framework. Its signature power: form actions — forms that work without client JS, progressively enhanced into smooth single-page submits.

Demo 01

Form actions — the request/response flow

Interactive simulation

In SvelteKit, a <form> posts to a named action on the server. The action runs, returns data, and the page updates. It works even with JS off — and use:enhance upgrades it to a no-reload submit. Submit the form to watch the flow light up.

1 · Browser

form idle…

2 · Server action

+page.server.js actions.subscribe()

4 · Page updates

waiting…

3 · Returns data

{ }
// +page.server.js
export const actions = {
  subscribe: async ({ request }) => {
    const data = await request.formData()
    return { success: true, email: data.get('email') }
  }
}
Demo 02

Svelte 5 runes — fine-grained reactivity

Interactive simulation

Svelte compiles reactivity away — no virtual DOM. With $state and $derived, a value and everything computed from it update together. Change the quantity and watch the total derive itself.

let qty = $state(1)
1
$derived(qty * 12)
€12

auto-recomputed

let qty = $state(1)
let total = $derived(qty * 12)   // recomputes when qty changes
Demo 03

Progressive to-do with use:enhance

Interactive simulation

Each checkbox is a tiny form action. With use:enhance the toggle posts to the server and patches the list in place — no full reload. Toggle items and add one.

    Demo 04

    Routing with +page.svelte

    Interactive simulation

    SvelteKit routes by folder. A +page.svelte is the UI, +page.server.js loads its data, [param] is dynamic. Click a route file.

    • routes/+page.svelte
    • routes/about/+page.svelte
    • routes/blog/[slug]/+page.svelte
    • routes/blog/+page.server.js
    /
    Home

    A +page.svelte file is a route's UI.

    i
    Demos are interactive simulations built with vanilla JS — SvelteKit runs via a build step / Node server and can't execute inside a static page. The real SvelteKit + Svelte code is shown in the dark code blocks above.

    ↑ All 64 tools