Glossary
Svelte 5’s vocabulary is rune-first — $state, $derived, and $effect replaced export let, $:, and <slot> — with async Svelte (await directly in $derived and templates, gated by experimental.async) and SvelteKit’s routing, hooks, and remote functions built on top. When a lesson uses a term you’re unsure about, or unsure whether it’s still current for Svelte 5.57 / SvelteKit 2.70, look it up here.
| Term | Meaning | Lesson |
|---|---|---|
action / use: | The legacy directive: a function that receives an element’s DOM node (and optional params) when it mounts and may return { update?, destroy? }. Svelte’s own docs now recommend an attachment for new code, but use: still works and is still what many pre-attachment libraries hand you directly. | Actions |
| adapter | The plugin (@sveltejs/adapter-node, -static, -cloudflare, -auto, …) that tells vite build how to package a SvelteKit app for a specific deploy target — a standalone Node server, a fully prerendered static site, or a platform-specific edge/worker format. | Server & API |
animate:flip | The svelte/animate directive that smoothly slides a keyed {#each} item to its new position when the list reorders — transitions alone only cover add/remove, since a keyed reorder reuses the same DOM node and never triggers an intro/outro. | Transitions & Animations |
$app/navigation | The client-only module exporting goto() for programmatic navigation, invalidate()/invalidateAll() to force a load to re-run, and beforeNavigate/afterNavigate lifecycle hooks around route changes. | Server & API |
$app/state vs $app/stores | $app/state exposes page, navigating, and updated as plain runed objects you read directly (page.data); $app/stores exposed the same information as Svelte stores needing a $ prefix, and is now deprecated in its favor. | Loading Data |
async Svelte / experimental.async | The feature set that lets await appear directly inside $derived and component templates, not just top-level <script>. It must be turned on with the compiler option experimental.async: true, or Svelte throws a real error the moment it sees an await in one of those positions. | Async Svelte |
attachment / {@attach} | A function, applied with {@attach fn}, that runs when its element mounts and can return a cleanup function run on unmount. Introduced in Svelte 5.29 as the flexible successor to use: actions — it also works on components, which use: cannot. | Actions |
| Term | Meaning | Lesson |
|---|---|---|
| batching / microtask | Svelte batches DOM updates: effects (including the ones behind onMount) run on a microtask after mount()/hydrate() return, not synchronously — exactly why reading a just-changed value immediately afterward can still show the old one, until flushSync() or the next microtask catches it up. | Lifecycle |
$bindable | The rune a component must apply to a destructured prop (let { value = $bindable() } = $props()) before a parent is allowed to bind: to it; without it, bind: on that prop is a real, caught compile error, not a silent no-op. | Props & $bindable |
bind: / function bindings / bind:this / bind:group | bind: is sugar over a value plus its change event (bind:value, bind:checked, bind:files); bind:group wires a whole radio/checkbox set to one variable; bind:this captures a DOM node or component instance after it mounts; and, since Svelte 5.9, a binding can take a {get, set} function pair instead of a bare identifier to validate or transform the value on the way in. | Bindings |
| children | The default snippet prop: whatever markup a parent nests directly inside a component’s tags arrives as the children prop, rendered with {@render children?.()} — Svelte 5’s typed, parameterized replacement for the unnamed default <slot>. | Passing UI & Children |
class={{...}} / style: | Since Svelte 5.16, the plain class attribute accepts an object or array (class={{ active: isActive }}, class={[a, b && 'c']}), processed with the same algorithm as the popular clsx helper, built into the compiler with no dependency needed; style:prop={value} sets one inline CSS property reactively without touching the rest of style. | Events & Attributes |
| compiler / runes mode / legacy mode | Svelte’s compiler is a static analyzer that decides, per file, whether it’s in runes mode (any rune present, or runes: true) or legacy mode — the two are separate code paths, so mixing reactivity primitives across them (export let plus $state, $: plus $derived) is a hard compile error, not a warning. | Why Svelte, the Compiler |
context (setContext/getContext) | setContext(key, value) lets an ancestor make a value available to every descendant without threading it through props (avoiding prop drilling); getContext(key) reads the nearest ancestor’s value. setContext runs once at init, so the value must already be a runed object (like $state) for descendants to see later updates. | The Context API |
createAttachmentKey | Mints a unique symbol key, from svelte/attachments, that marks an object property as an attachment when the object is later spread onto an element ({...stuff}) — a programmatic alternative to writing {@attach fn} literally, for building up attachments in a loop or from several sources. | Actions |
createEventDispatcher (legacy) | Svelte 4’s way to emit a custom event (dispatch('change', detail)) for a parent to catch with on:change. It still compiles with no warning at all in runes mode, but a callback prop (onchange?.(detail)) is the idiomatic Svelte 5 replacement. | Events & Attributes |
createSubscriber | The low-level primitive, from svelte/reactivity, that every built-in reactive wrapper (MediaQuery, the svelte/reactivity/window values) is built on: give it a callback that subscribes to an external push source and calls update(), and it wires that source’s notifications into Svelte’s own dependency tracking behind a plain getter. | Built-in Stores |
| CSP (Content-Security-Policy) | SvelteKit’s kit.csp config (also usable flat in the sveltekit() Vite plugin config) generates a real, per-request nonce header automatically, so the inline scripts/styles the framework needs can pass a strict Content-Security-Policy without hand-managing nonces. | Server & API |
| custom element | A native Web Component that Svelte can compile a component into via <svelte:options customElement="tag-name">. A consumer in any framework (or none) uses it like any other DOM element, and $host() is how the component reaches its own hosting element from the inside. | Advanced Runes |
| Term | Meaning | Lesson |
|---|---|---|
| deep reactivity / proxy | $state on an object or array wraps it in a Proxy, so ordinary property writes and array mutations (arr.push(x), obj.prop = y) are tracked automatically at every depth of the structure — no separate “setter” call needed, unlike a plain store. | The $state Rune |
| dependency tracking | The compiler decides, statically, which reads inside a $derived/$effect count as dependencies — this analysis, done before your code ever runs, is what lets Svelte generate fine-grained updates instead of re-running whole components. | Why Svelte, the Compiler |
depends() / invalidate() | depends(key) inside a load function registers a custom dependency string; calling invalidate(key) (or invalidateAll()) from anywhere later forces every load that declared that dependency to re-run — how you manually trigger a refetch outside the automatic URL/param-based reruns. | Loading Data |
$derived | Declares a value computed from other reactive state (let double = $derived(count * 2)). Unlike an $effect, its recomputation is push-pull and lazy — a dependency change only marks it dirty, and the function actually re-runs the next time something reads it, never on a schedule of its own. | The $derived Rune |
$derived.by | The function form of $derived, for computations needing more than one expression — a loop, a temporary, a branch. $derived(expr) is just shorthand for $derived.by(() => expr), with identical dependency tracking and laziness. | The $derived Rune |
$effect | Registers a side effect that runs after the DOM updates, re-running whenever a value it read on its last run changes; its returned cleanup function runs before the next re-run and on unmount. Reach for $derived instead whenever the goal is really just computing a value. | The $effect Rune |
$effect.pending | Reports the number of async updates currently in flight inside the nearest <svelte:boundary> — specifically the case the boundary’s own pending snippet does not cover: a subsequent async update after the boundary’s first render already resolved. | Async Svelte |
$effect.pre | The sibling of $effect that runs before the DOM updates instead of after — for reading layout (like scroll position) that a pending update is about to change, with the same dependency-tracking and cleanup rules as $effect. | The $effect Rune |
$effect.root | Creates an effect scope that is not automatically torn down by a parent — it returns a destroy function you must call yourself, the escape hatch for effects created outside the normal component lifecycle (a state library, a test, imperative integration code). | Advanced Runes |
$effect.tracking | Returns true when the currently executing code is inside a tracking context — an effect, a derived, or the template — and false otherwise; useful for a custom reactive abstraction that needs to know whether it’s being read reactively right now. | Advanced Runes |
$env/static vs $env/dynamic | `$env/static/private | publicinlines environment variables as literal values at **build time**;$env/dynamic/private |
+error.svelte | A folder’s scoped error page, rendered when a load (or a page/layout itself) throws in that subtree. SvelteKit walks up the route tree from where the error was thrown looking for the nearest one, falling back to the root +error.svelte if no closer ancestor has one. | Routing & Pages |
| event delegation | Svelte doesn’t attach a native listener per element with an onclick — it registers one listener at the application root and dispatches to the right handler from there, to reduce memory footprint. The consequence: a plain addEventListener between the root and your element calling stopPropagation() on the native event can silently prevent Svelte’s own handler from ever firing. | Events & Attributes |
event.locals | The per-request object hooks like handle populate (event.locals.user = ...) so load functions, actions, and +server.js handlers downstream can read it. Typing it goes through the App.Locals interface in src/app.d.ts, or every read is implicitly any. | Server & API |
export let (legacy) | Svelte 4’s way to declare a prop. Once a component uses any rune, export let becomes a hard compile error rather than a warning, because runes mode’s reactivity rewriting has no meaning left to fall back to for it — let { x } = $props() is the Svelte 5 replacement. | Events & Attributes |
| Term | Meaning | Lesson |
|---|---|---|
fail() | Returned from a form action on validation failure (return fail(400, { error: '...' })) — it lands in the page’s form prop exactly like a plain returned object would, but, unlike a plain object, it also sets a real non-200 HTTP status, which is what anything branching on the response status needs. | Forms & Actions |
flushSync | Imported from 'svelte', forces every pending effect to run immediately and synchronously — needed after a raw mount()/hydrate() call (which returns before effects run), or any time imperative code needs the DOM caught up right now, such as in a test. | Lifecycle |
| form action | A named export (or default) in +page.server.js that a <form method="POST"> posts to; it works with zero client-side JavaScript — a real HTTP POST, a real redirect or re-render — before use:enhance optionally upgrades it to an AJAX submission. | Forms & Actions |
fromAction | Converts an existing use:-style action (the (node, params?) => { update?, destroy? } shape) into an attachment, keeping its exact behavior, so a library’s action can be used with {@attach} — including on a component, which a raw use: cannot target. | Actions |
fromStore / toStore | Bridge functions between the two reactivity worlds: fromStore(store) wraps a Svelte store as a runed object with a .current property (readable in a $derived/template without a $ prefix), and toStore(getter, setter?) does the reverse, exposing runed state through the classic store subscribe contract. | Runes vs Stores |
get() | Reads a store’s current value once, outside a component, without subscribing — implemented (in svelte/store) by subscribing, capturing the first synchronous call, and immediately unsubscribing; convenient, but not free, since it still pays for a subscribe/unsubscribe cycle. | The Store Contract |
hooks (handle, sequence, handleFetch, handleError, reroute, transport) | src/hooks.server.js’s full surface: handle runs on every request before the matched route (composed from several via sequence), handleFetch rewrites the server’s own fetch calls, handleError runs on unexpected (non-error()) exceptions, reroute rewrites which route a URL resolves to, and transport serializes custom class instances across the server/client boundary. | Server & API |
$host() | Returns the DOM element hosting a component compiled to a custom element — the component’s only connection to the outside world in that mode, since there’s no parent Svelte component to receive callback props or dispatched events. Calling it outside a custom-element component is a real compile error. | Advanced Runes |
| hydration | The client attaching event handlers and state to already-rendered, server-produced HTML instead of rebuilding it from scratch. SvelteKit renders on the server (SSR) by default, then hydrates on the client; a module-scope $state singleton shared across every request is the classic way this goes wrong. | SvelteKit: Full-Stack Svelte |
| Term | Meaning | Lesson |
|---|---|---|
$inspect | Logs its arguments and re-logs every time any of them change — a development-only tool (a no-op in production builds) that, unlike a plain console.log, tracks its values the way a $derived/$effect would and reports every subsequent update. | Advanced Runes |
$inspect.trace | Placed as the first statement inside an effect or derived, prints which specific reactive reads caused that particular run — a more targeted tool than plain $inspect when a function has many dependencies and only one needs blaming; dev-only, like $inspect. | Advanced Runes |
{#key} | A block that destroys and recreates its contents whenever the key expression changes — the standard way to replay a transition on a value change, not only on the surrounding block’s own add/remove. | Transitions & Animations |
load (universal vs server) | A +page.js/+layout.js universal load runs on the server during SSR and again on the client for later navigations (so it must stay anywhere-safe); a +page.server.js/+layout.server.js server-only load runs only on the server, the required place for a database call, a secret, or a private env var. | Loading Data |
module state (.svelte.ts) | A .svelte.ts/.svelte.js file can declare $state at module scope, importable from anywhere; every importer shares the exact same object — one instance for the whole running process — safe for genuinely global data, but a real per-user data leak risk under SSR, where one process serves many requests. | The $state Rune |
mount / hydrate | The imperative APIs (from 'svelte') used to bootstrap a non-SvelteKit app’s entry point: mount() renders a component fresh into a target element, hydrate() attaches to already-server-rendered HTML instead. Both return before any $effect has run, since effects are scheduled on a microtask. | Lifecycle |
| Term | Meaning | Lesson |
|---|---|---|
onclick vs on:click | Svelte 5 event handlers are plain properties (onclick={handler}) rather than Svelte 4’s on:click={handler} directive. The old form still compiles today (Svelte 5.57.1) with a deprecation warning, and event modifiers like `on:click | preventDefaultare gone — calle.preventDefault()` inside the handler instead. |
+page.svelte / +page.server.ts / +layout | The special files SvelteKit reads from src/routes/: +page.svelte makes a folder a navigable page, +page.server.ts supplies that page’s server-only load/actions, and +layout.svelte wraps every route beneath it (nesting, and rendering the active child through its children snippet). | Routing & Pages |
| param matcher | A function in src/params/ (typed ParamMatcher) that a dynamic segment like [id=integer] must satisfy to match at all; when it doesn’t, SvelteKit falls through to another route at the same position instead of matching the dynamic one unconditionally. | Routing & Pages |
pending / failed / onerror | Named snippets/props of <svelte:boundary>: pending shows while an await directly inside the boundary’s own template is unresolved, on first render only; failed (with a reset() callback) renders in place of a subtree whose render or effect threw; onerror observes the thrown error but must not call reset() synchronously from inside itself. | Lifecycle |
| prerender | export const prerender = true in a +page.server.js/+page.js renders that route to a static file at build time instead of on every request — the render-mode choice that trades per-request freshness for zero server work at runtime. | Server & API |
$props | Destructures a component’s inputs from its parent (let { name, greeting = 'Hello' } = $props()), replacing Svelte 4’s export let. It supports the usual destructuring toolkit — defaults, renaming, and a rest pattern (...rest) for forwarding leftover attributes. | Props & $bindable |
$props.id | Generates an id unique to the current component instance that stays consistent between server and client during hydration — exactly what’s needed to link a <label for> to an <input id> without a hardcoded string colliding when the component appears twice on one page. | Passing UI & Children |
| push/pull (lazy derived) | The model behind $derived’s laziness: a dependency change pushes a “you’re dirty” notification, but the function is only actually pulled (re-run) the next time something reads the derived value — proven by a derived that changes its dependency five times with no read in between and evaluates exactly zero times. | The $derived Rune |
| Term | Meaning | Lesson |
|---|---|---|
reactive declarations ($:, legacy) | Svelte 4’s reactive-statement syntax ($: doubled = count * 2), rewritten by the legacy-mode compiler into its own dependency-tracking code; mixing it into a runes-mode component is a hard compile error, not just a warning — $derived/$effect are the Svelte 5 replacement. | Events & Attributes |
redirect() / error() | SvelteKit control-flow helpers that work by throwing — redirect(status, location) and error(status, message) — so a try/catch wrapped around code that might call them needs to check isRedirect/isHttpError before treating the caught value as a real failure, or it silently swallows the redirect/error. | Server & API |
| remote functions (experimental) | An experimental alternative to load/actions/+server.js for talking to the server: query, form, command, and prerender from $app/server, called more like normal functions than a form submission — explicitly not yet stable, worth knowing about but not worth building production code on without checking its status again first. | Forms & Actions |
{@render} | Renders a snippet ({@render name(args)}). Writing a snippet’s name as a plain call instead ({row(item)}) compiles with no error at all but throws a real runtime error the moment that line executes, since a snippet compiles to a function expecting an internal anchor argument {@render} supplies. | Snippets & Render |
| route | SvelteKit’s file-based unit of URL structure: the folder layout under src/routes/ is the URL structure, with square brackets ([slug], [...rest], [[optional]]) capturing dynamic segments. | Routing & Pages |
| route group | A folder name wrapped in parentheses ((app)) that organizes routes — and can hold a shared +layout.svelte — without adding a segment to the URL; src/routes/(app)/grouped/+page.svelte is still just /grouped. | Routing & Pages |
| rune | A compiler signal — a $-prefixed, function-like keyword ($state, $derived, $effect, $props, …) that tells Svelte a value is reactive. Runes are not imported and not called at runtime like normal functions; the compiler recognizes them and generates the reactivity machinery around them directly. | Reactivity with Runes |
| Term | Meaning | Lesson |
|---|---|---|
settled() | Imported from 'svelte', returns a promise that resolves once pending state-triggered UI updates have been applied — documented for batching plain synchronous $state writes, not for waiting on an in-flight {await}/boundary render, which is a common misuse. | Async Svelte |
| signal | The general term for the reactive primitive underneath a rune — Svelte’s own docs describe a rune itself as “a compiler signal.” Reads register a dependency and writes notify dependents, the same push-pull mechanism $state/$derived/$effect all share. | Reactivity with Runes |
| slot (legacy) | Svelte 4’s way to pass markup into a component (<slot />, <slot name="x">), entirely replaced in Svelte 5 by snippets. <slot> still compiles and works today (Svelte 5.57.1) with a deprecation warning, not a removal. | Snippets & Render |
| snippet | A named, reusable block of markup defined with {#snippet name(params)}…{/snippet} and rendered with {@render name(args)}; snippets take parameters like functions and are Svelte 5’s replacement for <slot>. | Snippets & Render |
Snippet<[T]> | The TypeScript type for a snippet prop, imported from 'svelte': plain Snippet takes no parameters, Snippet<[T]> takes one parameter of type T (the array is a tuple, since a snippet can take several). Combined with a generic on the component, it ties a data item’s type to its rendering snippet’s parameter. | Passing UI & Children |
| spread attributes | {...obj} applies a whole object of attributes to an element at once. Attributes apply in document order, so whichever of a spread or an explicit attribute is written later in the markup wins — there’s no separate priority system beyond that ordering. | Events & Attributes |
| SSR | Server-side rendering: SvelteKit renders a route’s HTML on the server by default before the client hydrates it — the mode that makes a module-scope $state singleton dangerous (shared across every concurrent request on that server process) unless the state is created fresh per request via context instead. | SvelteKit: Full-Stack Svelte |
$state | Declares a reactive value (let count = $state(0)). On an object or array it wraps the value in a Proxy for deep reactivity, so ordinary property writes and array mutations are tracked, not just whole-value reassignment. | The $state Rune |
$state.raw | Opts a value out of the Proxy wrapping $state normally applies to objects/arrays — only reassigning the whole variable counts as a write. Mutating the contents in place changes the data but notifies nobody, trading away deep reactivity for the performance of skipping proxy instrumentation. | The $state Rune |
$state.snapshot | Takes a plain, non-proxied copy of a $state value — for handing to an API (api.save(...)) or any code that doesn’t expect (or would misbehave on) a Proxy, without affecting the original reactive state. | The $state Rune |
$store auto-subscription | Prefixing a store with $ inside a .svelte/.svelte.js file is compiler sugar that subscribes on the component’s behalf, reads the current value, re-renders on change, and unsubscribes automatically on destroy — but only at a component’s top level, never inside a nested function or block, where the compiler can’t statically place the subscription. | The Store Contract |
| store contract | The entire definition of a Svelte store: any object with a subscribe(fn) method that calls fn immediately with the current value and again on every change, returning an unsubscribe function — nothing more is required, which is why RxJS observables and other libraries’ objects can be stores too. | The Store Contract |
| streaming (un-awaited promise) | Returning a promise from load without awaiting it lets SvelteKit send the rest of the page immediately and stream that value in once it resolves, read on the client with {#await} — versus awaiting it directly in load, which holds up the initial response until it settles. | Loading Data |
<svelte:boundary> | Contains a render or effect error thrown anywhere in its subtree instead of letting it unmount the entire surrounding component tree; it also shows a pending snippet while an await directly inside its own template resolves for the first time — both async and error handling live on the same element. | Lifecycle |
svelte-check | The command-line type-checker (npm run check typically runs it) that understands .svelte files end to end — including expressions inside markup — catching a wrong prop type or a template typo that a plain tsc run would miss entirely. | Project & Tooling |
svelte/events on | A function that attaches a listener and returns a cleanup in one call, for cases a plain attribute can’t express — passive/once options, or code that must coexist correctly with Svelte’s delegated dispatch and its stopPropagation() handling. Used inside an attachment or $effect, not as a template attribute. | Events & Attributes |
| svelte-migrate | The official codemod CLI (npx svelte-migrate) that automates much of the Svelte 4 → 5 rewrite — export let to $props(), $: to $derived/$effect — for the same legacy patterns this course teaches recognizing by hand. Not exercised directly by this course’s probes; treat this as an accurate pointer rather than a locally-proven fact. | Events & Attributes |
svelte/reactivity (SvelteMap …) | Since Svelte 5.8, rune-native reactive classes — SvelteMap, SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams, MediaQuery — that track reads and method calls like $state does, with no subscribe/$/store contract at all. Unlike a plain $state-wrapped Map, SvelteMap makes .set()/.delete() themselves reactive, not just whole-value replacement. | Built-in Stores |
svelte/reactivity/window | Rune-native reactive values for browser globals (innerWidth, scrollY, online, …), replacing a hand-rolled resize/scroll/online listener; they read real window properties, so — like any window-derived value — expect a possible hydration mismatch during SSR rather than a guaranteed-correct server value. | Built-in Stores |
| Term | Meaning | Lesson |
|---|---|---|
tick | await tick() resolves once the current batch of pending DOM updates has been applied — for the rare case of measuring an element or focusing a freshly-shown input right after a state change, before the next line of code runs. | Lifecycle |
transition / in: / out: / |global | transition: animates both an element’s entry and exit; in:/out: apply different animations to each independently. A transition is local by default — it only plays when the block it directly belongs to is created or destroyed — and |global opts it into replaying whenever any ancestor block is created or destroyed instead. | Transitions & Animations |
untrack | Lets an effect (or derived) read a reactive value without adding it as a dependency, so a change to that value alone never triggers a re-run — imported from 'svelte', the escape hatch for the rare case where reading something must not itself be reactive. | The $effect Rune |
use:enhance | Progressively upgrades a plain <form method="POST"> action to an AJAX submission with no server changes needed; used bare it just avoids a full page navigation on success, or, given a callback (use:enhance={fn}), the callback gets full control via update()/applyAction(). | Forms & Actions |
vite-plugin-svelte | @sveltejs/vite-plugin-svelte, wired up automatically by sv create — the integration that actually runs the Svelte compiler on .svelte files during Vite’s dev server and build; day-to-day code rarely touches it directly. | Project & Tooling |
| Term | Meaning | Lesson |
|---|---|---|
writable derived (assignable $derived) | Since Svelte 5.25, a let-declared $derived value can be reassigned directly (likes += 1) for optimistic UI — the override is visible immediately and holds only until the next real dependency change forces a recompute, at which point it snaps back to being derived. A const $derived still cannot be reassigned. | The $derived Rune |
writable / readable / derived (store helpers) | The three store constructors from svelte/store: writable(initial) gives you set/update/subscribe; readable(initial, start) gives a value only its own start function can set, useful for wrapping an external push source; derived(stores, fn) computes a store’s value from one or more other stores. | Built-in Stores |