Skip to main content

What’s new in Svelte: December 2024

A better CLI and a bunch of UI libraries now support Svelte 5

Dani Sandoval

I can’t believe it’s already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉

As we look forward to the next year and watch the Svelte team do 24 features in 24 days, let’s dive into what’s new in the past month...

What’s new in Svelte

The bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you’re noticing anything weird, make sure you upgrade to the latest version and, as always, check out the CHANGELOG for all the bug fixes.

The features since last month can be found below:

  • ContentVisibilityAutoStateChangeEvent has been added to element definitions (5.2.5, MDN Docs, #14373)

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

  • isActionFailure is a new helper method to check if a variable is an instanceof ActionFailure - helpful for debugging parsing of user input (2.8.0, #12878)
  • const load = ... declarations will now be typed automatically (svelte2tsx-0.7.23, #2540)
  • The CLI will now include a jsconfig.json in the ‘no type checking’ template (0.6.2, #290)
  • When installing dependencies, the CLI will display the package manager’s output (0.6.3, #305)
  • A short description will now be shown for each add-on in the CLI menu (0.6.5, #299)
  • Instance types will now be provided automatically in Svelte 5 (svelte2tsx-0.7.23, #2553)
  • A code lens indicator for “runes mode” will now appear atop a file when detected - “legacy mode” when not (language-server-0.17.4, #2554)

Community Showcase

Apps & Sites built with Svelte

  • Unsubscribe is an interactive site that makes fun of how hard it is to unsubscribe from things on the internet these days
  • Dealcrane helps technology shoppers find discounts across popular internet shopping sites
  • Raw Web is a search engine for indexing the content of independent, especially personal, websites
  • Jovian Moon’s personal site features an interactive rocket ship to fly you straight to Jupiter (or anywhere else you want to go)
  • Font Preview makes it easy to analyze and explore font characters in the browser
  • Dunks & Threes is a professional basketball analysis platform that provides data-driven NBA predictions
  • AdresseDuBien is a small utility to find addresses for real estate ads (for France) with a Libre Map implementation
  • PixelAttack takes an image, pixelizes it and makes the pixels fight each other
  • NeoHtop is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI
  • WebVM is a Linux virtual machine that runs in your browser
  • Sveltris is Tetris built entirely in the Svelte REPL

Learning Resources

Featuring Svelte Contributors and Ambassadors

This Week in Svelte

  • Ep. 83 — You might not need an effect
  • Ep. 84 — manifest.build
  • Ep. 85 — @sheepdog/svelte

To Read

Libraries, Tools & Components

Component Libraries

  • shadcn-svelte now supports Svelte 5 and has brand new docs to go with the update
  • Zag now supports Svelte 5
  • Skeleton V3 is now in beta (and, as expected, supports Svelte 5)
  • Storybook 8.4 now supports Svelte 5 and CSF natively with component testing built-in

Icon Libraries

  • svelicon converts Iconify SVG icons to type-safe components with one command
  • moving icons is a collection of animated icons based on the lucide icon library
  • Monicon is an all-in-one icon library that provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome

Everything Else

  • Svelte Multitone Image is a simple image renderer to apply multitone effects for Svelte
  • number-flow is a component to transition, format, and localize numbers
  • sveltednd is a lightweight, flexible drag and drop library for Svelte 5 applications
  • ShadEditor is a highly extensible text editor for svelte made with TipTap and ShadCN UI
  • Tipex is an advanced rich text editor based on Tiptap and Prosemirror
  • svelte-bundle is a tool for bundling Svelte components into a single HTML file
  • svelte5-router is an SPA router that allows you to divide & conquer your app with nested routers
  • @sheepdog/svelte is a library to manage async tasks and concurrency with ease.

That’s it for this huge month in Svelte! Let us know if we missed anything on Reddit or Discord.

Until next time year! 👋