What’s new in Svelte: November 2024

In case you missed the announcement post (/blog/svelte-5-is-alive), the brand new omnisite (/blog/the-omnisite) or the maintainers shipping it LIVE during Svelte Summit

In case you missed the announcement post (/blog/svelte-5-is-alive), the brand new omnisite (/blog/the-omnisite) or the maintainers shipping it LIVE during Svelte Summit (https://www.youtube.com/live/fAPFsRP-mbc?si=Atd1WNpoMddssSna&t=13084)… Svelte 5 is out!

Also announced at Svelte Summit was SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes) (https://hack.sveltesociety.dev/2024). The submission period ends January 9 and only projects started after October 18th are eligible. So get those $s ready and start hacking!

Since the release of Svelte 5, there’s already been one minor version to introduce a couple of helpful features. We’ll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month’s roundup…

What’s new in Svelte (#What’s-new-in-Svelte)If you’ve only recently migrated to Svelte 5 (/docs/svelte/v5-migration-guide), check out the last few months of updates for all the features that have gone into this release. For this month, you’ll see some marked -next.XXX. These changes were in the 5.0 release.

• Snippets can now be used to fill slots (5.0.0-next.262, #13427 (https://github.com/sveltejs/svelte/pull/13427))

• hidden until-found and beforematch are now available on DOM elements (5.0.0-next.266, MDN Docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#using_until-found), #13612 (https://github.com/sveltejs/svelte/pull/13612))

• Breaking: State mutations are not allowed in logic block expressions (5.0.0-next.269, #13625 (https://github.com/sveltejs/svelte/pull/13625))

• getContext() is now allowed within \(derived runes (5.1.0, Docs (/docs/svelte/\)derived), #13830 (https://github.com/sveltejs/svelte/pull/13830))

To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the CHANGELOG (https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).

What’s new in SvelteKit, Svelte CLI and Language Tools (#What’s-new-in-SvelteKit-Svelte-CLI-and-Language-Tools)

• adapter-auto now supports the Bun package manager (3.3.1, #12854 (https://github.com/sveltejs/kit/pull/12854))

• The Svelte CLI (/blog/sv-the-svelte-cli) now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in the CLI Repository (https://github.com/sveltejs/cli) or by running npx sv create from your command line.

• The Svelte extension now provides a Svelte 5 component migration command (extensions-109.1.0)

Community Showcase (#Community-Showcase)Apps & Sites built with Svelte (#Community-Showcase-Apps-Sites-built-with-Svelte)

• DocumentCloud (https://github.com/MuckRock/documentcloud-frontend/tree/sveltekit) is an all-in-one platform used by newsrooms around the world to manage primary source documents

• Chord (https://chord.fm/) is an app for recording podcasts and interviews in high quality

• Monokai.pro (https://monokai.pro/) uses Svelte 5 now (See the Reddit Post (https://www.reddit.com/r/sveltejs/comments/1gd87ej/monokaipro_uses_svelte_5_now/) for more details)

• svelte audio visualizations (https://github.com/flo-bit/svelte-audio-visualizations) are useful for visualizing voice input and output

• avi12’s (https://chromewebstore.google.com/detail/youtube-auto-hd-+-fps/fcphghnknhkimeagdglkljinmpbagone) YouTube (https://chromewebstore.google.com/detail/youtube-time-manager/fpoooibdndpjcnoodfionoeakeojdjaj) extensions (https://chromewebstore.google.com/detail/youtube-like-dislike-shor/fdkpkpelkkdkjhpacficichkfifijipc) are great examples of how Svelte can be used in Chrome extensions

• Multy (https://multy.me/) is a simple tool that allows you to create a list of URLs, and share it with a single link

• BlackJack (https://github.com/baterson/blackjack-svelte-5) is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes

Learning Resources (#Community-Showcase-Learning-Resources)Featuring Svelte Contributors and Ambassadors

• Svelte Summit Fall 2024 (https://www.youtube.com/watch?v=fAPFsRP-mbc&list=PL8bMgX1kyZTg28nrVEDoyRTQFWweUR6fn) was a blast! Keep an eye out on this playlist to see all the talks split up into individual videos

• Svelte 5 Basics - Complete Svelte 5 Course for Beginners (https://www.youtube.com/watch?v=8DQailPy3q8) by Syntax

• Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions (https://www.youtube.com/watch?v=8Sy04DGbJV8) by Stanislav Khromov

This Week in Svelte

• Ep. 79 (https://www.youtube.com/watch?v=wlngWKmIShA) — Changelog, Global/shared state, Kampsy-ui

• Ep. 80 (https://www.youtube.com/watch?v=SHBxjWtlv4A) — Changelog, formgator

• Ep. 81 (https://www.youtube.com/watch?v=xnNARAcjl9w) — Changelog, Inertia.js

• Ep. 82 (https://www.youtube.com/watch?v=CS2Nuwdwvi0) — Changelog, Migration guide

To Read

• Speed of Svelte reactive bindings vs keyboard events (https://zellwk.com/blog/svelte-reactive-bindings-speed/) by Zell Liew

• SvelteKit + Passkeys (https://passlock.dev/blog/passkeys/sveltekit-passkeys) by Passlock

• Local-First Web Development with Replicache: Building smooth user experiences (https://shootmail.app/blog/local-first-web-development-with-replicache) by Shootmail

• 10 game-changing tools that level up Svelte developers in 2025 (https://dev.to/sebconejo/10-game-changing-tools-that-level-up-svelte-developers-in-2025-14g3) by Sébastien Conejo

To Watch

• Svelte 5 Is Like React, But Better (https://www.youtube.com/watch?v=31CyquY8RNE) by Theo - t3․gg

• JavaScript framework reinvents itself… Did “runes” just ruin Svelte? (https://www.youtube.com/watch?v=aYyZUDFZTrM) by Fireship

Libraries, Tools & Components (#Community-Showcase-Libraries-Tools-Components)

• Svelte 5 testing example (https://github.com/PaoloTorregroza/weather-testing) is a good example project demonstrating how to test Svelte 5 applications with Vitest

• Origin UI - Svelte (https://originui-svelte.pages.dev/) is an extensive collection of copy-and-paste components for quickly building app UIs

• Cancellable (https://choco-ui.com/blocks/cancellable) is a building block adds three reactive attributes to button and anchor elements to create a more consistent user experience across browsers and platforms

• svelte-simple-router (https://github.com/dvcol/svelte-simple-router) is a client-side router made for Svelte 5

• svelte-openai-realtime-api (https://github.com/flo-bit/svelte-openai-realtime-api) is a Svelte component for using the OpenAI realtime api

• FlyonUI (https://github.com/themeselection/flyonui) is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins

• Svelte-Next (https://svelte-next.codewithshin.com/) automates Svelte version updates

• SvelteKit Dynamic Component Load demo (https://github.com/khromov/sveltekit-dynamic-component-load-demo/#sveltekit-dynamic-component-load-demo) shows how you can dynamically load different Svelte components depending on what content your backend API delivers

• Tzezar’s datagrid (https://github.com/tzezar/datagrid) is an easy to use, easy to customize, datagrid made in Svelte 5

• svelte-bundle (https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into single HTML files (with SSR!)

• svelte-virtuallists (https://github.com/orefalo/svelte-virtuallists) keeps your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists

• Sveltick (https://www.npmjs.com/package/sveltick) is a lightweight traffic-tracking library for your Svelte apps

That’s it for this huge month in Svelte! Let us know if we missed anything on Reddit (https://www.reddit.com/r/sveltejs/) or Discord (https://discord.gg/svelte).

Until next time 👋

Write a comment
No comments yet.