Loading SvelteCosmos...
“In Svelte 5, $state() is the foundational rune that wraps values in reactive signals. It works inside .svelte components and plain .svelte.js/.svelte.ts modules, making reactivity universally portable.”
Declare deeply reactive variables and universal signals anywhere in your codebase.
<script>
let user = $state({
name: 'Ada',
score: 100
});
function boost() {
user.score += 25; // Fine-grained mutation
}
</script>
<p>{user.name}: {user.score} pts</p>
<button onclick={boost}>Boost</button>Modify the state variable below to watch the signal update the output without VDOM diffing:
Svelte 5 state is based on fine-grained signals. Updating property a of an object will not trigger effects watching property b.