Skip to main content

What's new in Svelte: March 2024

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

Dani Sandoval

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

To Read/Watch

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 👋