What's new in Svelte: March 2024

Nested CSS support and a much cleaner client-side API for Svelte 5

This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better.

Lots to showcase too... so let's dive in!

What's new in Svelte

As you may already have heard, Svelte 5 is in preview. In the meantime, Svelte 4 (@latest) has had one bugfix. The Svelte 5 changelog has quite a few updates, though:

• breaking: $derived.call is now $derived.by (5.0.0-next.54, Docs, #10445)

• Destructuring derived object properties will now keep fine-grain reactivity (5.0.0-next.55, Docs, #10488)

• The new hydrate method makes hydration-related code treeshakeable (5.0.0-next.56, Docs, #10497)

• Nested CSS is now supported, along with better support for :is(...) and :where(...) (5.0.0-next.57, #10490)

• breaking: The client-side API has been simplified by removing createRoot, adjusting the mount/hydrate APIs and introducing unmount (5.0.0-next.58, Issue#9827, #10516)

For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out the CHANGELOG on main.

What's new in SvelteKit

Mostly bug fixes, this month. Most notably is a fix to prevent stale values after navigation (2.5.1, #11870).

Adapters can also now use an emulate function to provide dev and preview functionality (2.5.0, Docs, #11730). This will allow for an improved experience developing for Cloudflare in the near future (11732).

For all the changes in SvelteKit, check out the CHANGELOG.

---

Community Showcase

Apps & Sites built with Svelte

• Wishgram is a tool to generate handwritten wishing cards

• rfidify is a Raspberry PI RFID reader that plays things on Spotify

• listn.fyi is a fun and easy way to share what music you're currently into

• Meowrite is an AI writing tool for cover letters, essays and more

• Photo Multitool is a free set of online tools for manipulating photos

• sveltekit-weather-app is a gorgeous weather app made with SvelteKit

Learning Resources

Featuring Svelte Contributors and Ambassadors

• How to make a great framework better? - Svelte 5 with Rich Harris by Prismic

• Svelte 5 is a beast, but is it worth switching? by Syntax.FM

To Read/Watch

• Upgrading to Svelte 5 by Mike Stachowiak

• Building with GPT4 and Svelte by Lev Miseri

• Mini site for recommending songs using Svelte & Deno by Bryce Dorn

• Effortlessly Sync Your SvelteKit Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs by Launchnow

• How to build an editable website in 15 minutes in 2024 by Svelte Headless

• Local-First LiveView Svelte ToDo App by Tony Dang

Libraries, Tools & Components

• PaneForge provides components that make it easy to create resizable panes in your Svelte apps

• Svelte UX and LayerChart now include theme support via semantic and state classes

• Huly Platform is a robust framework designed to accelerate the development of business applications, such as CRM systems

• svelte-marquee is a beautiful marquee component for Svelte

• Just Ship is a SvelteKit auth boilerplate for Svelte 5

• cells is a functional & reactive library for Svelte

• Svelte Headless is an example site showing how to create a simple blog site that plugs into a headless CMS

• Sugar.css is a semantic, accessible, lightweight CSS framework

• apple-svelte is a component library for Svelte based on Apple's Human Interface design language

• SvelteKit SSE provides an easy way to produce and consume server sent events.

• Formsnap, an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved its docs

That's it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