|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: November 2024" |
| 3 | +description: 'New features in Svelte 5 and a ton of new community libraries' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +In case you missed the [announcement post](https://svelte.dev/blog/svelte-5-is-alive), the brand new [omnisite](https://svelte.dev/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! |
| 9 | + |
| 10 | +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! |
| 11 | + |
| 12 | +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... |
| 13 | + |
| 14 | +## What's new in Svelte |
| 15 | + |
| 16 | +If you've only recently [migrated to Svelte 5](https://svelte.dev/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. |
| 17 | + |
| 18 | +- Snippets can now be used to fill slots (**5.0.0-next.262**, [#13427](https://github.com/sveltejs/svelte/pull/13427)) |
| 19 | +- `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)) |
| 20 | +- **Breaking:** State mutations are not allowed in logic block expressions (**5.0.0-next.269**, [#13625](https://github.com/sveltejs/svelte/pull/13625)) |
| 21 | +- `getContext()` is now allowed within `$derived` runes (**5.1.0**, [Docs](https://svelte.dev/docs/svelte/derived), [#13830](https://github.com/sveltejs/svelte/pull/13830)) |
| 22 | + |
| 23 | +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). |
| 24 | + |
| 25 | +## What's new in SvelteKit, Svelte CLI and Language Tools |
| 26 | + |
| 27 | +- `adapter-auto` now supports the Bun package manager (**3.3.1**, [#12854](https://github.com/sveltejs/kit/pull/12854)) |
| 28 | +- The [Svelte CLI](https://svelte.dev/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. |
| 29 | +- The Svelte extension now provides a Svelte 5 component migration command (**extensions-109.1.0**) |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +## Community Showcase |
| 34 | + |
| 35 | +### Apps & Sites built with Svelte |
| 36 | + |
| 37 | +- [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 |
| 38 | +- [Chord](https://chord.fm/) is an app for recording podcasts and interviews in high quality |
| 39 | +- [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) |
| 40 | +- [svelte audio visualizations](https://github.com/flo-bit/svelte-audio-visualizations) are useful for visualizing voice input and output |
| 41 | +- [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 |
| 42 | +- [Multy](https://multy.me/) is a simple tool that allows you to create a list of URLs, and share it with a single link |
| 43 | +- [BlackJack](https://github.com/baterson/blackjack-svelte-5) is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes |
| 44 | + |
| 45 | +### Learning Resources |
| 46 | + |
| 47 | +_Featuring Svelte Contributors and Ambassadors_ |
| 48 | + |
| 49 | +- [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 |
| 50 | +- [Svelte 5 Basics - Complete Svelte 5 Course for Beginners](https://www.youtube.com/watch?v=8DQailPy3q8) by Syntax |
| 51 | +- [Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions](https://www.youtube.com/watch?v=8Sy04DGbJV8) by Stanislav Khromov |
| 52 | + |
| 53 | +_This Week in Svelte_ |
| 54 | + |
| 55 | +- [Ep. 79](https://www.youtube.com/watch?v=wlngWKmIShA) — Changelog, Global/shared state, Kampsy-ui |
| 56 | +- [Ep. 80](https://www.youtube.com/watch?v=SHBxjWtlv4A) — Changelog, formgator |
| 57 | +- [Ep. 81](https://www.youtube.com/watch?v=xnNARAcjl9w) — Changelog, Inertia.js |
| 58 | +- [Ep. 82](https://www.youtube.com/watch?v=CS2Nuwdwvi0) — Changelog, Migration guide |
| 59 | + |
| 60 | +_To Read_ |
| 61 | + |
| 62 | +- [Speed of Svelte reactive bindings vs keyboard events](https://zellwk.com/blog/svelte-reactive-bindings-speed/) by Zell Liew |
| 63 | +- [SvelteKit + Passkeys](https://passlock.dev/blog/passkeys/sveltekit-passkeys) by Passlock |
| 64 | +- [Local-First Web Development with Replicache: Building smooth user experiences](https://shootmail.app/blog/local-first-web-development-with-replicache) by Shootmail |
| 65 | +- [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 |
| 66 | + |
| 67 | +_To Watch_ |
| 68 | + |
| 69 | +- [Svelte 5 Is Like React, But Better](https://www.youtube.com/watch?v=31CyquY8RNE) by Theo - t3․gg |
| 70 | +- [JavaScript framework reinvents itself… Did "runes" just ruin Svelte?](https://www.youtube.com/watch?v=aYyZUDFZTrM) by Fireship |
| 71 | + |
| 72 | +### Libraries, Tools & Components |
| 73 | + |
| 74 | +- [Svelte 5 testing example](https://github.com/PaoloTorregroza/weather-testing) is a good example project demonstrating how to test Svelte 5 applications with Vitest |
| 75 | +- [Origin UI - Svelte](https://originui-svelte.pages.dev/) is an extensive collection of copy-and-paste components for quickly building app UIs |
| 76 | +- [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 |
| 77 | +- [svelte-simple-router](https://github.com/dvcol/svelte-simple-router) is a client-side router made for Svelte 5 |
| 78 | +- [svelte-openai-realtime-api](https://github.com/flo-bit/svelte-openai-realtime-api) is a Svelte component for using the OpenAI realtime api |
| 79 | +- [FlyonUI](https://github.com/themeselection/flyonui) is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins |
| 80 | +- [Svelte-Next](https://svelte-next.codewithshin.com/) automates Svelte version updates |
| 81 | +- [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 |
| 82 | +- [Tzezar's datagrid](https://github.com/tzezar/datagrid) is an easy to use, easy to customize, datagrid made in Svelte 5 |
| 83 | +- [svelte-bundle](https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into single HTML files (with SSR!) |
| 84 | +- [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 |
| 85 | +- [Sveltick](https://www.npmjs.com/package/sveltick) is a lightweight traffic-tracking library for your Svelte apps |
| 86 | + |
| 87 | +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). |
| 88 | + |
| 89 | +Until next time 👋 |
0 commit comments