Skip to main content

What’s new in Svelte: May 2023

New Ambassadors, a new ESLint plugin and a whole bunch of SvelteHack submissions

Dani Sandoval

Before we dive into the updates, there’s a few announcements worth mentioning at the top:

New Svelte Ambassadors

Regular features of this newsletter and all-around great content creators for Svelte JoyOfCode and HuntaByte have been appointed as Svelte Ambassadors. Ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement!

SvelteHack winners will be announced May 6th

In a just a few days, we’ll find out who won SvelteHack - the Svelte Hackathon that took place between February 17th and April 17th. Tune in to Svelte Summit on May 6th to see if your favorite project was chosen 👀

Lots of submissions to the hackathon are featured in this month’s showcase... but first, let’s see what’s new!

What’s new in Svelte

  • style blocks now support CSS @container queries (3.58.0)
  • bind:innerText is now available for contenteditable elements (3.58.0)
  • A new accessability warning, a11y-interactive-supports-focus will now warn when interactive elements are not focusable (3.58.0)

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

What’s new in SvelteKit

  • When hot module reloading (HMR) is enabled, the page will reload after an error is fixed (1.14.0, #9497)
  • Two apps loaded into the same html page can now be loaded simultaneously in “embedded” mode (1.15.7, #9610)
  • Vite’s compilation will now log warnings for packages that use the svelte field to resolve Svelte files differently than standard Vite resolve ([email protected], [email protected])

What’s new in Language Tools

  • Support for <svelte:document> (#1958) and intellisense report for new bindings (#1957) (107.3.0)
  • The new fix-all menu option for the “Quick fix...” makes it easy to “Add all missing imports” and other detected errors (107.3.0, #1939)
  • We have a new and better official ESLint plugin! Previous support for Svelte in ESLint did not handle the template AST well, resulting in false positive/negatives and a high barrier to custom ESLint rules. This new official version is based on ota-meshi’s svelte-eslint-parser and is ready for prime time. Try it out and share your feedback!

Community Showcase

Apps & Sites built with Svelte

  • Sound of War is a storytelling data visualization project to help understand the scale of destruction in Ukraine
  • Syntax FM’s swag shop is now built with SvelteKit, PlanetScale and Prisma
  • Appreciation Jar is your own private space where you can send encouraging and appreciative messages to your partner
  • Japanese Jouzu is a Japanese sound and symbol learning app
  • MarkMyImages is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
  • Immich is a self-hosted photo and video backup solution directly from your mobile phone
  • Earbetter is an ear training game and tools for playing and programming music and audio
  • Tune Twisters is a guessing game for songs... in reverse
  • ResponseHunt is a mystery game based on browser requests - use your programming skills to get to the “golden” response
  • Wolfensvelte 3D is a Svelte “port” of Wolfenstein 3D
  • Code Solving teaches how to solve problems with code
  • Make Bookmarklets is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
  • GeniePM is an AI tool to help Product Managers write user stories and requirements
  • Bitesized News is an AI that delivers news digests and responds to questions via chat
  • Open Tunings is a place to explore alternative guitar tunings without having to retune your guitar
  • BlinkSMS is a text alert tool for Stockholm Student Housing to help with booking laundry times
  • Dev Links helps dev showcase multiple links in a single place - similar to Linktree and Kofi
  • Audiogest is a tool to convert speech to text & summarize any audio
  • MineSweep is a rendition of Minesweeper built with Svelte and JavaScript
  • Biolytics lets you import your lab tests to see all your lab tests in one place
  • Zero share is a secure P2P file sharing using WebRTC
  • Svelte lab is a sandbox for creating and sharing SvelteKit projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch

To Read

Libraries, Tools & Components

  • Sveltris lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
  • SwiftMarket is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
  • Svelegante is a Classy writable store for Svelte
  • Table Generator lets you create, design and customize your own tables tables online using a graphical editor
  • Svelte Animated Headline is an animated headline component that can grab attention in an informative way
  • SvelteKit Music App Example demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
  • Socio is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
  • Flowbite Svelte is an official Flowbite component library for Svelte
  • Wundergraph, a backend for frontend framework, just released their Svelte Query client
  • Lucia just reached 1.0 for their simple and flexible auth library for SvelteKit
  • svelte-stepper is a simple library for building animated stepper flows with Svelte

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

See ya next time!