Web News

Sneak Peek at Svelte 5 | Learn to Embrace Change

September 21, 2023
September 27, 2023
Episode Number:

Svelte 5 is coming and with it the addition of Svelte 5 Runes, a replacement for the let, =, export, and $: that we use in Svelte today. Runes replaces this old syntax with function syntax to achieve the same old things and more. In this episode, Matt and Mike discuss a brief history of Svelte before diving into what was shown off so far about Svelte 5 Runes. The duo then discuss the learning experience for those studying Svelte 4 and whether they should stop and wait for Svelte 5. This leads to a debate about keeping websites up and running with maintenance, and how updates like Svelte 5 can help or hurt a site in production.


Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

What you'll learn in this episode

  • Svelte 5 Runes
  • Embracing change
  • Our thoughts on upgrading from Svelte 4 to Svelte 5 for production apps and people still learning
  • Keeping sites maintained versus upgraded to the cutting edge

How to support the show


Prices subject to change and are listed in USD

  • Support the show from as little as ~$1/month
  • Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
  • Help support the HTML All The Things Podcast: Click Here

Scrimba Discount!

We receive a monetary kickback when you use our link

  • Learn to code using Scrimba with their interactive follow along code editor
  • Join their exclusive discord communities and network to find your first job!
  • Use this URL to get 10% off on all their paid plans:


History of Svelte

  • Released November 26, 2016 (6 years ago) created by Rich Harris
  • The biggest difference from other frameworks is that the code runs through a compiler which removes all the unnecessary Svelte framework code and outputs just what is required in terms of HTML, CSS and JavaScript to run the application
  • It also had a very simple and JavaScript-like syntax that was easy to get ramped up on
  • Let x = 2 on the top level of a Svelte component immediately made that variable reactive. Meaning you could use it in the html template and whenever it was updated in javascript it would automagically update the UI

Svelte 5 Runes

  • $state
  • $derived
    - computed*
  • $effect
    - On DOM content loaded + state change
  • $props
  • The paradigm shift from simple magic to explicit magic 
    - The actions are much more defined now
  • Ability to use any of the runes outside of .svelte files (.js .ts)
    - Huge for library authors to externalize and reuse logic 
  • Signals vs Hooks
    - Hooks are referring to how React handles state changes
    - Usually hooks are limited to be used explicitly within the react components and potentially their children (useContext)
    - Signals are easier to externalize into different files and will work regardless of what component they are in
    - Easier to manage the state in a simple way

Don’t be afraid of change

  • Discussion with Matt on how he feels about change while learning something new
  • The pushback this is getting and why