Skip to main content

"What's new in Svelte: November 2021"

Over 5000 stars to light up the showcase

Dani Sandoval

With SvelteKit crossing the 80% complete mark, over 5000 stars on GitHub, and now having more usage than Sapper, there's never been a better time to try it out! Many in the community have, making for quite a large showcase this month...

Also, don't miss out on Svelte Summit on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀

Now onto what's new!

New in Svelte and SvelteKit

  • svelte.dev now runs on SvelteKit alongside sveltesociety.dev. svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
  • A new compiler option, enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in .svelte templates (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)
  • The Svelte Language Tools now support reading the configuration of the VS Code CSS settings (#1219)
  • vite-plugin-svelte added a new experimental.prebundleSvelteLibraries option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of svelte.config.js. Please test it out and give us feedback!
  • SvelteKit will only route endpoints on the client, unless marked as rel="external" - reducing the size of the client JS and making it easier to refactor the router in the future (2656)
  • SvelteKit no longer supports Node 12 (2604)
  • SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR

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

Community Showcase

Apps & Sites

  • Tangent is a clean and powerful notes app for Mac & Windows
  • The Pudding is a digital publication that explains ideas debated in culture with visual essays - rebuilt in SvelteKit
  • Power Switcher is an interactive overview of the development of the power supply in Switzerland, as energy sources migrate to cleaner sources
  • Sublive is a new way of making music by connecting musicians all over the world with a low-latency and high-quality audio network
  • Vibify helps you find hidden playlists within your music using your Spotify listening history
  • Browse Marvel Unlimited by Year is a SvelteKit site to see what issues are available on Marvel Unlimited for a given year
  • Files, a modern file explorer for Windows, has a new site rebuilt with SvelteKit
  • lil-hash is a simple URL shortener that produces easily rememberable and speakable shortened URLs
  • PWA Haven is a collection of small, fast, simple PWAs to replace native OS apps
  • DottoBit is a multi-color 16-bit drawing program with URL sharing built-in
  • Former Fast Document for Print is an invoice generator with beautiful designs, abilities for international languages and auto calculation
  • Helvetikon is a community maintained dictionary for the Swiss German language
  • Palitra App is a search-based color palette generator

Podcasts Featuring Svelte

  • Svelte Radio dives into the tech behind the recently released Svelte Summit website and a bunch of other fun stuff!
  • PodRocket, LogRocket's podcast, talks Svelte with Rich Harris
  • PodRocket also dove deep into Elder.js with Nick Reese
  • Web Rush and Rich Harris talk about the differences between a SPA and MPA, what role the server rendering plays, what client side hydration is, and the state of modern tooling for developing an SPA or MPA
  • devtools.fm talks with Rich Harris about developing engaging data visualizations and building the tools of tomorrow

Educational Content

Libraries, Tools & Components

  • svelte-adapter-azure-swa is an adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering
  • Inlang is a localization and internationalization toolkit that now supports SvelteKit
  • svelte-translate-tools extract/generate/compile translation files for your Svelte App at build time
  • @egjs/svelte-infinitegrid lets you implement various grids composed of different card elements whose sizes vary
  • svelte-reactive-css-preprocess makes it easier to update css variable values whenever your component state changes
  • Sveltegen is a CLI for simple and easy creation of actions, components, and routes
  • svelte-advanced-multistep-form helps to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way
  • gQuery is a GraphQL Fetcher & Cache for SvelteKit
  • date-picker-svelte is a date and time picker for Svelte
  • TwelveUI is a Svelte component library with accessibility built-in
  • svelte-outclick is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
  • svelte-zero-api lets you use SvelteKit APIs like client functions - with support for TypeScript
  • svelte-recaptcha-v2 is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
  • Svelte Body lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
  • svelte-debug-console is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
  • SVEO is a dependency-free approach to declare metadata on SvelteKit pages
  • @svelte-drama/suspense is a Svelte component that implements the core idea of React's <Suspense>. Also check out SWR for Svelte to make refetching even easier.
  • sveltekit-adapter-browser-extension is an adapter for SvelteKit which turns your app into a cross-platform browser extension

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

Looking for more Svelte goodness? Join us on Reddit or Discord!