Skip to main content

What's new in Svelte: September 2021

StackOverflow's most loved web framework

Dani Sandoval

This month, Svelte was voted StackOverflow's most loved web framework, Tan Li Hau talked to Svelte Radio about his Svelte-filled YouTube channel, and SvelteKit made even more progress towards its 1.0 release!

New in Svelte

  • use:actions can now be used on <svelte:body> (3.42.0)
  • HTMLElement, SVGElement (3.42.2) and BigInt (3.42.3) are now known globals
  • There is less code in Svelte's output thanks to the following improvements in 3.42.2:
    • Whitespace is now collapsed in class and style attributes
    • Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component
  • Scaling is now accounted for in flip animations (3.42.2)
  • All <option>s in a <select> are now deselected when the bound value doesn't match any of them (3.42.2)

For a full list of features and bug fixes, check out the Svelte changelog.

SvelteKit Updates

Svelte maintainers are looking for help getting SvelteKit to 1.0. We've knocked out over 100 issues that were on the 1.0 milestone. There's only a couple dozen left and we'd love a hand making that list a bit shorter!

If you'd like to help, please consider working on any of the 1.0 milestone issues.

The focus this past month was on continuing to iron out any kinks, with well over 100 PRs merged. A few new features went in as well...

To see all updates to SvelteKit, check out the SvelteKit changelog.

Community Showcase

Apps & Sites

  • macos-web by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this Twitter thread
  • Brave Search is using Svelte
  • exatorrent is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
  • json2TsTypes is a simple tool which will convert your JSON to TypeScript Types/Interfaces
  • Histogram.dev generates histograms for each feature in a CSV
  • cybernetic.dev is a collection of data-centric UI experiments made while learning Svelte
  • LunaNotes is a Chrome extension to help with taking YouTube video notes
  • theia.games's built-in 3D environment editor lets you create a VR world with a menu built in Svelte
  • Ferrum is a music library and player available for Mac, Windows or Linux
  • Fluid Earth is an interactive WebGL application for visualizing Earth's atmosphere and oceans

Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better? Check out the list of open issues if you'd like to contribute to the Svelte Society rewrite in SvelteKit.

Educational Content

Libraries, Tools & Components

  • svelte-stripe-js is everything you need to add Stripe to your Svelte project. 100% SvelteKit compatible
  • svelte-steps is a customizable step component written in Svelte
  • simple-optics-module is an online open source optics tool for experimenting and teaching geometrical optics
  • inlang is an internationalization (i18n) tool for SvelteKit apps
  • Sveno is a component transpiler that transforms React components to Svelte components
  • svelte-useactions is a fully typed library for passing actions to components
  • Svelte-Element-Query is a 322b library/action for element queries
  • svelte-meta-tags is a plug-in that makes managing SEO easier in Svelte projects
  • svelte-domtree lets you visualize the DOM - similar to DOM tree in Chrome DevTools
  • Diffx, a cross-framework state management library, just added Svelte support
  • svelte-ionic-starter a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
  • demo-sveltekit-sanity is a starter kit for SvelteKit and Sanity, an open source React CMS

Check out the community site sveltesociety.dev for more templates, adders and adapters from across the Svelte ecosystem.

See you next month!

Want more updates? Join us on Reddit or Discord!