Skip to main content
rune /ruːn/ noun A letter or mark used as a mystical or magic symbol.
Runes are symbols that you use in .svelte and .svelte.js/.svelte.ts files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are keywords. Runes have a $ prefix and look like functions: 
let message = $state('hello');

​
How runes differ from functions

They differ from normal JavaScript functions in important ways:
  • You don’t need to import them — they are part of the language
  • They’re not values — you can’t assign them to a variable or pass them as arguments to a function
  • Just like JavaScript keywords, they are only valid in certain positions (the compiler will help you if you put them in the wrong place)

​
Available runes

Svelte provides the following runes:

​
State and reactivity

  • $state - Declares reactive state
  • $derived - Declares derived state that depends on other state
  • $effect - Runs side effects when state changes

​
Component props

​
Development and debugging

  • $inspect - Logs reactive values when they change

​
Custom elements

  • $host - Provides access to the custom element host
Runes didn’t exist prior to Svelte 5. They represent a new paradigm for declaring reactivity in Svelte.