Skip to main content

What’s new in Svelte: March 2023

SvelteHack, post-1.0 SvelteKit improvements and a huge showcase

Dani Sandoval

March is coming in hot with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out last week’s blog post for more details.

Svelte Society also launched SvelteHack last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!

And, if you haven’t heard already, there’s going to be another Svelte Summit! Head over to SvelteSummit.com and sign up for the newsletter to get updates about the next event 📬

Now let’s jump into this month’s changes...

What’s new in SvelteKit

  • $app/paths can now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (1.4.0, #8838)
  • Adapters can now be configured at the route level (1.5.0, Docs, #8740)
  • The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (1.5.0,Docs, #8710)
  • OPTIONS are now available within the server method (1.6.0, Docs, #8731)
  • Richer error messages have been added for invalid exports (1.7.0, #9055)
  • Streaming promises are now available for server load functions (1.8.0, Docs, #8901)
  • A new configuration option, preloadStrategy, helps tune preloading to avoid import ‘waterfalls’ on certain browsers (1.8.4, Docs, #9179)
  • The new paths.relative option can control interpretation of paths.assets and paths.base (1.9.0, Docs, #9220)

What’s new in Svelte and Language Tools

  • The REPL on svelte.dev now supports the exports field in package.json (#445)
  • The new Call Hierarchy feature lets you see where a function or a class is called and follow the call stack up (extensions-107.1.0, #1889)
  • declarationMap support has been added to the Svelte extension. Now “go to definition” on .svelte files will navigate to the source code when a library has declaration maps (extensions-107.1.0, #1878)
  • TypeScript Inlay Hints support is now available via the Svelte Extension. Enable them with javascript.inlayHints.* or typescript.inlayHints.* (extensions-107.1.0, #1855)

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

Community Showcase

Apps & Sites built with Svelte

  • win32.run is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
  • Svelte Radial Menu is a radial menu experiment - based on Rauno’s radial menu
  • apod color search lets you search for astronomy picture of the day (APO) photos by color
  • SvHighlight is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
  • Limey lets you create beautiful one-page websites in minutes
  • a/links is an extension for short, composable bookmarks
  • Sprint Cards is a design challenge generator
  • Plought is a tool to reduce noise in decision making
  • ArcOS-Frontend is a rewrite of the Arc operating system’s frontend in Svelte
  • Poxi is powering the user-made web with a drag-and-drop, drawable website editor that’s easy to collaborate in
  • demo-threlte-scroller-rocinante is a “scrolly telling” proof-of-concept that combines svelte-sequence with Threlte
  • Phonics + Stuff is a set of resources for learning & teaching phonics

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch or Hear

To Read

Libraries, Tools & Components

UI Kits and Components

  • Pink is a framework agnostic design system from Appwrite
  • quick-pick is a simple search tool where you control the search catalog
  • Grail UI offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience
  • svelte-image-comparison is a Svelte component to compare image or canvas elements
  • simple-font-select is a simple font select component that exposes all local fonts as CSS font families
  • svelte-datatables-net is a Svelte component that turns data into an interactive HTML table
  • svelte-flextable is a toolkit for creating server-side processing datatable components with Svelte
  • svelte-algolia-instantsearch is a community-developed wrapper around instantsearch.js for Svelte
  • svelte-deep-zoom is a Svelte component to render interactive Deep Zoom images (tiled image pyramids)
  • SVoast is a simple toast component for Svelte
  • svelte-otp is a simple lightweight OTP input component for svelte
  • trace-svelte is a line by line highlighter for Svelte
  • Svelte Auth UI is a set of authentication components for Svelte
  • KitDocs is a documentation integration for SvelteKit - a VitePress alternative for Svelte
  • svelte-signature-pad is a Svelte action to capture smoothed signatures as SVG paths using the excellent perfect-freehand library

Helpers, Stores and Actions

  • SvelteKit-Document is a tiny utility for SvelteKit that lets you change the <html>, <head>, and <body> tags from any page or layout - with full SSR support
  • SvelteKit Form Data is an automatic SvelteKit form data parser middleware
  • sveltekit-superforms supercharges your SvelteKit forms with a bunch of quality of life features. Purports to be a “powerhouse of a library”
  • Houdini - the “disappearing” GraphQL client for the SvelteKit - is now 1.0
  • sveltekit-modal-langchain is an example SvelteKit project using sveltekit-modal, showing how easy it is to write Python endpoints in SvelteKit
  • mdsvex-excerpt allows you to show only a portion of document in certain layouts
  • Svelte Action Balancer is a simple Svelte action that makes titles more readable
  • svelte-object helps create and maintain objects using components. Values are stores and can therefore be intuitively subscribed to and updated
  • svelte-relative-time is a tiny Svelte action and component to render relative times
  • svelte-disable-preload is a simple action to apply no-op event listeners to an element that prevent the document-level SvelteKit event handlers being invoked
  • SvelteKit Static Sitemap generates a sitemap.xml for your page during build
  • svelte-intersection-observer-action is a Svelte action for element position notifications using IntersectionObserver
  • svelte-sequence provides custom stores to compose tweened motion sequences over multiple steps
  • @svelte-put/inline-svg is a Svelte action for inlining dynamic SVGs (fetched from network)

Other cool tools

  • sveltekit-modal lets you write Python endpoints in SvelteKit using Modal
  • svelte-kit-bot-block is a server hook to handle spam requests with SvelteKit
  • Svelte Email lets you write and design email templates with Svelte and render them to HTML or plain text
  • Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers
  • svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
  • React in Svelte is a library that enables you to use React components in Svelte
  • SvelteKit Redis Session Manager is a Redis integration in SvelteKit for Session Management

Thanks for reading! Don’t forget to try your hand at the Svelte Hackathon!

Feel free to let us know if we missed anything on Reddit or Discord