DocsSvelte
- 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 SvelteMiscSvelte 5 migration guideBreaking changes in runes modeSome breaking changes only apply once your component is in runes mode.MiscTestingUnit and component tests with VitestUsing runes inside your test filesas your source files, you can use runes inside your tests as long as the filename includes .svelte:import { flushSync } from 'sveMiscSvelte 5 migration guideBreaking changes in runes modeBindings to component exports are not allowedExports 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 theMiscSvelte 5 migration guideBreaking changes in runes mode`accessors` option is ignoredname export let name; </script>In runes mode, properties are never accessible on the component instance. You can use componMiscSvelte 5 migration guideBreaking changes in runes modeAttribute/prop syntax is stricters{is}valid />This is a footgun. In runes mode, if you want to concatenate stuff you must wrap the value in quotes:<Component prMiscSvelte 5 migration guideBreaking changes in runes mode`immutable` option is ignoredimmutable option has no effect in runes mode. This concept is replaced by how $state and its variations work.ReferenceCompiler errorsrunes_mode_invalid_import%name% cannot be used in runes modeLegacy APIsOverviewchanges to Svelte's API, including runes, snippets and event attributes. As a result, some Svelte 3/4 features are deprecated (thoLegacy APIsReactive let/var declarationsIn runes mode, reactive state is explicitly declared with the `$state` rune.In legacy mode, variablesLegacy APIsReactive $: statementsIn runes mode, reactions to state updates are handled with the `$derived` and `$effect` runes.In legacLegacy APIsexport letIn runes mode, component props are declared with the `$props` rune, allowing parent components to passLegacy APIs$$props and $$restPropsIn runes mode, getting an object containing all the props that were passed in is easy, using the `$proLegacy APIson:In runes mode, event handlers are just like any other attribute or prop.In legacy mode, we use the on:Legacy APIs$$slotsIn runes mode, we know which snippets were provided to a component, as they're just normal props.In leLegacy APIs<svelte:component>In runes mode, <MyComponent> will re-render if the value of MyComponent changes. See the Svelte 5 migrSpecial elements<svelte:options>section. The possible options are:`runes={true}` — forces a component into _runes mode_ (see the [Legacy APIs](legacy-overview) seIntroduction.svelte.js and .svelte.ts filests module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across yoMiscBest practicesAvoid legacy featuresAlways use runes mode for new code, and avoid features that have more modern replacements:use `$state`ReferenceCompiler warningssvelte_component_deprecated`<svelte:component>` is deprecated in runes mode — components are dynamic by defaultIn previousRuntimeStoresWhen to use storese states or extracting logic. With runes, these use cases have greatly diminished.when extracting logic, it's better to take advanReferencesvelte/compilerASTber; 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,ReferenceCompiler errorsattribute_invalid_sequence_expressiond as attribute/directive values in runes mode, unless wrapped in parenthesesAn attribute value cannot be a comma-separated sequencReferenceCompiler errorseach_item_invalid_assignmentor bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entrReferencesvelte/compilercompileModuleJavaScript source code containing runes, and turns it into a JavaScript module. function compileModule( source: string, optionsReferencesvelte/compilermigrateation of Svelte code towards using runes, event attributes and render tags. May throw an error if the code is too complex to migraMiscSvelte 5 migration guideReactivity syntax changesAt the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform SRuntimeLifecycle hooksDeprecated: `beforeUpdate` / `afterUpdate`ailable inside components that use runes.<script> import { beforeUpdate, afterUpdate } from 'svelte'; beforeUpdate(() => { coMiscSvelte 5 migration guideMigration scriptin your `package.json` migrate to runes (`let` → `$state` etc) migrate to event attributes for DOM elements (`on:click` → `onclicReferenceCompiler errorslegacy_reactive_statement_invalid`$:` is not allowed in runes mode, use `$derived` or `$effect` insteadReferenceCompiler errorslegacy_export_invalidCannot use `export let` in runes mode — use `$props()` insteadReferenceCompiler errorslegacy_props_invalidCannot use `$$props` in runes modeIntroduction.svelte files<script>to normal JavaScript, you can use runes to declare component props and add reactivity to your component. Runes are covered in theReferencesvelteafterUpdatell be after the initial onMount.In runes mode use $effect instead. function afterUpdate(fn: () => void): void;ReferencesveltebeforeUpdatel be before the initial onMount.In runes mode use $effect.pre instead. function beforeUpdate(fn: () => void): void;Referencesvelte/compilerCompileResultadata about the compiled component runes: boolean; Whether the file was compiled in runes mode, either because of an explicit optiReferenceCompiler errorslegacy_rest_props_invalidCannot use `$$restProps` in runes modeReferenceCompiler errorsrune_invalid_usageCannot use `%rune%` rune in non-runes modeReferenceCompiler warningsoptions_deprecated_accessorsrecated. It will have no effect in runes modeReferenceCompiler warningsoptions_deprecated_immutablerecated. It will have no effect in runes modeReferenceCompiler errorslegacy_await_invalidop level of a component, unless in runes modeReferenceCompiler errorsstore_invalid_subscription_modules unmounted. Consider migrating to runes instead.RuntimeLifecycle hooksDeprecated: `beforeUpdate` / `afterUpdate`Chat window examplehen someone toggles dark mode.With runes, we can use $effect.pre, which behaves the same as $effect but runs before DOM updates scMiscSvelte 5 migration guideReactivity syntax changeslet → $staterune. Let's migrate the counter to runes mode by wrapping the counter in $state:<script> let count = +++$state(0)+++; </script>NoMiscSvelte 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 runMiscSvelte 5 migration guideOther breaking changesbeforeUpdate/afterUpdate changesd.Both functions are disallowed in runes mode — use $effect.pre(...) and $effect(...) instead.ReferenceRuntime errorsClient errorslifecycle_legacy_only`%name%(...)` cannot be used in runes modeDocsSvelteKit
- AppendixMigrating to SvelteKit v2SvelteKit 2.12: $app/stores deprecated
d $app/state based on the Svelte 5 runes API. $app/state provides everything that $app/stores provides but with more flexibility aReference$app/statepageage are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)<!--- file: +page.svelte --->