Svelte 5 — What’s new?

Introduction

Svelte has gained serious traction in the web development world as an open-source frontend compiler, thanks to its fresh and efficient approach to building user interfaces. Unlike traditional frameworks like React, Angular, and Vue.js, which rely on a virtual DOM, Svelte compiles components into highly optimized JavaScript at build time. This results in smaller bundle sizes, faster execution, and minimal runtime overhead.

Other frameworks have started adopting similar optimizations:

• Solid.js follows a compile-time approach like Svelte, avoiding a virtual DOM.
• Vue 3’s Reactivity System introduced compiler-based optimizations inspired by Svelte.
• React Server Components (RSC) & React Forget aim to reduce reliance on the virtual DOM by improving state updates.

Now, with Svelte 5, developers get access to new features that make frontend development simpler and more efficient. In this article, we’ll break down what’s new, why it matters, and how it impacts modern development.

Why Svelte? A Quick Recap

Before diving into Svelte 5’s updates, let’s revisit what makes Svelte unique: ✅ Compiler-Driven Approach — Shifts the work from the browser to the build step, generating efficient JavaScript.
✅ Zero Runtime Overhead — Unlike React or Vue, which ship a runtime, Svelte runs directly in the browser.
✅ Smaller Bundle Sizes — Optimized output reduces load times and improves performance.
✅ Simplified Reactivity — No complex state management; just update a variable, and the UI reflects it.
✅ Built-in Accessibility & Optimized CSS — Ensures a11y compliance and removes unused CSS for leaner styles.

What’s New in Svelte 5?

Svelte 5 introduces Runes, enhanced reactivity, native TypeScript support, improved state management, and syntax enhancements. Let’s break these down.

1. Runes: A Game-Changer for State Management

Runes are Svelte 5’s new approach to managing state, effects, and reactivity. They function similarly to React’s hooks but are built directly into the compiler, making them more efficient.

New Runes in Svelte 5

• $state – Creates a reactive state variable.
• $derived – Computes values based on other states.
• $effect – Runs a function whenever its dependencies change (like useEffect in React).
• $props – Gives direct access to all component props.
• $bindable – Allows a child component to modify a parent’s state.
• $inspect – Logs a state value whenever it changes (enhanced debugging).
• $host – Provides access to a custom element’s host when compiling.

Example: Using $state in Svelte 5

<script>
    let count = $state(0);

    function increment() {
        count++;
    }
</script>

<button onclick={increment}>Increment</button>
<p>Count: {count}</p>

2. Native TypeScript Support

Svelte 5 comes with built-in TypeScript support, eliminating extra setup.

What this means for developers:

• ✅ Auto-completion & Type Inference for better DX.
• ✅ Seamless Type Checking at compile time.
• ✅ Native TypeScript Integration with no extra configs.

Example: Using TypeScript in Svelte 5

<script lang="ts">
    let message: string = "Hello, Svelte 5!";
</script>

No need for additional configuration — TypeScript works out of the box.

3. Improved Reactivity and Performance Enhancements

Svelte 5 further optimizes its reactivity system:

• Fine-grained updates — Only necessary parts of the UI update.
• Dependency tracking — Reduces unnecessary renders.
• Better state updates with $effect.

Example of $effect

<script>
    let count = $state(0);
    $effect(() => console.log("Count changed:", count));
</script>

<button onclick={() => count++}>Increase</button>

Every time count updates, the effect rune runs.

4. Syntax Enhancements

Svelte 5 introduces new syntax directives to streamline development:

• #snippet – Creates reusable markup snippets.
• @html – Injects raw HTML into a component.
• @const – Defines constants inside a template.
• @debug – Logs variables when they change.
• use: – Executes custom effects on mount.

Example of Snippets:

{#snippet title(text:string)}
 <h1 class="font-black text-3xl"> {text} </h1> 
{/snippet}

{#snippet todoSnippet(todo: Todo)}
  {@const id = todo.id}
  <div class="flex flex-row items-center justify-between gap-5 w-full" transition:fade>
    <input type="checkbox" bind:checked={todo.completed} />
    <h1 class="font-bold"> {todo.title} </h1>
    <!-- <h3> {todo.description} </h3> -->
    <button class="outline secondary  rounded-2 px-4 py-2" onclick={() => removeTodo(id)}> Remove </button>
  </div>
{/snippet}
<main>
  {@render title("My todos app with Svelte 5")}
  <TodoForm {addTodo} />

  <div class="flex flex-row items-start justify-center gap-20">
    <div class="flex flex-col gap-10 items-start justify-between w-full">
      {@render title(`To do: ${remaining} / ${todos.length}`)}
      {#each filteredTodos as todo (todo.id)}
        {@render todoSnippet(todo)}
      {/each}
    </div>
  </div>
</main>

👉 This makes reusable UI elements more intuitive and easier to maintain.

Building a Simple To-Do App in Svelte 5

To demonstrate Svelte 5’s improvements, I built a simple To-Do app utilizing $state, $effect, and snippets.

Key Features Implemented:
✅ Reactivity with $state
✅ Derived values using $derived
✅ Reusable UI elements with Snippets
✅ Efficient debugging using $inspect

Demo

🔥 Managing tasks with Svelte 5’s faster reactivity and lighter bundle sizes.

📌 GitHub Repository

GitHub - federicorudolf/todos_svelte_5

Why This Matters

With Svelte 5:

• Development is faster due to fewer dependencies and built-in optimizations.
• Performance is improved because it eliminates unnecessary re-renders.
• Applications are more maintainable thanks to a simpler, more readable state management model.

Svelte 5 is particularly well-suited for:

✅ Mobile & PWAs — Its small footprint makes it perfect for lightweight apps.
✅ Modern Web Apps — With first-class TypeScript support and optimizations.
✅ Ionic Integration — Works seamlessly with Ionic for mobile development.

What’s Next?

Svelte’s roadmap suggests:

🔹 Expanding the Runes API with more built-in utilities.
🔹 Enhancements to SvelteKit for better full-stack development.
🔹 Improved tooling to make Svelte even more accessible.

For me personally, I’ll be exploring SvelteKit’s backend integrations to see how we can build full-stack apps entirely with Svelte.

Conclusion

Svelte 5 delivers major improvements in state management, performance, and developer experience. With Runes, built-in TypeScript support, and refined reactivity, it simplifies frontend development while keeping it super fast.

🚀 If you’re looking for a lightweight, high-performance alternative to React or VueJS, Svelte 5 is a must-try.

Got questions or thoughts? Let’s discuss! 🎉

Thanks for reading!
- Fede