# Introducing runes

DevFeed: [Introducing runes](<https://devfeed.tech/articles/introducing-runes-3033.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/runes>)

Author: The Svelte team

Published: 2023-09-20T00:00:00Z

Content type: article

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [reactive](<https://devfeed.tech/topics/reactive.md>), [Compiler](<https://devfeed.tech/topics/compiler.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [compiler](<https://devfeed.tech/tags/compiler.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [reactive](<https://devfeed.tech/tags/reactive.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>)

## AI overview

This article introduces runes in Svelte 5, a new function-based syntax for declaring reactive state and extending fine-grained reactivity beyond component boundaries. The features are opt-in and intended to remain compatible with existing Svelte components, although the design is still a work in progress.

## Source excerpt

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 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. Introducing runes Before we begin 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 yet have a release date for Svelte 5. What we're showing you here is a work-in-progress that is likely to change! What are runes? rune /ro͞on/ noun A letter or mark used as a mystical or magic symbol. Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses let, =, the export keyword and the $: label to mean specific things, runes use function syntax to achieve the same things and more. For example, to declare a piece of reactive state, we can use the $state rune: App <script> let count = 0; let count = $state(0); function increment() { count += 1; } </script> <button on:click={increment}> clicks: {count} </button><script lang="ts"> let count = 0; let count = $state(0