Skip to main content

What’s new in Svelte: November 2022

Better forms, routes and inline styles across SvelteKit and Svelte

Dani Sandoval

It’s been a busy October for the Svelte community. use:enhance and Advanced Routes got some great improvements in SvelteKit while the Svelte compiler released a minor version to improve the day-to-day dev experience.

There’s also a huge showcase to cover... so let’s jump in!

What’s new in SvelteKit

  • The new update method for use:enhance lets you easily get back the default form behavior while augmenting it with your own logic (docs, #7083 and #7326)
  • [[optional]] parameters are now available for routing (docs, #7051)
  • goto now has invalidateAll to (re-)run all load functions belonging to the new active page (docs, #7407)
  • config.kit.paths.base is now used in adapters looking for static assets - fixing 404 issues across adapter-netlify, adapter-vercel, adapter-cloudflare, and adapter-cloudflare-workers (#4448)

Breaking changes:

  • Errors will now be thrown when routes conflict (#7051)
  • The global fetch override has been removed when prerendering (#7318)
  • Route IDs have been prefixed with / (#7338)

Svelte changes

  • New accessibility warnings, a11y-click-events-have-key-events and a11y-no-noninteractive-tabindex, will now warn when your components lack required key events or tabindex. While a11y-role-has-required-aria-props will no longer warn when elements match their semantic role (3.51.0)
  • --style-props are now supported on <svelte:component> and <svg> (3.51.0, Component Example: Before and After, SVG Example: Before and After)
  • “nullish” values for component event handlers are now supported (3.51.0, Example)
  • Scoped styles can now be applied to <svelte:element> (3.51.0, Example)
  • You can now use important in inline style tags: style:foo|important (3.52.0, #7365)
  • A warning will now be thrown when using <a target="_blank"> without rel="noreferrer" (3.52.0, #6188)

Tom Smykowski also released a great summary of all the changes in 3.52.0! For all the changes to the Svelte compiler, including upcoming changes, check out the CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

  • AttendZen is an event management and marketing platform for in-person, virtual or hybrid events
  • Gram Jam is a challenging daily word game using SvelteKit
  • Collabwriting is an actionable knowledge base for your team
  • Dazzle is a Puzzle Game made with Svelte & DallE
  • Figma Autoname plugin automatically names your Figma layers in one click
  • DECK is powerful and high performant local web development studio for MacOS, Ubuntu and Windows
  • Asm editor is a webapp to write and run m68k assembly code
  • Nucleus is a text editor featuring a clean and easy to use user interface inspired by Visual Studio Code, Atom, Fleet, and others
  • Observer is a frontend for Arth Panel, an open-source & self-hosted minecraft server panel
  • .PLAN is a cloud-based notetaking app with markdown and section support
  • Stablecog is a simple, free & open source AI image generator
  • FreeSpeech AAC is a free and open-source assistive communication app written in TypeScript
  • sqrdoff is a dots and boxes to enjoy playing with friends
  • itty is a fresh take on the traditional link-shortener
  • splits lets you track your splits, calculate your race pace, become a better athlete
  • Weaver is an application for creating weave drafts

Learning Resources

To Watch

To Read

Libraries, Tools & Components

  • Threlte is a component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps. It’s being featured again to highlight the new “Playground” button in its examples
  • Svelte Turnstile is a library to integrate Cloudflare’s Turnstile (a new CAPTCHA alternative) into a Svelte app
  • ActionStore allows you to push data directly into Svelte stores via ActionCable
  • SvelteKit + <is-land> is an experiment with partial hydration in SvelteKit using @11ty/is-land
  • Svelte Color Select is an Okhsv Color Selection component for Svelte using OKLab perceptual colorspace
  • svelte-awesome-color-picker is a highly customizable color picker component library
  • rx-svelte-forms creates reactive Svelte forms inspired by Angular reactive forms
  • svelte-wc-bind enables two way data binding in Svelte web components
  • svelte-preprocess-style-child-component allows you to style elements inside a child component using similar syntax as CSS Shadow Parts
  • unplugin-svelte-components allows for on-demand components auto importing for Svelte
  • sveltekit-search-params aims to be the fastest way to read AND WRITE from query search params in SvelteKit
  • svelte-crop-window is a crop window component for images and videos that supports touch gestures (pinch zoom, rotate, pan), as well as mousewheel zoom, mouse-dragging the image, and rotating on right mouse button
  • Open Graph Image Generation lets you generate open graph images dynamically from HTML/CSS without a browser in SvelteKit
  • Svelte Tap Hold is a minimalistic tap and hold component for Svelte/SvelteKit
  • svelte-copy‘s new version lets you customize the events that cause text to be copied to the clipboard

UI Kits, Integrations and Starters

Fun ones

That’s it for this month! Let us know if we missed anything on Reddit or Discord

See ya next month 👋