svelte

library5.55.4jsnpmunverified

Svelte is a revolutionary compiler-based UI framework for building web applications, currently at version 5.55.4. Unlike traditional frameworks that operate at runtime, Svelte shifts the work to compile time, converting declarative components into highly efficient JavaScript that surgically updates the DOM. This approach results in smaller bundle sizes, faster initial load times, and improved runtime performance, as it eliminates the need for a virtual DOM or a large runtime library. Svelte 5, with its new 'runes' API, introduces a universal, fine-grained reactivity system that makes state management more explicit and consistent across components and standalone JavaScript/TypeScript files. It maintains a rapid release cadence, frequently pushing patch updates and incorporating minor features, while major versions like Svelte 5 introduce significant, yet often incrementally adoptable, paradigm shifts. Key differentiators include its compile-time approach, the absence of a virtual DOM, and the new runes-based reactivity that aims for a more intuitive and performant developer experience.

web-framework

npm install svelte

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SVELTE

svelte

web-frameworkjavascriptv5.55.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MyComponent

✓ import MyComponent from './MyComponent.svelte'

Standard import for Svelte components. Svelte 5 still uses this pattern.

$state

✓ import { $state } from 'svelte'

Introduced in Svelte 5, '$state' declares reactive variables. This is the recommended modern approach to state management in Svelte 5 components and '.svelte.js' files. Previously, implicit reactivity for 'let' declarations was used.

$effect

✓ import { $effect } from 'svelte'

Introduced in Svelte 5, '$effect' schedules side effects to run in response to state changes, similar to 'useEffect' in React but with Svelte's fine-grained reactivity. It replaces some use cases of Svelte 4's `$: labeled statements` for side effects. An equivalent for before DOM update is `$effect.pre`.

writable

✓ import { writable } from 'svelte/store'

✗ import { writable } from 'svelte'

While Svelte 5 introduces runes for reactivity, traditional stores (writable, readable, derived) from 'svelte/store' are still valid for global state management or complex asynchronous streams, especially when migrating from Svelte 4 or integrating with existing store logic. They are not deprecated.

onMount

✓ import { onMount } from 'svelte'

✗ import { onMount } from 'svelte/lifecycle'

The 'onMount' lifecycle hook allows running code after the component is first rendered to the DOM. While reactive effects are often handled by `$effect` in Svelte 5, 'onMount' remains crucial for initial setup, data fetching, or interacting with the DOM post-render. It does not run during SSR.

This quickstart demonstrates how to set up a SvelteKit project with Svelte 5, showcasing the new `$state`, `$derived`, and `$effect` runes for reactive state management within a component. It includes a simple counter and multiplier that update the UI reactively.

npx sv create my-app cd my-app npm install # Create src/routes/+page.svelte (or modify existing) # This demonstrates basic reactivity with Svelte 5 runes. // src/routes/+page.svelte <script lang="ts"> import { $state, $derived, $effect } from 'svelte'; let count = $state(0); let multiplier = $state(2); const doubledCount = $derived(count * 2); const multipliedCount = $derived(count * multiplier); function increment() { count++; } function changeMultiplier() { multiplier = multiplier === 2 ? 3 : 2; } $effect(() => { console.log(`Count changed: ${count}, Doubled: ${doubledCount}`); }); </script> <main> <h1>Svelte 5 Runes Counter</h1> <p>Current count: {count}</p> <p>Doubled count: {doubledCount}</p> <p>Multiplied by {multiplier}: {multipliedCount}</p> <button on:click={increment}>Increment Count</button> <button on:click={changeMultiplier}>Change Multiplier</button> <p>Edit <code>src/routes/+page.svelte</code> to see changes.</p> </main> <style> main { font-family: sans-serif; text-align: center; padding: 2em; } button { margin: 0.5em; padding: 0.8em 1.2em; font-size: 1em; cursor: pointer; } </style> npm run dev

Debug

Known issues

breakingSvelte 5 introduces 'runes' as the primary reactivity model, changing how state is declared and managed. Implicit reactivity for top-level `let` declarations and the `$` reactive statements are superseded by explicit `$state`, `$derived`, and `$effect` runes. While Svelte 4 syntax remains supported, new development and refactoring should adopt runes for future compatibility and improved consistency.

fix

Migrate `let` declarations to `$state(initialValue)`. Replace `$: variable = expression` for computed values with `const variable = $derived(expression)`. Replace `$: { sideEffect() }` with `$effect(() => { sideEffect() })`. A migration script is available to assist with some of these changes.

affects: >=5.0.0

breakingSvelte 5 deprecates traditional slots in favor of 'snippets' for content projection, which offer more power and flexibility. While `<slot />` still works, `{@render ...}` is the new syntax for utilizing snippets.

fix

Transition from `<slot>` to `{@render ...}` with snippets for passing content to components. Review Svelte 5 documentation for detailed snippet usage.

affects: >=5.0.0

breakingComponent events in Svelte 5 have a new syntax; for instance, `on:click` is updated to `onclick`. Additionally, `createEventDispatcher` is effectively replaced by passing callback functions as props for component communication.

fix

Update event listeners from `on:eventName` to `onEventName`. Replace usage of `createEventDispatcher` with direct prop-based callback functions for child-to-parent communication.

affects: >=5.0.0

breakingBindings to component exports are no longer allowed in runes mode components. For example, `<A bind:foo />` for an exported `foo` in component `A` will cause an error. Instead, `bind:this` should be used to access the component instance.

fix

Avoid direct `bind:` to exported properties of components in runes mode. Use `bind:this={componentInstance}` and access properties on `componentInstance` instead.

affects: >=5.0.0

gotchaIn Svelte 5, while `svelte/store` still exists and is not deprecated, the new universal reactivity system with runes (`$state`, `$derived`, `$effect`) significantly diminishes the need for traditional stores in many scenarios, particularly for component-level or local reactive logic. Misunderstanding when to use runes versus stores can lead to unnecessary complexity or less optimized code.

fix

Prioritize `$state`, `$derived`, and `$effect` for reactive state and effects within components and `.svelte.js` files. Reserve traditional `writable` and `readable` stores for genuinely global, shared, or complex asynchronous data streams.

affects: >=5.0.0

Errors

Common errors & fixes

Cannot access 'variable' before initialization

Attempting to use a Svelte 5 rune like `$state` or `$derived` outside of a component's script setup or a `.svelte.js`/`.svelte.ts` file, or before it's properly initialized.

fix

Ensure `$state`, `$derived`, and `$effect` declarations are within a `<script>` tag of a `.svelte` component or a `.svelte.js`/`.svelte.ts` file, and that they are initialized correctly before usage.

Error: $ is not a function

Incorrectly applying Svelte 4's reactive store syntax (`$storeName`) to a non-store variable or attempting to use a rune without proper import or in a non-Svelte context.

fix

If using Svelte 4 stores, ensure `storeName` is an actual store imported from `svelte/store`. If in Svelte 5, use the explicit `$state(value)`, `$derived(expression)`, or `$effect(() => { ... })` runes, imported from 'svelte'. The `$` prefix for stores is still supported for compatibility but runes are preferred.

Cannot assign to a readonly property

Attempting to reassign a value declared with `$derived` (e.g., `doubledCount = 10`), which is a computed reactive value and should not be directly mutated.

fix

 `$derived` values are read-only and automatically update when their dependencies change. To change the value, modify the underlying `$state` variable(s) it depends on, rather than the `$derived` variable itself.

Upgrade

Version history

5.55.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/sveltejs/svelte ↗

packagehttps://www.npmjs.com/package/svelte ↗

homepagehttps://svelte.dev ↗