Skip to main content

What’s new in Svelte: July 2024

svelte/events, simpler elements and more optional options

Dani Sandoval

This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic’s CEO how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024.

Let’s jump in!

What’s new in Svelte

Below, you’ll find the highlights from the Svelte 5 release notes (now in Release Candidate):

  • You can now declare props in runes mode more succinctly using let props = $props() (5.0.0-next.167, #12201)
  • The new on import from svelte/events allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs, #11912)
  • The Component type now represents the new shape of Svelte components (5.0.0-next.143, #11775)
  • <svelte:document> has new activeElement and pointerLockElement bindings (5.0.0-next.150, #11879)
  • <svelte:element>, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)
  • render, mount and hydrate options are now actually optional if no properties are required (5.0.0-next.163, Docs, #12111)

What’s new in SvelteKit

The node and Cloudflare adapters got a few upgrades this month:

  • The BODY_SIZE_LIMIT environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (adapter-node@5.2.0, Docs, #11680)
  • Node servers can now listen to the sveltekit:shutdown event (replacing the more abrupt exit) that is emitted after the HTTP server has closed all connections (adapter-node@5.1.0, Docs, #12153)
  • The Cloudflare adapter will now only throw a _routes.json error when the file exists but there are no configured routes in svelte.config (adapter-cloudflare@4.5.0, #12360)

Community Showcase

Apps & Sites built with Svelte

  • Shootmail is an email template and content creation tool
  • wplatest automates your WordPress plugin updates across multiple websites
  • Svelte-MiniApps is a collection of bite-sized, user-friendly tools built with SvelteKit
  • Interior Render AI redesigns your interior with AI in seconds

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Read

To Watch

Libraries, Tools & Components

  • svelte5-commenter is a component demonstration for the common comments section
  • SSC (Speedy Svelte Compiler) is a super-fast Svelte compiler written in Rust

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

Until next month 👋