Svelte 5 is here

This article is a translation of the original article “Svelte 5 is alive“

I also run a telegram channel “Frontend in naval style“, where I talk about interesting things from the world of interface development.

Introduction

After nearly 18 months of development, including thousands of commits from dozens of contributors, Svelte 5 is finally stable.

This is the most significant release in the history of the project. Svelte 5 is a complete redesign: your applications will be faster, smaller and more reliable. You will be able to write more consistent and idiomatic code. Those new to the framework have less material to learn.

Despite this, Svelte is almost completely compatible with Svelte 4 – for most users the initial update will be completely hassle-free:

{
	"devDependencies": {
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5",
		// …
	}
}

What is Svelte?

Svelte is a framework for creating user interfaces. It uses a compiler to convert declarative component code based on HTML, CSS, and JavaScript into highly optimized JavaScript.

Because the compiler moves most of the work from the browser to npm run buildSvelte applications are small and fast. But beyond that, Svelte is designed to be a fun and intuitive way to build apps: it prioritizes getting things done.

The team behind Svelte also supports SvelteKitan application framework that manages routing, data loading, server-side rendering, and all the other details needed to build modern websites and applications.

What has changed and why?

Firstly, we have redesigned our website. You can read more about this Here.

As for Svelte itself, we will first talk about the reasons. We're not fans of change for the sake of change – in fact, Svelte has changed less than any other major framework between 2019 (when we launched Svelte 3) and now, which is an era in front-end development. And people really like Svelte 3 and 4 – it regularly tops developer satisfaction surveys.

So when we make changes, we don't do it lightly.

As more people built larger and larger applications using Svelte, the limitations of some of our initial design decisions began to become more apparent. For example, in Svelte 4 reactivity is completely dependent on the compiler. If you change one property of a reactive object in Svelte 4, the entire object will be invalidated because that's all the compiler can really do. Meanwhile, other frameworks moved to subtle signal-based reactivity, allowing Svelte to significantly outperform.

Additionally, Svelte 4's component layout is less user-friendly than it should be, mainly because it treats event handlers and “slot contents” as separate concepts from propswhich are passed to the components. This is because in 2019 it seemed likely that web components would become the primary component distribution mechanism, and we wanted to be prepared for that. This was our mistake.

And although the design $: for reactive restart of operators – this is a very nice trick, it turned out to be a stick in our wheels. It mixes two concepts (derived state and side effects) that should actually be kept separate, and since dependencies are determined when the statement is compiled (not when it is executed), it is not refactorable and becomes a magnet for complexity.

Svelte 5 eliminates these inconsistencies and pulls the spokes out of the wheels. It introduces runes, an explicit mechanism for (among other things) declaring a reactive state:

let count = 0;
let count = $state(0);

The interaction with state has not changed: in Svelte – unlike other frameworks – count is just a number, not a function, or an object with a value property, or something that can only be changed with the appropriate setCount:

function increment() {
	count += 1;
	console.log({ count });
}

Runes can be used in .svelte.js and .svelte.ts modules in addition to .svelte components, meaning you can create reusable reactive logic using a single engine.

Event handlers are now the same propslike all the others, which allows you to, for example, find out whether the user of your component has installed a specific event handler (which can be useful for avoiding expensive configuration work), or extend arbitrary event handlers to some element – things that are especially important to authors libraries.

And the mechanism slot to pass content between components (along with confusing syntax let: And <svelte:frafment>) was replaced by {#snippet ...}a much more powerful tool.

On top of these changes, there are many more improvements: native TypeScript support (no more preprocessors!), lots of bug fixes, and performance and scalability improvements across the board.

How can I update?

If you are currently using Svelte 3, start with transition to Svelte 4.

There you can update package.jsonto use the latest version svelte and auxiliary dependencies, for example vite-plugin-svelte.

It is not necessary to immediately update the components – in almost all cases, your application will work as before (if only faster). However, we recommend that you begin migrating components to take advantage of the new syntax and capabilities. You can migrate the entire application using the command npx sv migrate svelte-5or – if you're using VS Code with the Svelte extension – you can migrate components one at a time by selecting “Migrate Component to Svelte 5 Syntax” in the Command Palette.

Svelte has a large and robust ecosystem of component libraries that you can use in your applications such as shadcn-svelte, Skeleton And Flowbite Svelte. But you don't have to wait for these libraries to update to Svelte 5 to update your own application.

Svelte 4 syntax will eventually be deprecated, but it won't happen anytime soon and you'll have plenty of warnings.

You will find more information in detailed guide to migrating Svelte 5.

Our new CLI

Along with the new version of Svelte we have a new command line interface (CLI), sv. You can learn about it from blog announcement.

What's next?

In the near future, we plan to release a new version of SvelteKit that will take advantage of the new features of Svelte 5. In the meantime, you can use Svelte 5 with SvelteKit today, and npx sv create will create a new SvelteKit project with Svelte 5 installed in it.

After that, we have a whole list of ideas that we want to implement in Svelte itself. This release is the basis for many improvements that would have been impossible to create with Svelte 4, and we can't wait to roll up our sleeves.