Skip to main content

What's new in Svelte: April 2024

Svelte Summit Spring on April 27! Plus: reactive `Map`, `Date` and `Set`

Dani Sandoval

Spring is just around the corner (for half the globe at least), which means Svelte Summit Spring is coming soon! The event will be streamed on the Svelte Society YouTube channel on April 27.

Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We'll get into them all below, so let's jump right in!

What's new in Svelte

Svelte 5 is in preview and gets closer to release every day. Below, you'll find some highlights from its changelog:

  • The new Map, Date and Set classes can now be imported from svelte/reactivity and used just like their native counterparts to fit into Svelte's reactivity model (5.0.0-next.79, Docs, #10803, #10622, #10781)
  • state/derived/props can be explicitly exported from components again (5.0.0-next.62, #10523)
  • bind:value now allows for a dynamic type attribute - fixing issues with common input bindings (5.0.0-next.66, #10608)
  • SSR HTML mismatch validation has been improved and provides clearer error messages (5.0.0-next.69, #10658)
  • Breaking: Slots inside templates with a shadowrootmode attribute are now preserved (5.0.0-next.73, #10721)
  • Breaking: The $props() no longer accepts a generic type argument. Instead, component authors should type their props like any other variable declaration (5.0.0-next.76, #10694)
  • The new $bindable rune allows parents to :bind to a component's prop in addition to using them as regular props (Docs, #10851)
  • The webkitdirectory DOM boolean attribute is now supported (5.0.0-next.81, #10847)
  • Form resets are now taken into account for two way bindings (5.0.0-next.82, Docs, #10617)

What's new in SvelteKit

  • adapter-vercel now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (@sveltejs/adapter-vercel@5.2.0, Docs, #11987)
  • adapter-vercel's build output files now include framework metadata - improving observability on the platform (@sveltejs/adapter-vercel@5.2.0, #11800)
  • adapter-cloudflare and adapter-cloudflare-workers now implement adapter.emulate which allows the adapter to emulate the Cloudflare platform during dev and preview (#11732)
  • Breaking: adapter-node now shuts down gracefully and supports the new IDLE_TIMEOUT and SHUTDOWN_TIMEOUT environment variables (@sveltejs/adapter-node@5.0.1, Docs, #11653)
  • Breaking: The default value of precompress in adapter-node is now true - making sites faster by default (@sveltejs/adapter-node@5.0.0, Docs, #11945)
  • Google Cloud is now supported in adapter-auto without any additional configuration (@sveltejs/adapter-auto@3.2.0, Docs, #12015)

For all the changes in SvelteKit, including bug fixes and adapter-specific changes check out the CHANGELOGs in each of the packages.

Community Showcase

Apps & Sites built with Svelte

  • notepad is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
  • Tokenbase is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks.
  • MelloOS is a fake OS desktop in the style of Windows 95
  • PowerHound is an app for tracking snow conditions across Colorado's ski resorts and backcountry
  • ProductSurveys gathers user feedback directly inside your product
  • WAIfinder is an interactive map shows entities operating in the AI industry in the UK
  • talkmedown is an emergency landing survival game using SvelteKit UI and Three.js graphics.
  • Bird Flapping is that game with a flapping bird (not to be confused with FlappyBird)
  • Minesweeper FUNNYMODE is minesweeper, but FUNNY
  • Routickr is a habit-tracking app with Firefox and Chrome extensions
  • immich is a self-hosted photo and video management solution

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Read/Watch

Libraries, Tools & Components

  • Svisualize is a VS Code Extension that visualizes your components as you code
  • Neel/UI is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
  • BLICKCSS is a small (~30kb) CSS library to build great websites and web apps quickly and easily

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

Until next month 👋