Coding with Jesse

Svelte 5 is here!

In case you missed it, Svelte 5 was finally released!

It's been here for a while as a pre-release, but I held off on using it until it was finalized. (I didn't want to learn how to use the new syntax and then have to un-learn and re-learn as the team reworked things and added or removed functionality. But now these decisions have been finalized, the syntax is cemented, and I'm excited to start trying out these new ways of doing things.)

Svelte 5 marks a significant change in the language itself. "Runes" are a new way of writing reactive code with Svelte. This allows a major simplification of the API and surface area of Svelte, making Svelte easier for beginners to learn and use. I think it was a smart move, as it surely makes it easier for people to switch to Svelte.

For those of us who are already deeply invested in Svelte, the new syntax will take some getting used to. Fortunately, the old syntax will continue to be available until Svelte 6 or 7 is released, so we have some time to adapt and learn. Also, there is a migration script. I haven't tried it yet, but it should automatically switch your code over to the new syntax.

Some of the more "magic" Svelte features, like the reactive $: statement, are now deprecated. So are some features I really loved, such as being able to add modifiers to event handlers like on:click|preventDefault. Stores will continue to be supported, but there is some pressure to switch over to using runes instead. I haven't made up my mind yet as to whether I'll rewrite all my stores with runes, or whether I still prefer how stores work in some cases.

I'm also excited that this marks the beginning of a new chapter in the Svelte story. I think it's similar to when React introduced hooks, and changed the way we write React code. I can't imagine hooks will ever go away, and similarly I think runes are here to stay.

If you still haven't tried out Svelte, I think this is the perfect time to learn it. It's already a very mature platform, and this recent change means things will likely be quite stable from here on out. I started using Svelte in production in 2019, and I haven't looked back.

To read more about migrating to Svelte, including all the new syntax, check out the well-written Svelte 5 migration guide. Be sure to click on the "Why we did this" sections for more background and context on the reasoning for the changes. I found these to be very helpful to understand the logic around the changes.

Published on October 29th, 2024. © Jesse Skinner

About the author

Jesse Skinner

I'm Jesse Skinner. I'm a self-employed web developer. I love writing code, and writing about writing code. Sometimes I make videos too. Feel free to email me if you have any questions or comments, or just want to share your story or something you're excited about.