Svelte 5 runes and the convergence of reactivity models

Svelte 5 replaces the Svelte 4 pattern of using top-level let and $: labels with explicit runes like $state, $derived, and $effect. This change moves Svelte from compile-time heuristics to a runtime dependency tracking system that uses signals under the hood. In Svelte 5, $state(value) wraps any value in a reactive cell where writing to it schedules UI updates and reading it registers a dependency. For large, frozen objects, developers use $state.raw to skip the proxy, while $state.eager forces the read to flush synchronously for user-input responsiveness. Because dependency tracking is now a runtime process, extracting logic into functions does not break reactivity as it did in Svelte 4. Developers must avoid destructuring $state objects, as this returns plain values instead of reactive bindings. In Svelte 5, $effect handles syncing state with the outside world, like updating document.title or third-party libraries. Unlike the previous $: syntax, $effect runs after DOM updates and allows for cleanup functions. For component inputs, $props provides a single call that handles destructuring, replacing the old export let pattern. If a parent component uses bind:value, the child must use the $bindable rune. This explicit approach prevents the silent reactivity failures that occurred when logic was moved into plain JavaScript files.

Performance and Bundle Realities

Svelte compiles components into direct DOM manipulation instructions at build time. This removes the virtual DOM runtime and keeps bundle sizes minimal. In production tests, an equivalent application built in Svelte ships a 31 KB gzipped bundle, compared to 94 KB for Vue and 148 KB for React. Vue targets similar performance levels through Vapor Mode, which is an opt-in strategy that bypasss the virtual DOM. Vue 3.5 also cut memory usage by 56% through a reactivity system refactor. Solid maintains a narrow lead in raw runtime performance because its fine-grained signal graph updates only the exact DOM nodes bound to a signal.

Svelte has an ecosystem roughly 4 times larger than Solid by weekly npm downloads. Svelte reaches 2.7M weekly downloads while Solid sits at 1.49M. Solid holds a consistent advantage in micro-benchmarks because its signal graph is the most efficient update mechanism. Does the convenience of built-in transitions and scoped styles outweigh the precision of Solid’s per-binding granularity?

Selection and Developer Ergonomics

Selection depends on the team’s familiarity with specific syntaxes and the complexity of the application. Svelte offers a lower floor for beginners because its template syntax reads like HTML. You should consider the specific needs of your engineers. Svelte 5 runes, such as $state and $derived, provide a more predictable experience in large codebases with hundreds of components. This stability replaces the Svelte 4 model where reactivity only worked at the top level of a file. In Svelte 5, $props provides a single call that handles destructuring, replacing the old export let pattern.

Solid remains the better choice for React developers who want to keep JSX while gaining compiler-first performance, whereas Svelte is the better fit for teams starting fresh who want maximum developer ergonomics and built-in animations. Svelte also provides built-in tools for CSS scoping, UI transitions, and animations, which reduces the need for third-party dependencies. Svelte’s 86,000 GitHub stars and 2.7M weekly downloads suggest a more mature library ecosystem than Solid, which has 35,000 stars and 1.49M downloads. Vue remains an approachable middle ground for teams seeking a gentle learning curve and cohesive core tooling like Pinia and Vue Router.