Introducing runes

svelte.dev · 1,887 words · saved by 1 readers

In 2019, Svelte 3 turned JavaScript into a reactive language. Svelte is a web UI framework that uses a compiler to turn declarative component code like this... ...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can 'see' where count is referenced, the generated code is highly efficient, and because we're hijacking syntax like let and = instead of using cumbersome APIs, you can write less code. A common piece of feedback we get is 'I wish I could write all my JavaScript like this'. When you're used to things inside components magically updating, going back to boring old procedural code feels like going from colour to black-and-white. Svelte 5 changes all that with runes, which unlock universal, fine-grained reactivity. Even though we're changing how things work under the hood, Svelte 5 should be a drop-in replacement for almost everyone. The new features are opt-in — your existing components will continue to work. We don't

In 2019, Svelte 3 turned JavaScript into a reactive language . Svelte is a web UI framework that uses a compiler to turn declarative component code like this... App < script > let count = 0 ; function increment () { count += 1 ; } </ script > < button on : click = {increment}> clicks: {count} </ button > < script lang = "ts" > let count = 0 ; function increment () { count += 1 ; } </ script > < button on : click = {increment}> clicks: {count} </ button > ...into tightly optimized JavaScript that updates the document when state like count changes. Because

Introducing runes

related reading