Skip to main content

What's new in Svelte: January 2024

SvelteKit 2 and a much-improved $state rune

Dani Sandoval

Happy New Year! It's been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the release of SvelteKit 2!

You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.

Let's jump in...

What's new in SvelteKit (2.0 and more!)

With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new Performance page - which explains how SvelteKit works to make your applications as performant as possible.

  • resolvePath has been replaced by resolveRoute in $app/paths. Use it to populate a route ID with params to resolve a pathname (1.29.0, Docs, #11261)
  • response.arrayBuffer() will now be inlined during SSR (1.30.0, Docs, #10535)
  • SvelteKit 2.0.0 adds:
    • untrack to load to opt-out of invalidation (Docs, #11311)
    • shallow routing to create history entries without navigating (Docs, #11307)
    • html typings (#11222)
    • redacted internal stack traces when reporting config errors (#11292)
    • fine grained invalidation of search params (Docs, #11258)

You can find a migration guide for SvelteKit 2.0 on the SvelteKit docs. Things should be pretty seamless with the svelte-migrate command doing much (if not all) for you!

What's new in Svelte

With Svelte 5 in preview, Svelte 4 (@latest) has only been getting bug fixes - with its current version at 4.2.8. The updates below are from version 5's preview branch:

  • The new $inspect rune is like console.log except that it will re-run whenever its argument changes (5.0.0-next.16, Docs, #9705)
  • $state is now proxied to make reactivity nested by default. This is a response to user feedback with plenty of context in the PR - so check it out if you're interested on how the syntax has improved during the preview (5.0.0-next.18, Docs/Examples, #9739)
  • Fallback values for bindings are disallowed in runes mode since they're confusing, and a source of bugginess and implementation complexity (5.0.0-next.19, #9784)
  • Fallback props are now readonly (unless used with bind:). By extension, default values should also be readonly (5.0.0-next.19, #9789)
  • The new unstate function allows you to remove reactivity from objects and arrays created with $state (5.0.0-next.19, Docs, #9776)
  • GamepadEventHandlers for window.addEventListener (gamepadconnected and gamepaddisconnected) have been added (5.0.0-next.23, Docs, #9861)
  • {@const} can now be used inside snippet blocks (5.0.0-next.24, #9904)
  • The new $state.frozen rune lets you access a read-only version of $state that cannot be mutated. This is useful if you want to work with data using immutable patterns rather than mutable patterns (5.0.0-next.27, Docs, #9851)

For all the release notes going forward, check out the CHANGELOG on main.

Community Showcase

Apps & Sites built with Svelte

  • eCourse is a sleek and customizable website template designed for effortless self-hosting of your online course
  • Typogram is a brand design tool with "a sprinkle of AI"
  • calcium is a browser extension for devs with fuzzy-find on browser tabs, bookmarks, history and common developer docs
  • hintable is an exciting word guessing game
  • domain.io retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them
  • Story Scroller is a REPL showcasing how Svelte can be used to make a scrollable cards list
  • The Atlas of Sustainable Development Goals 2023 presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals.
  • Lingotrack is a social platform for you as a language learner to track your progress and find engaging new media
  • Lofi Flow lets you save your best-loved YouTube lofi live radios and videos in one spot

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch/Hear

To Read

Libraries, Tools & Components

  • Routify, the popular routing library used in many Svelte apps, has its first Release Candidate for version 3
  • Superforms v2 is out now - supporting all validation libraries
  • SvelteKit-Design-Pattern is a template showcase Kreonovo's SvelteKit MVC Design patterns (more info in the Reddit post)
  • Shadcn's Svelte VSCode extension helps you install and use Shadcn components directly without leaving your IDE
  • SGSG is an alternative "full-stack application" template based on Svelte, Go, SQLite and gRPC
  • mistral-kit is a prompt-to-code site using mistral-7b and ollama
  • svelte-browser-import provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step.
  • progressbar-svelte is a Svelte package for customizable progress bars
  • MdCraft is an open-source web app that serves as an in-browser Markdown editor and previewer

That's it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Have a great year ๐Ÿฅณ