What’s new in Svelte: January 2025

From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there’s even more to look forward to... like the 10th Svelte Summit! Join the Svelte community online or in-person in Barcelona: May 8th and 9th.

Now let’s get to the news 👀

What’s new in Svelte

Snippets can now be exported from module scripts (5.5.0, Docs, #14315)
defaultValue and defaultChecked are now supported for inputs (5.6.0, Docs, #14289)
The loose parser mode creates a more modern AST for developer tools to consume (5.13.0, Docs, #14691)
A new “worker” exports condition helps better support bundling for worker-based environments (5.15.0, #14779)
The class attribute can now be an object or array, using clsx (5.16.0, Docs, #14714)

New/Updated Syntax

<svelte:boundary> is a new special element that can capture errors that occur from within its subtree during client rendering (5.3.0, Docs, #14211)
#each is now supported without as (5.4.0, Docs, #14396)
The new Spring and Tween classes in svelte/motion make it even easier to build custom animation (5.8.0, Docs, #11519)
The new outro option in unmount will play transitions before the component is removed from the DOM. (5.13.0, Docs, #14540)
The $inspect.trace rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (5.14.0, Docs, #14290)

Reactivity APIs

createSubscriber creates reactive values that depend on subscriptions (5.7.0, Docs, #14422)
The reactive MediaQuery class creates a media query and provides a current property that reflects whether or not it matches (5.7.0, Docs, #14422)
Getters and setters can now be bound to with bind (5.9.0, Docs, #14307)
The svelte/reactivity/window module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (5.11.0, Docs, #14660)

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

The new init hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (2.10.0, Docs, #13103)
The new transport hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (2.11.0, #13149)
The new $app/state module replaces the existing $app/stores module but using Svelte 5 state. The migrate tool in the CLI/language tools have been updated to match (2.12.0, Docs, #13140)
bundleStrategy lets you choose between 'split', 'single' and 'inline' output options for JS and CSS files (2.13.0 and 2.15.0, Docs, #13173 and #13193)
The new sveltekit-adapter add-on for the Svelte CLI (sv) installs and replaces existing SvelteKit adapters (Docs, #346)
The language tools extensions will now make use of loose Svelte parser and provide better intellisense (109.4.0, #2631)

Adapter Updates

adapter-auto has added support for the bun language server (3.3.0, #12854)
adapter-cloudflare-workers now supports wrangler.json config files (2.7.0, #13151)
adapter-cloudflare will now generate an .assetsignore file for use with Cloudflare Workers Static Assets (4.9.0, #13109)

Community Showcase

Apps & Sites built with Svelte

Tokeko is an educational platform designed to help users understand and learn about different types of parsers, grammar structures, and parsing techniques
QuickFlags is a fast paced, simple, flag knowledge game
Hotspotter is an incentivized crowdsensing system that collects, maps, and visualizes WiFi and cellular data to pinpoint hotspots and dead zones for the effective visualization of network coverage
Writastic is an AI social media writing assistant to optimize your content with the best strategies of successful creators
Walle is a macOS chatbot app that lets you interact with Claude, GPT, and Gemini simultaneously
Fli.so is a free, modern open-source link shortener
VRDB is a comprehensive database for Meta Quest Store, App Lab, and VR games
sv-resize-image resizes images using just the browser
WickGPT is an online tool to generate fake clips of chatGPT responses
other.supply is a virtual vinyl shop that simulates the record-flipping experience

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte at Bloomberg (feat Julian Burgess) and Scott Tolinski on Svelte 5 Local First Development by Svelte Radio
">Rich Harris’ North Star at JSNation US 2024
">Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot by Stanislav Khromov
">Svelte 5 Is Here! and ">View Transitions Are More Powerful Than You Think by Syntax

This Week in Svelte

">Ep. 86 — Tabs component
">Ep. 87 — GPU rendered components with svader
">Ep. 88 — Live coding local storage

To Read

Building accessible sites with SvelteKit: seven practical tips by Antonio Sarcevic
How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data by Yuki Ishii
Svelte Job’s Svelte Salaries Report shows average and median salaries across remote, non-remote positions, locations, and seniority levels

To Watch

">Build & Launch a Svelte Website in Just 15 Minutes! by NAD LABS
">The Magic of Svelte by Jürg Hunziker, Vendure Conf 2024

Libraries, Tools & Components

The Svelte docs are now available in an LLM-friendly format (shout out to Stanislav Khromov for svelte-llm)
svelte-mainloop is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component (Reddit)
bsky-comments-svelte is a simple customizable component to add comments to your website using Bluesky
Svelte Mini Router is a declarative, minimal SPA router for Svelte 5, without SvelteKit
svelte-firebase-state simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data
monoco-svelte lets you create custom (squircle) corners and borders for Svelte components
svelte-audio-waveform transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more
Svader creates GPU-rendered Svelte components with WebGL and WebGPU fragment shaders