What's new in Svelte: March 2023

SvelteHack, post-1.0 SvelteKit improvements and a huge showcase

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

• Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich (on the Svelte Blog)

• View Transition Experiments with Svelte and Native Page Transitions in SvelteKit (updated for 2023) by Geoff Rich

• Ron Au's story and how to be whimsical! by Svelte Radio

• SvelteKit 1.0 with Rich Harris by PodRocket

• Svelte Society Africa has formally launched!

• SvelteKit overview with Simon and Dominik by Frontend RheinMain

To Watch or Hear

• Delightful Web Development with SvelteKit is a workshop from This Dot Labs - taking place on April 13th.

• Have More Control Over Layouts With Group Layouts In SvelteKit and Learn SvelteKit Hooks Through 6 Examples by Joy of Code

• Svelte Kit Creating Popup Modals with Tailwind CSS and SvelteKit: Creating Dynamic Tables with Tailwind CSS by Abdul Rehman 2050

To Read

• Svelte Language Server Example by VolarJS

• How I Made My App 2.4x Faster Switching to Svelte by Erik Verduin

• Smooth Page Transitions with SvelteKit and How to Build a Static SvelteKit Site by Phil Kruft

• Blazing fast PWAs with SEO power using SvelteKit and Ionic by Tommertom

• Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg

• A Business Case for SvelteKit by Chris Ellis

• How to set up a new Svelte project with SvelteKit by Igor Nowosad

• How to type Events, Slots, and Props in Svelte by Raqueebuddin Aziz

• Use TypeScript with SvelteKit and Supabase by Ross Robino

• Invoking Svelte components from your Ember apps by Rajasegar Chandran

• Add a sitemap to your server side rendered SvelteKit website and State in URL: the SvelteKit approach by Justin Ahinon

• Display crypto data real-time in a chart using Sveltekit, Chart.js & coincap.io by Hessel

Libraries, Tools & Components

Looks like I hit Substack’s length limit for this email 😲 Head over to svelte.dev/blog to see all the other Libraries, Tools and Components from this month!

---

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