What's new in Svelte 5

Link to headingRunes

Svelte 5 introduces runes to manage reactivity. These symbols give you explicit control over application state.

Link to headingThe $state, $derived, and $effect runes

At the heart of Svelte 5's updated reactivity system are the $state, $derived, and $effect runes. These provide concise ways to manage state and its dependencies within your components.

• $state: Declares a reactive variable, replacing top-level let declarations from Svelte 4. Whenever a $state variable's value changes, Svelte automatically updates the value anywhere it's used in your component. This eliminates manual updates and simplifies state management.

• $derived: Creates reactive values based on other $state or $derived values. When a dependency changes, Svelte marks the $derived value for recalculation upon its next read. This ensures consistency and simplifies complex calculations. It replaces the $: syntax from Svelte 4, offering more granular reactivity with fewer gotchas.

• $effect: Runs code in response to state changes (e.g., rendering to a <canvas> or interacting with an external library). While powerful, use $effect sparingly, as excessive side effects can make your code harder to follow. Svelte encourages declarative approaches whenever possible.

Link to headingSignals and fine-grained reactivity

Frameworks like Solid have popularized signals, which offer a responsive approach to reactivity. A signal is a container that notifies subscribers when its value changes. This lets frameworks track dependencies precisely and update only necessary parts of the application, improving performance.

Runes like $state and $derived let you work with reactive values directly, while Svelte's compiler handles the underlying signal management.

For example, writing a counter component in Svelte 5 is as straightforward as:

1
<script>
2
  let count = $state(0);
3
  let doubled = $derived(count * 2);
4
</script>
5

6
<button onclick={() => count++}>
7
  Clicks: {count}
8
</button>
9

10
<p>Click doubled: {doubled}</p>

Link to headingUniversal reactivity with .svelte.js files

Previously, managing global state in Svelte often involved stores, which had a different API and behavior than component-level reactivity. This created a disconnect and sometimes led to inconsistencies.

With .svelte.js and .svelte.ts files, you define shared state and logic in a single place and access it from any component using runes. This eliminates prop drilling, simplifies complex store setups, reduces boilerplate, and improves code maintainability.

Svelte now treats reactivity as a first-class language construct, blurring the lines between components and application logic for a more cohesive and intuitive development experience. This is a shift from Svelte 3 and 4, where reactivity was primarily confined to components.

Link to headingOther runes

Svelte 5 introduces other runes that simplify common tasks and reduce boilerplate code. Learn more about runes.

Link to headingCompiler improvements

Svelte has always been compiler-first. Unlike traditional frameworks that perform calculations and virtual DOM diffing at runtime, Svelte shifts this work to compile time. It compiles your components into highly optimized vanilla JavaScript, eliminating the need for a runtime library.

This results in smaller bundles, faster initial load times, and improved runtime performance. It also means you can use compiled Svelte components in any JavaScript project, including those that don't use Svelte.

Svelte 5 builds on this foundation with compiler improvements that enhance performance, reduce bundle sizes, and streamline development.

Link to headingComponents as functions

In Svelte 5, components are now plain JavaScript functions. This simplifies optimization, as build tools and JavaScript engines optimize functions effectively. For example, function components can be inlined into their caller, reducing overhead.

Svelte is the first major framework where components directly call each other, eliminating intermediary functions or complex component creation mechanisms. This contributes to Svelte's performance and excellent Core Web Vital scores.

Link to headingNative TypeScript support

Svelte 5 introduces native TypeScript support. Previous versions used a preprocessor, which added moving parts (like source maps) and slowed down builds.

Native TypeScript support means faster builds and the ability to use TypeScript annotations directly in your Svelte markup—for instance, inside inline event handlers.

This, combined with the new approach to event handling and simplified state management with runes, makes for easier development and library authoring.

Link to headingSnippets

Svelte 5 introduces snippets, which let you define reusable blocks of markup and logic within a component, which can then be rendered multiple times or passed to other components. They also replace Svelte 4’s slots.

Let’s look at an example:

1
<script>
2
  let items =  [
3
    { id: 1, name: 'Apple', price: 0.5 },
4
    { id: 2, name: 'Banana', price: 0.25 },
5
    { id: 3, name: 'Orange', price: 0.75 }
6
  ]
