Search • Svelte

RunesWhat are runes?

used as a mystical or magic symbol.Runes are symbols that you use in .svelte and .svelte.js/.svelte.ts files to control the Svelte

MiscSvelte 5 migration guideBreaking changes in runes mode

Some breaking changes only apply once your component is in runes mode.

MiscTestingUnit and component tests with VitestUsing runes inside your test files

as your source files, you can use runes inside your tests as long as the filename includes .svelte: import { flushSync } from 's

MiscSvelte 5 migration guideBreaking changes in runes modeBindings to component exports are not allowed

Exports from runes mode components cannot be bound to directly. For example, having export const foo =

MiscSvelte 5 migration guideBreaking changes in runes modeBindings need to be explicitly defined using `$bindable()`

e, meaning you can bind: to it. In runes mode, properties are not bindable by default: you need to denote bindable props with the

MiscSvelte 5 migration guideBreaking changes in runes mode`accessors` option is ignored

name export let name; </script>In runes mode, properties are never accessible on the component instance. You can use compon

MiscSvelte 5 migration guideBreaking changes in runes modeAttribute/prop syntax is stricter

s{is}valid />This is a footgun. In runes mode, if you want to concatenate stuff you must wrap the value in quotes:<Component pr

MiscSvelte 5 migration guideBreaking changes in runes mode`immutable` option is ignored

immutable option has no effect in runes mode. This concept is replaced by how $state and its variations work.

ReferenceCompiler errors

d as attribute/directive values in runes mode, unless wrapped in parenthesesAn attribute value cannot be a comma-separated sequenc

Legacy APIsOverview

changes to Svelte's API, including runes, snippets and event attributes. As a result, some Svelte 3/4 features are deprecated (tho

Legacy APIsReactive let/var declarations

In runes mode, reactive state is explicitly declared with the `$state` rune.In legacy mode, variables

Legacy APIsReactive $: statements

In runes mode, reactions to state updates are handled with the `$derived` and `$effect` runes.In legac

Legacy APIsexport let

In runes mode, component props are declared with the `$props` rune, allowing parent components to pass

Legacy APIs$$props and $$restProps

In runes mode, getting an object containing all the props that were passed in is easy, using the `$pro

Legacy APIson:

In runes mode, event handlers are just like any other attribute or prop.In legacy mode, we use the on:

Legacy APIs$$slots

In runes mode, we know which snippets were provided to a component, as they're just normal props.In le

Legacy APIs<svelte:component>

In runes mode, <MyComponent> will re-render if the value of MyComponent changes. See the Svelte 5 migr

Special elements<svelte:options>

section. The possible options are:`runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) se

Introduction.svelte.js and .svelte.ts files

ts module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across yo

ReferenceCompiler warnings

recated. It will have no effect in runes modeoptions_deprecated_immutable The `immutable` option has been deprecated. It will have

MiscBest practicesAvoid legacy features

Always use runes mode for new code, and avoid features that have more modern replacements:use `$state`

RuntimeStoresWhen to use stores

e states or extracting logic. With runes, these use cases have greatly diminished.when extracting logic, it's better to take advan

Referencesvelte/compilerAST

ber; end: number; // options runes?: boolean; immutable?: boolean; accessors?: boolean; preserveWhitespace?: boolean;

Referencesvelte/compilerCompileOptions

/span> This will have no effect in runes mode If true, getters and setters will be created for the component's props. If false,

Referencesvelte/compilercompileModule

JavaScript source code containing runes, and turns it into a JavaScript module. function compileModule( source: string, options

Referencesvelte/compilermigrate

ation of Svelte code towards using runes, event attributes and render tags. May throw an error if the code is too complex to migra

MiscSvelte 5 migration guideReactivity syntax changes

At the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform S

RuntimeLifecycle hooksDeprecated: `beforeUpdate` / `afterUpdate`

ailable inside components that use runes.<script> import { beforeUpdate, afterUpdate } from 'svelte'; beforeUpdate(() => { co

MiscSvelte 5 migration guideMigration script

in your `package.json` migrate to runes (`let` → `$state` etc) migrate to event attributes for DOM elements (`on:click` → `onclic

Introduction.svelte files<script>

to normal JavaScript, you can use runes to declare component props and add reactivity to your component. Runes are covered in the

ReferencesvelteafterUpdate

ll be after the initial onMount.In runes mode use $effect instead. function afterUpdate(fn: () => void): void;

ReferencesveltebeforeUpdate

l be before the initial onMount.In runes mode use $effect.pre instead. function beforeUpdate(fn: () => void): void;

Referencesvelte/compilerCompileResult

adata about the compiled component runes: boolean; Whether the file was compiled in runes mode, either because of an explicit opti

RuntimeLifecycle hooksDeprecated: `beforeUpdate` / `afterUpdate`Chat window example

hen someone toggles dark mode.With runes, we can use $effect.pre, which behaves the same as $effect but runs before the DOM is upd

MiscSvelte 5 migration guideReactivity syntax changeslet → $state

rune. Let's migrate the counter to runes mode by wrapping the counter in $state:<script> let count = +++$state(0)+++; </script>No

MiscSvelte 5 migration guideReactivity syntax changesexport let → $props

. It's also in line with the other runes, and the general thinking reduces to "everything special to reactivity in Svelte is a run

MiscSvelte 5 migration guideOther breaking changesbeforeUpdate/afterUpdate changes

d.Both functions are disallowed in runes mode — use $effect.pre(...) and $effect(...) instead.

ReferenceRuntime errorsClient errorslifecycle_legacy_only

`%name%(...)` cannot be used in runes mode