Skip to main content

What's new in Svelte: August 2024

Significant hydration improvements, customizable warnings, and a new API: `createRawSnippet`

Dani Sandoval

The ramp up to the Svelte 5 release has led to a bunch of huge improvements to both performance and customizability. Also in this month's round-up: some minor SvelteKit updates and a return of the Svelte Dev Vlog.

Let's dive in!

What's new in Svelte

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

  • Breaking: The names of the svelte/reactivity helpers have been updated to include a Svelte prefix (5.0.0-next.169, Docs #12248)
  • Branch effects now have better DOM boundaries - reducing bugs in {#each} blocks and during DOM manipulation (5.0.0-next.171 and 5.0.0-next.182, #12215, #12258, #12383)
  • Single-pass hydration has reduced DOM size and significantly improved hydration speed (5.0.0-next.179, #12335, #12339)
  • Breaking: Transitions now play on mount by default (5.0.0-next.177, #12351)
  • CSS can now be included in the <head> when the css: 'injected' compiler option is enabled. This makes it trivial to include styles when rendering things like emails and OG cards, as well as massively simplifying toy setups where you can't be bothered to figure out how to get CSS from the compiler into your server-rendered HTML (5.0.0-next.180, Docs, #12374)
  • Svelte will now warn in dev on {@html ...} block hydration mismatches (5.0.0-next.182, #12396)
  • The new warningFilter compiler option lets you disable certain warnings for the whole application without having to add svelte-ignore comments everywhere (5.0.0-next.186, #12296)
  • The new createRawSnippet API, allows low-level creation of programmatic snippets outside of Svelte templates (5.0.0-next.189, Docs, #12425)

What's new in SvelteKit and beyond

  • The HTML attributes enctype and formenctype are now respected for forms with use:enhance (plus, some other bug fixes in the CHANGELOG)
  • The cloudflare, cloudflare-workers, netlify and vercel adapters have all been updated to copy .eot, .otf, .ttf, .woff, and .woff2 font files when bundling (CHANGELOGs)
  • svelte-preprocess, the tool used in nearly every Svelte project, is now dependency free! The team has gradually reduced it from 44 dependencies in 5.0.0 down to zero in the latest release (Tweet)
  • prerendered redirects will now be appended to the _redirects file in the Cloudflare Pages adapter (adapter-cloudflare@4.7.0, #12199)

Community Showcase

Apps & Sites built with Svelte

  • The StackOverflow 2024 Developer Survey results site was built using Svelte. Even better, the results show that 73% of developers that used it want to keep working with Svelte (More info in this tweet)
  • azigy is a live, multiplayer quiz and trivia application
  • on-device-transcription is a ready-to-use, minimal app that converts any speech into text
  • Whispering is an open-source transcription application that provides global speech-to-text functionality
  • Frogment is an OpenAPI specification editor
  • SticAI Glance summarizes reddit post to actionable insights
  • Over Rice tracks the best halal carts around New York City
  • earbetter is an ear trainer and tools for playing and programming music and audio
  • Moonglow is a deep planetary simulation using GPGPU
  • opml-editor is an online OPML editor tailored for managing subscription lists more easily
  • Praxis is an AI-powered trading journal that analyzes your trades and uncovers patterns
  • Lokal lets you share your localhost with Public and https .local Address
  • formcrafts lets you create incredible forms like application forms, lead generation forms, surveys, payment forms, and more
  • Shootmail is a template-first mail platform with scheduling and analytics
  • Supersaw is Open Source Web Based Digital Audio Workstation (DAW)

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Read

To Watch

Libraries, Tools & Components

  • Sveaflet is an open-source Map component library
  • Svelte Magic UI are componetns built using Tailwind CSS, Tweened, Spring and Svelte Motion
  • Figblocks is an open-source UI component library for building Figma plugins with Svelte
  • VS Code Supports Custom Tab Labels (a good reminder for folks who haven't sent it up yet)
  • Storybook did a prerelease of @storybook/addon-svelte-csf with support for Svelte v5. If you're using it, share your feedback on their RFC: storybookjs/addon-svelte-csf#191
  • sveltekit-search-params released v3.0.0 with better types
  • optimistikit got revamped to fully support runes in v1.0.0 while keeping the @legacy tag if you still can't update from stores

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

Until next month 👋