What's new in Svelte: April 2023

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

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)

---

Community Showcase

Apps & Sites built with Svelte

• Peerbeer let's 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

• Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich on the svelte.dev Blog

• Dev Vlog: Rich Harris shows us what's new in Svelte and Kit, March 2023 from Svelte Society

  • If you missed this one live, check out the next one - scheduled for April 5th

• Svelte Society - London February 2023

• Svelte Radio episodes from this month:

  • We all live in a Svelte Submarine

  • Building furniture using Svelte with Bert Bengtson

  • Svelte Hackathon Announcement

  • LevelUpTuts 6 months later with Scott Tolinski

  • I got a cold and had fever dreams about React 😱

• This Week In Svelte videos:

  • 2023 March 10 - New prompts! Underline your links!

  • 2023 March 17 - More a11y warnings! How to: Dynamic Form Actions!

  • 2023 March 23 - SvelteKit 1.13.0, Vitest and Playwright overview

To Watch or Hear

• Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0 by Joy of Code

• Why Is Svelte.js so Popular? by Prismic

• Interactive Tables in SvelteKit with TanStack Table by hartenfellerdev

• SvelteKit + GraphQL with Houdini by Aftab Alam

To Read

• Thoughts on Svelte by Ty Hopp

• Storybook on why (and how) it supports SvelteKit

• Svelte Authentication Tutorial with Authorizer by The Thinks

• Use Zod to Validate Forms on the Server with SvelteKit by Ross Robino

• Do I need a sitemap for my SvelteKit app, and how do I create it? and Complement zero-effort type safety in SvelteKit with Zod for even more type safety and Configuring Turborepo for a SvelteKit monorepo by Thilo Maier

• Adding page transitions in SvelteKit by Josh Collinsworth

• E2E testing with SvelteKit and Playwright and Why you should use TypeScript in your next SvelteKit projects by Justin Ahinon

• Understanding the structure of a SvelteKit project by Igor Nowosad

• Secure Authentication in Svelte using Hooks by Brewhouse Digital

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

  • chatwithme.chat is an open source ChatGPT UI

  • SlickGPT is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte

  • AI Chat Bestie is an unofficial ChatGPT app

  • chatgpt-svelte is a simple UI for the ChatGPT Open AI API

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!