7
</script>
8
<ul>
9
  {#each items as item}
10
    {@render row(item)}
11
  {/each}
12
</ul>
13
{#snippet row(item)}
14
  <li>
15
    <span>{item.name}:</span>
16
    <span>${item.price.toFixed(2)}</span>
17
  </li>
18
{/snippet}

In this example, we define a row snippet that encapsulates the markup for each item in the list. The snippet is then rendered for each item using the {@render} tag within the {#each} block.

Snippets can also be passed as props to other components:

1
<script>
2
  import ItemList from './ItemList.svelte';
3
  
4
  let items = [
5
    { id: 1, name: 'Apple', price: 0.5 },
6
    { id: 2, name: 'Banana', price: 0.25 },
7
    { id: 3, name: 'Orange', price: 0.75 }
8
  ];
9
</script>
10
<ItemList {items}>
11
  // Implicitly pass this snippet as a prop.
12
  {#snippet row(item)}
13
    <li>
14
      <span>{item.name}:</span>
15
      <span>${item.price.toFixed(2)}</span>
16
    </li>
17
  {/snippet}
18
</ItemList>

1
<script>
2
  let { row, items } = $props()
3
</script>
4
{#each items as item}
5
  {@render row(item)}
6
{/each}

In this case, we pass a row snippet from App.svelte to ItemList.svelte. This separation of concerns makes it easy to reuse the ItemList component with different item rendering styles without modifying its internal structure.

Learn more about snippets.

Link to headingVite benefits

SvelteKit uses Vite, so you benefit from its growing ecosystem. Any tool that works in Vite also works in SvelteKit.

You can access a wide range of tools and plugins that enhance the development experience with minimal configuration. For example:

• Vitest for unit and integration testing

• Storybook for component development

• @sveltejs/enhanced-img for static image optimization

Svelte also benefits from Vite's optimized development server and hot module replacement (HMR), which speeds up development workflows.

Link to headingSvelte's growing community

Svelte's growth and popularity are evident in industry surveys like the 2024 Stack Overflow Developer Survey (itself built with Svelte), which ranks Svelte at 73% developer satisfaction, and the State of JavaScript 2023 survey, which ranks Svelte highly for positivity and retention.

Many companies, large and small, use Svelte:

• Apple Podcasts and Apple Music

• IKEA

• Yelp's Top 100 List

• GitPod

• Appwrite

And Vercel customers like Dbrand and Hugging Face.

“Svelte has allowed to us to ship quickly and with confidence, helping us keep pace with a dynamic AI ecosystem, despite a minority of the team being frontend developers. Our latest version of Gradio is also built on top of SvelteKit, bringing all of the power and performance of a best-in-class framework to around 1 million developers every month. The future is equally exciting; now that we are using SvelteKit, we can release a whole host of new features that would otherwise be costly to implement and support.Svelte has allowed to us to ship quickly and with confidence, helping us keep pace with a dynamic AI ecosystem, despite a minority of the team being frontend developers. Our latest version of Gradio is also built on top of SvelteKit, bringing all of the power and performance of a best-in-class framework to around 1 million developers every month. The future is equally exciting; now that we are using SvelteKit, we can release a whole host of new features that would otherwise be costly to implement and support.”

Peter Allen (pngwn) Hugging Face

Join the Svelte community on Discord.

Link to headingSvelte on Vercel

Vercel is invested in making our platform the best place to deploy Svelte apps. We collaborate closely with Svelte maintainers, and several members of the Svelte core team work at Vercel to ensure a sustainable future for the framework and a premier deployment experience.

The Build Output API enables SvelteKit (and other frameworks) to implement Vercel features like Incremental Static Regeneration (ISR), streaming serverless function responses, dynamic image optimization, and Skew Protection. Vercel is committed to open standards that can benefit the entire web development ecosystem.

Recent SvelteKit improvements on Vercel include:

• Enhanced toolbar support for streamlined debugging

• Improved analytics for deeper insights into application performance

• Integrated feature flagging for controlled rollouts

• Speed Insights for performance monitoring and optimization (used on svelte.dev for consistently passing Core Web Vitals).

Link to headingGetting started with Svelte

Svelte 5 makes frontend development easier while staying flexible and powerful. To get started, try the interactive Svelte tutorial, deploy a SvelteKit templates, or view the official Svelte 5 migration guide.