Skip to main content

What's new in Svelte: April 2023

Loads of new Svelte compiler features, plus Svelte Summit and SvelteHack

Dani Sandoval

Happy April, everyone! This month, we're covering all the new features in the Svelte compiler, some quality-of-life improvements in SvelteKit and a huge showcase (like always).

In core team news, Dominic Gannaway has joined Vercel to work on Svelte full-time! Dominic is a world-class expert on wringing performance out of javascript engines, on the DOM, on reactivity, on accessibility, and more! You might know him as the creator of the Inferno UI framework or Lexical, Meta's WYSIWYG editor. It'll be great to see his talents at work across the Svelte ecosystem 🌱

Don't forget! Svelte Summit Spring, Svelte's 6th virtual conference, will be happening on May 6th. Also, there's just two weeks left until the end of SvelteHack... It's a great opportunity to share your creations with the community and maybe even earn a prize!

Now let's jump into this month's changes...

What's new in Svelte

  • A bunch of new features are now available as of 3.56.0!
    • Add |stopImmediatePropagation event modifier for on:eventname (#5085, Docs)
    • Add axis parameter to slide transition (#6182, Docs)
    • Add readonly utility to convert writable store to readonly (#6518, Docs)
    • Add readyState binding for media elements (#6666, Docs)
    • Add naturalWidth and naturalHeight bindings to images (#7771, Docs)
  • Support <!-- svelte-ignore ... --> on components (#8082)
  • Inputs in a bind:group will clear when their value is set to undefined (3.56.0, #8214)
  • <input> values will now persist when swapping elements with spread attributes in an {#each} block (3.56.0, #7578)
  • Better warnings across the board - from noreferrer to aria rules (3.56.0)
  • Add svelte:document (3.57.0, #3310)
  • The style: directive will now take precedence over a style= attribute (3.57.0, #7475)
  • CSS units are now supported in the fly and blur transitions (3.57.0, #7623, Docs)

For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

What's new in SvelteKit

  • You can now get all cookies for a request with cookies.getAll (1.10.0, #9287, Docs)
  • Easily manage the submission status of (multiple) forms with the new exposed submitter parameter in use:enhance (1.12.0, #9425, Docs)
  • The default error page now has dark mode styles (1.13.0, #9460)
  • You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the announcement blog post

Community Showcase

Apps & Sites built with Svelte

  • Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
  • unplaneted is an interface for exploring very large space images
  • PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
  • papi lets you create prompts for AI models and share them with others with a unique link
  • Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
  • SQLite Playground lets you learn how SQLite runs and stores data in the browser
  • svgl is a beautiful library with SVG logos
  • Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
  • Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
  • Game On Or Not is a free web app that helps you organize sports with your friends
  • Sveltia CMS is a Git-based lightweight headless CMS

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch or Hear

To Read

Libraries, Tools & Components

  • @vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
  • Inlang is building i18n for SvelteKit and is looking for feedback
  • Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 πŸŽ‰
  • SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
  • Svelte Legos is a collection of essential Svelte Composition Utilities
  • svelte-stored-writable is a drop-in extension of Svelte's writable that additionally stores and restores its contents using localStorage.
  • svelte-virtual provides Svelte components for efficiently rendering large lists.
  • ChatGPT Clones and Starters

Thanks for reading! And don't forget to try your hand at the Svelte Hackathon πŸ§‘β€πŸ’»

As always, feel free to let us know if we missed anything on Reddit or Discord.

See ya next time!