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) andBigInt
(3.42.3) are now known globalsThere 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...
SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently (#2104)
adapter-node
now lets you add the Kit middleware to your own server for use with other middleware. You can also add middleware in dev mode with more improvements to come in this areaThe new
sequence
helper lets you chain together multiplehandle
callsA new
handleError
hook gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.adapter-node
can now listen on socket path (#2048)
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
Tauri with Standard Svelte or SvelteKit walks through how to setup Svelte with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications
Svelte - Web App Development Reimagined [An Intro to Svelte] is a great intro talk from the goto; conference
LevelUpTuts - Even More 5 Things I Like More In Svelte Than React highlights Svelte's approach to refs (don't need them), meta tags and more
State Management in Svelte Applications is a tutorial on how to use the Svelte state management store to manage state in Svelte applications
Migrating from Sapper to SvelteKit is a review and retrospective of ShipBit's migration from Sapper
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.