What’s new in Svelte: November 2024

In case you missed the announcement post, the brand new omnisite or the maintainers shipping it LIVE during Svelte Summit... Svelte 5 is out!

Also announced at Svelte Summit was SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes). 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

If you’ve only recently migrated to Svelte 5, 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)
• hidden until-found and beforematch are now available on DOM elements (5.0.0-next.266, MDN Docs, #13612)
• Breaking: State mutations are not allowed in logic block expressions (5.0.0-next.269, #13625)
• getContext() is now allowed within $derived runes (5.1.0, Docs, #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.

What’s new in SvelteKit, Svelte CLI and Language Tools

• adapter-auto now supports the Bun package manager (3.3.1, #12854)
• 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 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

Apps & Sites built with Svelte

• DocumentCloud is an all-in-one platform used by newsrooms around the world to manage primary source documents
• Chord is an app for recording podcasts and interviews in high quality
• Monokai.pro uses Svelte 5 now (See the Reddit Post for more details)
• svelte audio visualizations are useful for visualizing voice input and output
• avi12’s YouTube extensions are great examples of how Svelte can be used in Chrome extensions
• Multy is a simple tool that allows you to create a list of URLs, and share it with a single link
• BlackJack is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes

Learning Resources

Featuring Svelte Contributors and Ambassadors

• Svelte Summit Fall 2024 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 by Syntax
• Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions by Stanislav Khromov

This Week in Svelte

• Ep. 79 — Changelog, Global/shared state, Kampsy-ui
• Ep. 80 — Changelog, formgator
• Ep. 81 — Changelog, Inertia.js
• Ep. 82 — Changelog, Migration guide

To Read

• Speed of Svelte reactive bindings vs keyboard events by Zell Liew
• SvelteKit + Passkeys by Passlock
• Local-First Web Development with Replicache: Building smooth user experiences by Shootmail
• 10 game-changing tools that level up Svelte developers in 2025 by Sébastien Conejo

To Watch

• Svelte 5 Is Like React, But Better by Theo - t3․gg
• JavaScript framework reinvents itself… Did “runes” just ruin Svelte? by Fireship

Libraries, Tools & Components

• Svelte 5 testing example is a good example project demonstrating how to test Svelte 5 applications with Vitest
• Origin UI - Svelte is an extensive collection of copy-and-paste components for quickly building app UIs
• 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 is a client-side router made for Svelte 5
• svelte-openai-realtime-api is a Svelte component for using the OpenAI realtime api
• FlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins
• Svelte-Next automates Svelte version updates
• 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 is an easy to use, easy to customize, datagrid made in Svelte 5
• svelte-bundle is a tool for bundling Svelte components into single HTML files (with SSR!)
• 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 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 or Discord.

Until next time 👋