Svelte blog

What’s new in Svelte: February 2026

Dani Sandoval — Sun, 01 Feb 2026 00:00:00 GMT

This month brings a few new features to Svelte and SvelteKit and quite a few new libraries from around the community.

Also, in case you missed it last month, the Svelte maintainers released patches for 5 vulnerabilities across the Svelte ecosystem. So be sure you’re up to date by reading the blog post, CVEs affecting the Svelte ecosystem.

Now, without further ado, let’s dive in...

What’s new in Svelte & SvelteKit

To support newer browsers that allow it, you can now customize <select> elements using CSS and rich HTML content (svelte@5.47.0, Docs, #17429)
Svelte’s CSS parser is now exported from svelte/compiler as parseCss. It’s a partial but lightweight CSS AST parser that is currently being used in SvelteKit (svelte@5.48.0, #17496)
A ShadowRootInit object can now be passed to attachShadow() when shadow root is created with a customElement (svelte@5.49.0, Docs, #17088)
A breaking change in SvelteKit’s remote functions removes buttonProps from experimental remote form functions. Use <button {...myForm.fields.action.as('submit', 'register')}>Register</button> when creating mutliple submit buttons instead (kit@2.50.0, Docs, #15144)
Node: The server’s keepAliveTimeout and headersTimeout options can now be configured by setting the corresponding environment variable (sveltejs/adapter-node@5.5.0, Docs, #15125)
Vercel: Remote function calls can now be found under the /_app/remote route in observability (sveltejs/adapter-vercel@6.3.1, #15098)

For a full list of changes - including all the important bugfixes that went into the releases this month - check out the Svelte compiler’s CHANGELOG and the SvelteKit / Adapter CHANGELOGs.

Community Showcase

Apps & Sites built with Svelte

Frame is a high-performance media conversion utility built on the Tauri v2 framework. It provides a native interface for FFmpeg operations, allowing for granular control over video and audio transcoding parameters
LogTide is an open-source alternative to Datadog, Splunk, and ELK. Designed for developers and European SMBs who need GDPR compliance, data ownership, and simplicity without the complexity of managing an ElasticSearch cluster
funcalling is a P2P calling app with built in board games, word games, and motion capture games (Reddit post includes a video demo)
book by book lets you sync book data, covers, and pricing to a Square POS in seconds. You can import distributor orders from Ingram, Edelweiss & PubEasy—no spreadsheets or manual entry
zsweep is a minimalist, keyboard-driven Minesweeper game played with Vim motions
PulseKit provides professional feedback management to collect and prioritize customer feedback
Bitphase is a modern web-based chiptune tracker designed for creating music on retro sound chips
CapCheck is a fact checker AI for images, videos, audio, text and URLs
Distill (last mentioned in July) has been updated with a new competitor finder to make it easier to track direct and indirect competitors in a market
Pelican lets you generate SVG vector graphics and ASCII art from text prompts. With multi-step refinement, AI sees its output and improves it iteratively

Learning Resources

This Week in Svelte

Ep. 127 — Changelog
Ep. 128 — Changelog

To Read

Bundling a SvelteKit app into a single binary by Gautier Ben Aïm

Libraries, Tools & Components

UI Components and Animations

mapcn-svelte is a Svelte port of mapcn built on MapLibre GL, styled with Tailwind, works seamlessly with shadcn-svelte
AgnosticUI Local (v2) is a CLI-based UI component library that copies Lit web components directly into your project
Motion Core is a collection of animated Svelte components powered by GSAP and Three.js
Tilt Svelte is a smooth 3D tilt Svelte attachment based on vanilla-tilt.js

State Management

Reddo.js is a tiny undo/redo utility package for JavaScript, React, Vue, and Svelte
svstate provides deep reactive proxy with validation, snapshot/undo, and side effects — built for complex, real-world applications
rune-sync synchronizes reactive state across various storage backends

Plugins, Compilers and Runtimes

fastify-svelte-view is a Fastify plugin for rendering Svelte components with support for SSR (Server-Side Rendering), CSR (Client-Side Rendering), and SSR with hydration
kit-on-lambda is an adapter for running SvelteKit on AWS Lambda. It supports deployment to Node.js and Bun runtimes bundled with esbuild/Bun
voca is a self-hostable, stateless, and fast WebRTC signaling server written in Rust with frontend SDKs
@svelte-safe-html/core statically analyzes .svelte files and detects unsafe {@html} insertions
sveltekit-discriminated-fields provides type-safe discriminated union support for SvelteKit remote function form fields
svelte-fast-check is a type and Svelte compiler warning checker for Svelte/SvelteKit projects that claims to be up to 24x faster than the built-in svelte-check

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

Until next time 👋🏼!

CVEs affecting the Svelte ecosystem

Elliott Johnson — Thu, 15 Jan 2026 00:00:00 GMT

We’ve released patches for 5 vulnerabilities across devalue, svelte, @sveltejs/kit, and @sveltejs/adapter-node. Here’s what you need to know:

Upgrade now

If you’re using any of these packages, upgrade them to their corresponding non-vulnerable versions:

devalue: 5.6.2
svelte: 5.46.4
@sveltejs/kit: 2.49.5
@sveltejs/adapter-node: 5.5.1

For cross-dependent packages — svelte and @sveltejs/kit depend on devalue — patched versions already include upgraded dependencies.

Commentary

We’re extremely thankful to all of the security researchers who responsibly disclosed these vulnerabilities and worked with us to get them fixed, to the security team at Vercel who helped us navigate the disclosure process, and to the maintainers who worked to publish the fixes.

Over the last few weeks, we’ve seen a spate of high profile vulnerabilities affecting popular tools across the web development ecosystem. While they are unfortunate, it has been encouraging to see the community pulling together to keep end users safe. Using the lessons learned from these vulnerabilities, we will invest in processes that will help catch future bugs during the writing and review phases, before they go live.

If you think you have discovered a vulnerability in a package maintained by the Svelte team, we urge you to privately report it via the Security tab on the repo in question (or the Svelte repo, if unsure).

Details

Full reports are available in the published security advisories, but we’ve included a brief summary of each below.

CVE-2026-22775: DoS in devalue.parse due to memory/CPU exhaustion

Packages affected:
- devalue
You’re affected if:
- You’re using devalue versions 5.1.0 through 5.6.1, and
- You’re parsing user-controlled input
Effects:
- A malicious payload can cause arbitrarily large memory allocation, potentially crashing the process
- SvelteKit applications using remote functions are vulnerable, as the parameters are run through devalue.parse
  - If you don’t have remote functions enabled, SvelteKit is not vulnerable

CVE-2026-22774: DoS in devalue.parse due to memory exhaustion

(Yes, this is very similar to the previous CVE. No, it is not the same!)

Packages affected:
- devalue
You’re affected if:
- You’re using devalue versions 5.3.0 through 5.6.1, and
- You’re parsing user-controlled input
Effects:
- A malicious payload can cause arbitrarily large memory allocation, potentially crashing the process
- SvelteKit applications using remote functions are vulnerable, as the parameters are run through devalue.parse
  - If you don’t have remote functions enabled, SvelteKit is not vulnerable

CVE-2026-22803: Memory amplification DoS in Remote Functions binary form deserializer

Packages affected:
- @sveltejs/kit
You’re affected if:
- You’re using SvelteKit versions 2.49.0 through 2.49.4, and
- You’ve enabled the experimental.remoteFunctions flag, and
- You’re using form
Effects:
- Users can submit a malicious request that causes your application to hang and allocate arbitrarily-large amounts of memory

CVE-2025-67647: Denial of service and possible SSRF when using prerendering

Packages affected:
- @sveltejs/kit
- @sveltejs/adapter-node
You’re vulnerable to DoS if:
- You’re using @sveltejs/kit versions 2.44.0 through 2.49.4, and
- Your app has at least one prerendered route
You’re vulnerable to DoS and SSRF if:
- You’ve using @sveltejs/kit versions 2.19.0 through 2.49.4, and
- Your app has at least one prerendered route, and
- You’re using @sveltejs/adapter-node without a configured ORIGIN environment variable, and you are not using a reverse proxy that implements Host header validation
Effects:
- DoS causes the server process to die
- SSRF allows access to internal resources that can be reached without authentication from SvelteKit’s server runtime
- If the stars align, it’s possible to obtain SXSS via cache poisoning by forcing a potential CDN to cache an XSS returned by the attacker’s server (the latter being able to specify the cache-control of their choice)

CVE-2025-15265: XSS via hydratable

Packages affected:
- svelte
You’re vulnerable if:
- You’re using svelte versions 5.46.0 through 5.46.3, and
- You’re using hydratable, and you’re passing unsanitized, user-controlled strings in as keys
Effects:
- Your users are vulnerable to XSS if an attacker can manage to get a controlled key into hydratable that is then returned to another user

What’s new in Svelte: January 2026

Dani Sandoval — Thu, 01 Jan 2026 00:00:00 GMT

During the December holiday season, the Svelte team shared 24 days of Svelte knowledge, tips, and insights to unwrap in 2025’s Advent of Svelte. Learn more about under-utilized Svelte features through a series of fun and interactive videos!

There were also a bunch of improvements and showcase items across the Svelte ecosystem this last month. So let’s have a look...

What’s new in Svelte & SvelteKit

The hydratable option (which adds an inline <script> block to the head) now has a csp option in render to support Content Security Policies (svelte@5.46.0, Docs, #17338)
The Vercel adapter now supports Node 24 (adapter-vercel@6.2.0/adapter-auto@7.0.0, #14982 and #14737)
The Svelte CLI is now able to fully setup a SvelteKit project for Cloudflare Workers/Pages development (sv@0.11.0, Docs, #851)
The Svelte MCP now exposes tools as both a JS API and CLI (mcp@0.1.16, #128)
A huge amount of performance improvements were completed this month in the language-tools so make sure your extensions are up to date!

For a full list of changes - including all the important bugfixes that went into the releases this month - check out the Svelte compiler’s CHANGELOG and the SvelteKit / Adapter CHANGELOGs.

Community Showcase

Apps & Sites built with Svelte

GCal Wrapped lets students see how they spent their time this semester, wrapped up beautifully
Text Processing Studio is a comprehensive text processing web application that lets you process, compare, transform, and analyze text
Flumio is a drag-and-drop workflow automation tool
Statue is a markdown-based static site generator designed for performance, flexibility, and developer experience
sveltemark is a privacy-first, open-source, local-only markdown editor
Lovely Docs provides hierarchically optimized documentation for AI coding agents
Ikaw bahala is a Manila-based food platform made for couples and friends who want to search for specific foods locally

Learning Resources

Featuring Svelte Contributors and Ambassadors

2025 Complete Svelte Kit Course by Syntax (Scott Tolinski)
This AI model writes Svelte 5 code PERFECTLY by Code with Stanislav
Building Hydratable with Elliott Johnson by Svelte Society (Kev)
SvelteKit and Effect with Dillon Mulroy by Svelte Society (Kev)

Svienna

Async Svelte by Domenik Reitzner
Svelte LLMs by Jacob Palecek

This Week in Svelte

Ep. 123 — Changelog
Ep. 124 — Changelog
Ep. 125 — Changelog
Ep. 126 — Changelog

Svelte Radio

One Man Svelte for NGOs with Ilja (December 6)
Custom Renderers for Svelte with Paolo Ricciuti (December 11)

To Read

Sveltekit Custom Remote Form Factory by Matt DeKok
Getting Svelte Inspector Working with Neovim by Stephen Gunn
SvelteKit Remote Functions Workaround Helpers by Jonathan Gamble
LLM Agent-Friendly Project Setup by Sebastian Ferreyra
Announcing SvelteKit OG v4: An alternative to @vercel/og for sveltekit by Shivam Meena
Svelte: Best practice to combine $derived and $state by Max Core
Embedding a SvelteKit site in PocketBase by Brandon Ma

Libraries, Tools & Components

SvelteDoc is a VS Code extension that shows Svelte component props on hover
pocket-mocker is an in-page HTTP controller for frontend development to intercept, modify, and simulate API responses directly in the browser
Avatune is a production-ready avatar system with AI-powered generation and framework-native components
svelte-image-input is a component for loading, scaling and adjusting profile pictures
Mint is a digital compositing tool that can be used to crop and resize images, create collages, build mockups, or otherwise complete basic compositing tasks
SvelteKit Auto OpenAPI is a type-safe OpenAPI generation and runtime validation for SvelteKit
Svelte Drawer is a drawer component for Svelte 5, inspired by Vaul
trioxide is a set of customizable components, focused on non-trivial UI pieces that are tedious to reimplement
svelte-asciiart is a Svelte 5 component for rendering ASCII art as scalable SVG with optional grid overlay and frame
svelte-bash is a fully typed, lightweight, and customizable terminal emulator component with a virtual file system, custom commands, themes, and autoplay mode for demos
SvelTTY provides a runtime that allows you to render and interact with Svelte apps in the terminal
svelte-tablecn is a powerful data grid and port of tablecn.com
Svelte runtime components enables compiling Svelte components from text at runtime, allowing dynamic, user-provided svelte component code to be compiled and mounted in the browser

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

Until next time 👋🏼!

What’s new in Svelte: December 2025

Dani Sandoval — Mon, 01 Dec 2025 00:00:00 GMT

Just in time for the end of the year, there’s a new Svelte Society Website! It brings a whole new experience. Instead of just being a site with static resources, it now serves a dynamic feed of all the latest Svelte content out there. Videos, libraries, events, etc.

Instead of opening PRs to add libraries and packages you can now just submit them on the website. If you find an interesting package, head on over and submit it. Logged in users also have the ability to like and save content. So be sure to try it out and share your feedback!

There’s a bunch of updates to SvelteKit and a showcase to cover, so lets dive in...

What’s new in Svelte & SvelteKit

hydratable API is a low-level API to coordinate hydration between the server and client (svelte@5.44.0, Docs, #17154)
print converts a Svelte AST node back into Svelte source code. It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation (svelte@5.45.0, Docs, #16188)
File uploads can now be streamed inside form remote functions allowing form data to be accessed before large files finish uploading (kit@2.49.0, Docs, #14775)
(Minor) Breaking Changes in kit@2.48.8:
- invalid now must be imported from @sveltejs/kit (#14768)
- The submitter option was removed from the experimental form validate() method. It will now always use the default submitter (#14762)
Svelte CLI:
- Links are now wrapped with resolve() to follow best practices (sv@0.9.14, Docs, #754)
- npx sv create now supports a new argument --add to add add-ons to the project in the same command (sv@0.10.0, #695)
- The new --no-dir-check option in sv create will, even if the folder is not empty, suppress all directory check prompts (sv@0.9.15, #785)

For a full list of changes - including all the important bugfixes that went into the releases this month - check out the Svelte compiler’s CHANGELOG and the Svelte Kit / Adapter CHANGELOGs.

Community Showcase

Apps & Sites built with Svelte

Apple’s new web-based App Store is built with Svelte! This adds onto the other Apple products spotted using Svelte in the wild - including Apple Music and Apple Podcasts
Aphex is a modern, open source headless CMS built with SvelteKit
ShareNhac lets you and your friends watch videos and listen to music together in sync, without any ad interruptions
starterindex is a curated list of top boilerplates to help you start your next project (which is great because we stopped putting “starter” repos in the Svelte newsletter over a year ago)
PGPlayground helps any backend engineer quickly prototype and validate fixes or changes to their schema without leaving the browser
Engramma is a web-based editor and converter to manage design tokens, visualize them in a tree structure, and export them as CSS variables, SCSS or JSON format
Multi is a coding agent for VS Code
Gardenjs provides a centralized platform for developers to create, test, and present UI components and pages in isolation
bookemoji is a tool to showcase, collaborate, and develop the technical aspects of user interfaces - an alternative to StoryBook.js or Histoire in your favorite tech stack

Learning Resources

Rich Harris - Remote Control at ViteConf 2025
SvelteKit has solved data loading! from Syntax
Paolo Ricciuti - Progressively enhanced apps with Svelte at FrontKon#25
Adding Storybook to Svelte Society with Jeppe Reinhold from Svelte Society (Kev)
How to Navigate Like a Pro in SvelteKit by Thiago Temple

Libraries, Tools & Components

better-svelte-email lets you render emails in Svelte with first-class Tailwind support
svelte-number-format is a lightweight and reactive number input component that is now available as a stable v1.0 release
chain-enhance lets you sequentially chain multiple SvelteKit form actions with deep-merged data propagation, type-safe results, reactive progress tracking, and automatic file-safety
svelte-socket is a WebSocket wrapper for Svelte 5 using runes
@edgeone/sveltekit lets you deploy your SvelteKit app to Tencent Cloud EdgeOne Pages to provide lightning-fast speeds in China while maintaining excellent performance worldwide
Davia is an open-source tool designed for AI coding agents to generate interactive internal documentation for your codebase
svelte-ui-kit provides an easy to use, customizable button component with smooth hover animations - inspired by shadcn/ui style
Svelte AI Elements is a component registry built on top of shadcn-svelte that provides production-ready components designed for building AI-powered applications
sveltekit-api-gen automatically generates OpenAPI 3.0 specifications from your SvelteKit server endpoints using JSDoc @Swagger annotations
Rune Scroller provides “enchanting” scroll animations for Svelte 5, built with native performance and zero dependencies
vite-plugin-sveltekit-decorators, a plugin that automatically decorates SvelteKit functions, now supports remote functions
svelte-breakpoint-badge is a lightweight Svelte component that displays the current Tailwind CSS breakpoint during development

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

Until next time 👋🏼!

Advent of Svelte is back

The Svelte team — Mon, 01 Dec 2025 00:00:00 GMT

It’s Advent of Svelte time!

This year, we’re doing something different: every day between now and Christmas, a new door will be unlocked on advent.sveltesociety.dev/2025. Behind each door is a short video about a feature in Svelte that you might not have heard about, or a useful tip on how to get the most out of the framework.

We’re kicking things off with a demo of the $inspect(...) rune. Check back every day for updates!

What’s new in Svelte: November 2025

Dani Sandoval — Sat, 01 Nov 2025 00:00:00 GMT

The official Svelte MCP server (for all your agentic needs) is now available with its own section of the docs site and GitHub repo. If you haven’t gotten a chance to try it out with the AI of your choice, definitely take it for a spin. It should replace the copy/pasting of the Svelte docs that’s often required to get LLMs to write valid Svelte 5 code and can provide suggestions on the generated code with static analysis.

But it’s not just AIs that have been writing code; our maintainers have too! Let’s take a look at what they’ve been up to in Svelte/Kit before diving into our community showcase...

What’s new in Svelte

createContext passes types with a stored context - replacing the need to type every getContext return value (5.40.0, Docs, #16948)
The $state.eager(value) rune will update the UI immediately instead of waiting for the corresponding await to resolve (5.41.0, Docs, #16849)
The fork API lets you change some state ‘offscreen’ in such a way that you can discover any async work resulting from the state change without committing it to the screen. (5.42.0, Docs, #17004)

For a full list of changes - including the dozens of valuable bugfixes that went into the releases this month - check out the Svelte compiler’s CHANGELOG.

What’s new in SvelteKit

event.route and event.url are now available in remote functions making it easier to know which page a remote function was called from (2.44.0, Docs, #14606)
form.for(id) will now implicitly set an id on the form object (2.45.0, Docs, #14623)
Form validation can now be done imperatively in cases where it can’t be done via a schema (2.46.0, Docs, #14624)
The new signal request property provides the AbortSignal associated with the request (2.47.0, MDN Docs, #14715)
Kit will now use the fork API when it’s available. See the Svelte updates above for more info (2.48.0, #14793)

Community Showcase

Apps & Sites built with Svelte

Deep Time is an interactive article from ABC Australia that tells the story of the Aboriginal and Torres Strait Islander peoples
Ririkku (リリック) is a karaoke-style music player with an intelligent Japanese text analyzer built-in
Glucose is an ultra-lightweight, video player for Windows with AI powered subtitle generation
Restring is a fast, smart toolbox for dev tasks like formatting JSON, decoding JWTs, and converting strings
Huly is an all-in-one project management platform (alternative to Linear, Jira, Slack, Notion, Motion)
Nokiafied converts your videos into super low-quality Nokia phone style videos for memes
Contracko is an AI contract management platform for small businesses

Learning Resources

Featuring Svelte Contributors and Ambassadors

Full Stack SvelteKit CRUD App Using Remote Functions Tutorial, How Svelte Reactivity Works and Stop Looking For Code And Use The Svelte Inspector by Joy of Code
I Was Wrong About Svelte... by Ben Davis
Storybook is actually good now, with Jeppe Reinhold and Macrodata Refinement with Ken Kunz by Svelte Radio

This Week in Svelte

Ep. 119 — svelte.dev/packages
Ep. 120 — Storybook for Svelte Part 3: Testing
Ep. 121 — Svelte MCP Server
Ep. 122 — svedit.dev

Svelte London - October 2025

You can watch the full video on YouTube or skip to the specific talks below:

Precision vs Prediction: The Trouble with LLMs and Libraries by Maria Gorinova (Tessl AI Research)
Building a game level editor with SvelteKit by Elliot Bentley

To Read / Watch

SvelteKit Remote Functions - Interactive Showcase by Arne Wiese
BetterAuth and Google Login on Cloudflare Workers with SvelteKit by Jilles Soeters

Libraries, Tools & Components

aphex is a modern, extensible headless CMS featuring a portable core package, database/storage agnostic adapters, and a Sanity-inspired admin interface
svelte-o-phone is a flexible, headless phone number input component powered by libphonenumber-js
motion-svelte is an attempt to bring a Motion (formerly known as Framer Motion) to Svelte
better-captcha provides framework-agnostic wrappers for a bunch of captcha providers
svelte-runtime-template is a lightweight Svelte component for handling templates at runtime with curly brace substitutions in text content
RetroUI is a copy/pastable component library built for Svelte with shadcn-svelte
Skeleton - the Svelte-native component library - just released its v5 version with a ton of quality of life improvements
Tanstack Query Svelte v6 is now based on the runes syntax

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

Until next time 👋🏼!

What’s new in Svelte: October 2025

Dani Sandoval — Wed, 01 Oct 2025 00:00:00 GMT

There were lots of improvements to remote functions this month - including new batching tools and improved performance via lazy discovery. For more info, check out the Docs and PR links in each bullet. Async SSR is also available for those who would like to try it out while it’s still experimental. It’s included when the config option in svelte.config.js has the compilerOptions.experimental.async setting enabled.

We’ve got a hefty showcase this month too, so let’s dive in!

What’s new in Svelte, SvelteKit and Svelte CLI (sv)

The event property is now included on popstate, link and form navigation (kit@2.40.0, #14307)
The %sveltekit.version% placeholder can now be used in app.html to easily include the current SvelteKit version in the output (kit@2.41.0, Docs, #12132)
You can now create projects from the Svelte playground with npx sv create --from-playground <url> (sv@0.9.5, #662)
Experimental async SSR is available in Svelte v5.39.3 and SvelteKit v2.43.0 or higher. You can opt-in via the experimental.async option. When this is enabled, it’s possible to use await anywhere in your app, without wrapping it in a boundary with a pending snippet. You can find more information in the SvelteKit PR (#14447, Svelte PR is #16748)

Remote Functions

The remote set() function can now be called on server queries and query.refresh() promises will now be automatically resolved on the server (kit@2.37.0, Docs, #14304, #14332)
The new query.batch remote function lets you batch requests that happen within the same macrotask (kit@2.38.0, Docs, #14272)
Lazy discovery of remote functions improves detection and tree shaking for functions defined in node_modules (kit@2.39.0, #14293)
The form remote function has been enhanced with schema support, input and issues properties (kit@2.42.0, Docs, #14383)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Windframe generates designs with AI or prebuilt templates to export as Tailwind CSS code for React, Vue, Svelte or HTML.
pgpad is a straightforward cross-platform database client
Zippywords is a burst-typing game that’s configurable with different languages (including the Svelte 5 syntax!)
CBFC Watch is a data visualisation project with a searchable database of over 100K film censorship records in India (GitHub)

Spotted in the Wild

Learning Resources

Featuring Svelte Contributors and Ambassadors

Introducing SvelteKit Remote Functions and SvelteKit Remote Functions tips: Auth guards, managing async, query.batch by Simon Holthausen
The Complete Svelte 5 Course For The Most Loved JavaScript Framework by Joy of Code (3+ hours of excellent content). Text version available here
Translate your Svelte and SvelteKit applications the easy way - full tutorial by Code with Stanislav
How and why I built an MCP server for Svelte by Stanislav Khromov
Svelte Radio is back! Feat. Kevin, Brittney and Antony

This Week in Svelte

Ep. 115 — Changelog review
Ep. 116 — e18e.dev and NPM’s supply chain attack
Ep. 117 — Formisch
Ep. 118 — Changelog review

Svelte London - September 2025

You can watch the full video on YouTube or skip to the specific talks below:

Svelte on Cloudflare: Tips and guide by Mark Ridge and Connor Adams
Ultra-low Latency in SvelteKit by Scott Phillips

To Read

Sharing some custom components that handle async state with less boilerplate in Svelte 5 by u/geokidev
Rendering emails with Svelte by Gautier Ben Aïm
Integrate Keystatic CMS with SvelteKit to render Markdoc Content with Interactive Svelte Components by Samuel Plumppu

To Watch

Svelte Under The Hood by ~/in-depth

Libraries, Tools & Components

UI / UX

SVAR Svelte v2.3 now has TypeScript definitions to all its open-source Svelte UI components
@dnd-kit is a lightweight React-like library for building performant and accessible drag and drop experiences
svelte-overflow-fade is a Svelte action and attachment for adding beautiful fade effects to overflowing content
scratch-to-reveal-svelte is a simple and customizable scratch-to-reveal component for Svelte
Svelte Streamdown is a Svelte port of Streamdown by Vercel - an all in one markdown renderer, designed specifically for AI-powered streaming applications
USAL JS is the “Ultimate Scroll Animation Library”

Frameworks and Data Tools

PrevelteKit is a lightweight, high-performance web application framework built on Svelte 5, featuring Server-Side Pre Rendering (SSPR) using Rsbuild and jsdom
Apollo Runes is an Apollo Client for Svelte 5
Formisch is a schema-based, headless form library for JS frameworks
Conformal helps you work with native FormData by providing type-safe form submissions for the modern web
Astro, already supporting async Svelte out of the box, added support for server-rendered async Svelte in the 5.14 release
LayerChart had a packed update and introduced (among other things) a “vanilla CSS” (Tailwind opt-in) mode and support for other UI frameworks, and now also works in the Svelte REPL / playground
keystatic-sveltekit is a convenient way to integrate the open source Git-based Keystatic CMS with SvelteKit, featuring Markdoc content with interactive Svelte components and a modern editing UX

Dev Tools and Vite Plugins

wuchale is a compile-time internationalization (i18n) toolkit that requires zero code changes
SV Floating Console is a floating console for Svelte applications that only appears in development mode
magicons is a fast, typesafe Icon wrapper that fixes bundling issues with large barrel exports in icon libraries
Svelte-pops is a performant and easy to use popover manager for creating dialog and tooltips
vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals
vite-plugin-sveltekit-decorators is a powerful Vite plugin that automatically decorates SvelteKit functions with customizable wrappers for logging, analytics, error handling, and more

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

Until next time 👋🏼!

What’s new in Svelte: September 2025

Dani Sandoval — Mon, 01 Sep 2025 00:00:00 GMT

In case you missed it, the main Svelte blog covered how to use SvelteKit’s new OpenTelemetry traces to reliably set up observability instrumentation using instrumentation.server.ts. This month’s round up covers that release and a few other features that rolled out before and after it.

Plenty in the showcase, as well, so let’s dive in!

What’s new in Svelte and Svelte CLI (sv)

await is now allowed inside @const declarations (svelte@5.38.0, Docs, #16542)
The sv add command has been updated to remove the --no-preconditions and add --no-git-check. With this new flag, even if some files are dirty, no prompt will be shown (sv@0.9.0, Docs, #650)

What’s new in SvelteKit and its adapters

Deno is now supported as a supported package manager (sveltejs/adapter-auto@6.1.0, #14163)
A new instrumentation.server.ts adds tracing and observability setup (sveltejs/adapter-node@5.3.0, Docs, #13899)
The --preserve-output flag prevents deletion of the output directory before packaging (sveltejs/package@2.5.0, Docs, #13055)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Pollinate provides accurate forecasts designed for allergy sufferers who want to plan their day, or vacation, around pollen levels (Check out the Reddit post on how it was built)
Ferndesk is a help center that is kept up to date automatically (the creator shared their demo on the Svelte Reddit)
Wplace lets you paint whatever you want on a map of the world
Domain Watcher is a domain availability monitor and expiration tracker built with SvelteKit & Cloudflare Workers
Motley is a local-first bookmarking/moodboard app
TallyHo is a simple time tracking for freelancers
MenuScan lets you take a picture of any restuarant menu and get access to the calorie and macro counts for each item
Vibe Check provides quick, honest diagnostics for AI‑built apps
Joyful is a simple way to write, design, and send beautiful newsletters
Eagle Cite lets you highlight, organize, and search your citations in one place
Volkara is a set of ADHD-Friendly Productivity Tools
Simple Man Archive is an ASCII art archive where anyone can contribute by creating unique ASCII art
Thirty is an open-source AI calendar built on familiar foundations
Timezones quickly shows and converts timezones across many locations

Learning Resources

Featuring Svelte Contributors and Ambassadors

Compile Svelte 5 in your head by Tan Li Hau
Introducing SvelteKit Remote Functions by Simon Holthausen
The Svelte MCP server now allows you to directly reference documentation sections, and prompt templates

This Week in Svelte

Ep. 112 — Storybook for Svelte Part 1
Ep. 113 — Storybook for Svelte Part 2 - Docs
Ep. 114 — Changelog Review

To Read

Securing the supply chain at scale: Starting with 71 important open source projects by GitHub
Epicenter (YC S25) is sponsoring Svelte maintainers to spend their time half pushing local-first OSS forward with Epicenter and half building their dream projects
Project Two: Creating Mobile app using Tauri + Svelte by Kaspar Minosiants
Ways to use Anime.js with Svelte by Brandon Ma
Svelte, Markdown, and the Magic of Web Components by Shajid Hasan

To Watch

SvelteKit Remote Functions are INSANE! Type-Safe Full Stack in Minutes by Tyler Codes
Deploy a SvelteKit Application to Cloudflare Workers with Drizzle & D1 by Jilles Soeters

Libraries, Tools & Components

EXE is a build tool to distribute your full-stack web app as a single executable binary with zero runtime dependencies
Svelte Sortable List is a comprehensive package for creating accessible, sortable lists in Svelte applications
Markdown UI turns static docs into interactive experiences - instantly
Tark UI provides beautiful UI components built with Ark UI and Tailwind
Uniface Element is a comprehensive enterprise-grade UI component library built with Svelte 5, designed for modern web applications
microfolio is a modern static portfolio generator featuring a file-based content management system using folders and Markdown files
Keycloakify is a tool for creating custom Keycloak themes, enabling you to modify the appearance and behavior of Keycloak’s user interfaces
PDJsonEditor is a powerful JSON visualization and editing tool with both a code editor and interactive graph views
Show & Svelte lets you create fully interactive presentations with Svelte
wuchale is a compile-time internationalization (i18n) toolkit that requires zero code changes
svelte-overflow-fade is a Svelte action and attachment for adding beautiful fade effects to overflowing content
formshape is a type-safe form validation for SvelteKit Remote Functions using Standard Schema compatible validators
vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals.
vite-plugin-sveltekit-decorators is a Vite plugin that automatically decorates SvelteKit functions with customizable wrappers for logging, analytics, error handling, and more
jetbrains-svelte-templates is a compact collection of Live Templates for JetBrains IDEs (like WebStorm and IntelliJ IDEA Ultimate) designed to speed up your Svelte & SvelteKit development

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

Until next time 👋🏼!

Introducing integrated observability in SvelteKit

Elliott Johnson — Mon, 18 Aug 2025 00:00:00 GMT

Understanding how your SvelteKit application behaves in production — from request flows to performance bottlenecks — is crucial for building reliable user experiences. SvelteKit now has first-class support for observability: built-in OpenTelemetry tracing, and a dedicated instrumentation setup file that ensures your monitoring tools work seamlessly.

To opt in, upgrade SvelteKit and your adapter and add the following to your svelte.config.js:

svelte.config

export default {
	kit: {
    experimental: {
        tracing: {
 server: boolean;
        };
        instrumentation: {
 server: boolean;
        };
    };
}kit: {
		experimental: {
    tracing: {
        server: boolean;
    };
    instrumentation: {
        server: boolean;
    };
}experimental: {
			tracing: {
    server: boolean;
}tracing: {
				server: booleanserver: true
			},
			instrumentation: {
    server: boolean;
}instrumentation: {
				server: booleanserver: true
			}
		}
	}
};

First-party OpenTelemetry traces

SvelteKit can now emit OpenTelemetry traces for the following:

handle hook (handle functions running in a sequence will show up as children of each other and the root handle hook)
load functions (includes universal load functions when they run on the server)
Form actions
Remote functions

The emitted spans include attributes describing the current request, such as http.route, and surrounding context, such as the +page or +layout file associated with a load function. If there are additional attributes you think might be useful, please file an issue on the SvelteKit GitHub issue tracker.

A convenient home for all of your instrumentation

Emitting traces alone is not enough: You also need to collect them and send them somewhere. Under normal circumstances, this can be a bit challenging. Because of the nature of observability instrumentation, it needs to be loaded prior to loading any of the code from your app. To aid in this, SvelteKit now supports a src/instrumentation.server.ts file which, assuming your adapter supports it, is guaranteed to be loaded prior to your application code.

In Node, your instrumentation might look something like this:

import { import NodeSDKNodeSDK } from '@opentelemetry/sdk-node';
import { import getNodeAutoInstrumentationsgetNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
import { import OTLPTraceExporterOTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
import { import createAddHookMessageChannelcreateAddHookMessageChannel } from 'import-in-the-middle';
import { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)Register a module that exports hooks that customize Node.js module
resolution and loading behavior. See
Customization hooks.
This feature requires --allow-worker if used with the
Permission Model.
@sincev20.6.0, v18.19.0
@paramspecifier Customization hooks to be registered; this should be
the same string that would be passed to import(), except that if it is
relative, it is resolved relative to parentURL.
@paramparentURL f you want to resolve specifier relative to a base
URL, such as import.meta.url, you can pass that URL here.register } from 'module';

const { const registerOptions: anyregisterOptions } = import createAddHookMessageChannelcreateAddHookMessageChannel();
register<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)Register a module that exports hooks that customize Node.js module
resolution and loading behavior. See
Customization hooks.
This feature requires --allow-worker if used with the
Permission Model.
@sincev20.6.0, v18.19.0
@paramspecifier Customization hooks to be registered; this should be
the same string that would be passed to import(), except that if it is
relative, it is resolved relative to parentURL.
@paramparentURL f you want to resolve specifier relative to a base
URL, such as import.meta.url, you can pass that URL here.register('import-in-the-middle/hook.mjs', import.meta.ImportMeta.url: stringurl, const registerOptions: anyregisterOptions);

const const sdk: anysdk = new import NodeSDKNodeSDK({
	serviceName: stringserviceName: 'my-sveltekit-app',
	traceExporter: anytraceExporter: new import OTLPTraceExporterOTLPTraceExporter(),
	instrumentations: any[]instrumentations: [import getNodeAutoInstrumentationsgetNodeAutoInstrumentations()]
});

const sdk: anysdk.start();

If you’re deploying to Vercel, it would look something like this:

import { import registerOTelregisterOTel } from '@vercel/otel';

import registerOTelregisterOTel({
	serviceName: stringserviceName: 'my-sveltekit-app'
});

Consult your platform’s documentation for specific instrumentation instructions. As of now, all of the official SvelteKit adapters with a server component (sorry, adapter-static) support instrumentation.server.ts.

Acknowledgements

A huge thank-you to Lukas Stracke, who kicked us off on this adventure with his excellent talk at Svelte Summit 2025 and his initial draft PR for instrumentation.server.ts. Another thank-you to Sentry for allowing him to spend his working hours reviewing and testing our work.

What’s new in Svelte: August 2025

Dani Sandoval — Fri, 01 Aug 2025 00:00:00 GMT

With Async Svelte and its companion Remote Functions officially out in the world, there’s a lot of updates to share!

Be sure to check out the showcase for videos from Rich, Paolo, and Stanislav about all the brand new features in Svelte.

Let’s dive into the highlights...

What’s new in Svelte, SvelteKit, Language Tools and CLI (sv)

Remote functions can be called anywhere in your app, but always run on the server, and as such can safely access server-only modules containing things like environment variables and database clients (kit@2.27.0, Docs, #13986)
getAbortSignal returns an AbortSignal that aborts when the current derived or effect re-runs or is destroyed (svelte@5.35.0, Docs, #16266)
A new parent property has been added to the __svelte_meta properties that are added to elements at dev time - useful for debugging nested hierarchies (svelte@5.35.1, #16255)
await is now supported in components when using the experimental.async compiler option (svelte@5.36.0/extensions@109.10.0, Docs, #15844)
There are now types for the params prop and page attributes in page/layout components (kit@2.24.0, kit@2.26.0 & extensions@109.10.0, #13999 / #13864)
SvelteKit’s read now works in edge environments where fs.readFile isn’t available such as in Cloudflare’s workers, Netlify, and Vercel’s edge functions (kit@2.25.0, #13859)
The resolve(...) and asset(...) helpers have been added for resolving paths (kit@2.26.0, #13864)
Support for modern SvelteKit prop typings has been added to VS Code snippets (extensions-109.10.0, #2796)
The new vite.addPlugin simplifies adding a plugin on various vite config styles (sv@0.8.20, #633)
vite-plugin-svelte is out with support for vite7, rolldown-vite and more

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Logitech’s new site is built in Svelte 🎉
hend.world is a language learning application that surrounds you with comprehensible input: compelling stories, articles, and videos that match your level
Amgiflol is a Figma-like Layout Inspector For Web
Formcord is a Google Forms alternative built specifically for Discord communities
Freq is a community-based social media platform for groups of music listeners to share, talk about, and enjoy music together
Salora is a salon booking application (de)
Animal Well Shrine is an low-spoiler egg tracker for the video game, Animal Well
TypingGym is a typing practice site with automatic difficulty adjustment

Learning Resources

Featuring Svelte Contributors and Ambassadors

promise.then(...) by Rich Harris - what’s next now that Svelte is Async
Asynchronous Svelte with Rich Harris by CodeTV (Jason Lengstorf)
Remote Functions are coming to SvelteKit - and they are amazing! by Code with Stanislav
Svelte London - June 2025 feat. “Svelte, svelte everywhere” by Paolo Ricciuti and “Testing your Svelte app in an actual browser” by Willow / Scott

This Week in Svelte

Ep. 108 — Svelte Flow
Ep. 109 — Ark UI
Ep. 110 — Neodrag v3
Ep. 111 — Best LLMs for Svelte 5 tested, MCP server, llms.txt

Svienna (Svelte Society Vienna)

Lightning talk 10 tips in 5 mins! by Jean Yves Couet
Using SvelteKit and MIT appinventor to inspire young girls for tech by Domenik Reitzner
Adding full to your full stack SvelteKit app by Jean Yves Couet
ZeeltePHP (Svelte + PHP) by derharry
Svelte at Geizhals by Martin Grubinger

To Watch/Read

Build a SvelteKit Admin App with Drizzle, Tailwind & Postgres by Tyler Codes
Master Svelte in 15 Minutes: From React Dev to Svelte Pro by Neuronfire
Simple but Effective Skeleton Loaders by Mat Simon
Building Smart Intervals with Svelte 5 by Puru VJ

Libraries, Tools & Components

Svelte Interval is a comprehensive Svelte utility package for managing intervals with reactive durations, synchronization, and advanced control features
@hvniel/svelte-router is a Svelte 5 port of React Router
@hvniel/vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals
wuchale is a non-invasive, normal code based compile-time internationalization (i18n) toolkit
SSGOI brings native app-like page transitions to the web
Svelte Form Builder is a modern, drag-and-drop form builder built with Svelte 5
Svelte persistent runes provides a Svelte reactive rune that keep its value through pages and reloads
gositemap is a fast, test-driven sitemap.xml generator for static SvelteKit sites

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

Until next time 👋🏼!

What’s new in Svelte: July 2025

Dani Sandoval — Tue, 01 Jul 2025 00:00:00 GMT

Whether you’re trying out Vite 7, vitest browser mode or remote functions, there’s lots of experimental features to try this month.

Want some Svelte swag while you’re chatting on Discord? With the new sv ⚡ server tag, you do just that. While signed into Discord, you can adopt our tag via profile settings.

There’s a bunch to cover, from blog posts to new libraries, so let’s dive in...

What’s new in Svelte and SvelteKit

$inspect.trace now includes source name logging to make it easy to find which file the log came from (svelte@5.34.0, Docs, #16060)
The latest version of SvelteKit now supports Vite 7 and Rolldown. Compilation should be faster using Rolldown, but with larger bundle sizes until additional tree-shaking is implemented in Rolldown (kit@2.22.0, Docs, #13747)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

What’s new in the CLI and Language Tools

The sv CLI now supports Vite’s browser mode in Vitest - allowing you to run your tests in the browser natively (cli@0.8.12, Docs, #588)
The language server now makes it easier to search for symbol names (Ctrl + T in VSCode). Some of the handling is also synced to the Svelte TypeScript plugin so that it’s more consistent, which also means vscode can better deduplicate the results from both tsserver and Svelte language server (extensions@109.9.0, #2769)

Community Showcase

Apps & Sites built with Svelte

Planet Poster is an interactive art work inspired by a poster of, you guessed it, planets
roomy-worlds lets you create small 3d worlds and share/edit with your community
Prodcast lets you discover products curated from your favorite podcasts
Distill automates company and industry monitoring with all news, updates, and summarized insights in one place
thom.chat is an open-source alternative/clone to T3 Chat
Visual Source is a GUI for managing your projects design tokens

Learning Resources

Featuring Svelte Contributors and Ambassadors

Type-Safe Persistence and Auto-Theming in Svelte 5 by Puru VJ
$effect is fine but proxies are better and How to build Web Components with Svelte by Paolo Ricciuti

This Week in Svelte

Ep. 106 — Changelog
Ep. 107 — svelte-lexical

To Watch/Read

Sveltest is a guide to set up testing for Svelte 5 applications using the experimental vitest-browser-svelte library
A Playful Onboarding: Your first interactive animation from A to Z by Director.design
Migrating from @testing-library/svelte to vitest-browser-svelte by Scott Spence
Why Silicon Valley CTOs Are Secretly Moving Away from React by Freedium
Async Local Storage by Ross Robino
Mainmatter has a bunch of Svelte workshops in July so be sure to check those out!

Libraries, Tools & Components

shadcn-svelte v1 - after 11 months in pre-release (@next), shadcn-svelte has officially hit v1.0. Congrats!
Quaff is a component library for Svelte that follows the Material Design 3 guidelines
Neodrag v3 Alpha is out with multi-framework adapters, event delegation and more
Svelte Polaris is port of Shopify’s design system to build Shopify apps
Origin UI is a collection of copy-and-paste components for quickly build application UIs
Svelte 5 MCP Server is a specialized Model Context Protocol (MCP) server for Svelte 5 frontend development
Frizzante is a minimalistic and opinionated web server framework written in Go that uses Svelte to render pages
Storybook 9 is out now and includes updates to the Svelte CSF story format to support Svelte 5
Sheepdog supplies a simple way to introduce cancellable concurrency into your app
Flowbite Svelte now has datatable and text editor (WYSIWYG) components
Ark UI, a headless UI library, now has a Svelte version
SVAR Svelte Filter helps you add complex filtering UI and logic to data-heavy apps like admin panels or dashboards

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

Until next time 👋🏼!

What’s new in Svelte: June 2025

Dani Sandoval — Sun, 01 Jun 2025 00:00:00 GMT

In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments.

This month, we’ll share a bit about the new API along with a huge showcase of apps/sites built with Svelte...

Let’s dive in!

What’s new in Svelte and SvelteKit

Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR (#1500) or in the Svelte docs (svelte@5.29.0, language-tools@109.7.0)
Do you have actions you love and want to use them as attachments? The fromAction utility lets you convert actions into attachments (svelte@5.32.0, #15933)
Generics are now allowed on snippets - improving typing and type hints (svelte@5.30.0, language-tools@109.8.0, #15915)
The Svelte extension will now allow you to add missing imports on save (language-tools@109.6.0, #2744)
State fields can now be declared inside class constructors (svelte@5.31.0, #15820)
Svelte is now XHTML compliant and the new fragments: 'html' | 'tree' option adds wider CSP compliance (svelte@5.33.0, #15538)
Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (kit@2.21.0, #13684)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Whimsy is a small game engine and a fantasy console for making interactive stories
DASHBOT is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes
Kraa is a web-based markdown editor that does things a little differently
Shovel AI is a batch tool for interacting with large amounts of a text data with AI models
md.uy is a collaborative, local-first, peer-to-peer markdown editor
BringYourAI is a browser extension that provides instant codebase context on any AI chat website
Joe Malatesta figured out a way to present his film photos in a digital environment
Notion Avatar is a Notion-style avatar editor with Svelte 5 Runes
ORBITS is your second brain for who you know and who you meet

Learning Resources

Featuring Svelte Contributors and Ambassadors

In case you missed it, all the videos from Svelte Summit are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month’s blog post
Svelte Attachments Are Here And They’re Awesome by Joy of Code
SvelteBench (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic’s new Claude 4 models
First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works! by Stanislav Khromov (video)
Truly Native Apps with Svelte? by Paolo Ricciuti

This Week in Svelte

Ep. 102 — Svelte+Lynx and Async Svelte
Ep. 103 — Attachments
Ep. 104 — Skeleton v3.0
Ep. 105 — Changelog

To Watch/Read

Svelte’s Next Big Change? (server components soon?) by Better Stack
I spent some time using Better-Auth and Polar with SvelteKit and this is what I think by elansx
Building md.uy - Peer-to-Peer Markdown Editor by mateor

Libraries, Tools & Components

Bits UI v2 released - with support for attachments, $props.id(), Shadow DOM, and more
Composably is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time
Svelte Flow is now 1.0 - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better
fox ui is a collection UI components built with Tailwind 4 and Svelte 5 - now with a rich text editor
fluid-dnd is a drag and drop library for Vue, React and Svelte
sveltekit-password-protect is a simple utility to add a layer of protection to your websites
sveltekit-image-optimize is a simple utility that helps you create an endpoint of your svelte app that optimizes your images
svelte-inspect-value@0.7.0 introduces Panels - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website
nuqs-svelte is an unnoficial Svelte port of nuqs library - a type-safe search params state manager
sv-router is a type-safe SPA router with file-based or code-based routing
svelte-textcircle displays text in a circular layout with customizable animations and styling

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

Until next time 👋🏼!

Bringing Svelte Summit to the whole community

The Svelte team — Wed, 21 May 2025 00:00:00 GMT

This month’s Svelte Summit in Barcelona was a glorious celebration of the community. We had lively conversations, delightful dinners, and funny, imaginative and thought-provoking talks.

For everyone who couldn’t make it there in person, the conference also sold virtual tickets to the livestream, which give on-demand access to the talks. These ticket sales make it possible to (for example) hire AV technicians and ensure that the stream is reliable and high-quality. Running a conference is extremely difficult and time-consuming, and we’re very grateful to Svelte Society (Kevin in particular), Mainmatter, and everyone who bought a ticket for making the event a reality.

But we’ve heard from many of you that the talks should be freely available so that they can be shared with the widest possible audience and... we agree!

So the Svelte team has decided to sponsor the release of the talks, beginning this weekend. We’re able to do this because of the generous financial support so many of you have given us via opencollective.com/svelte, which also funds important development work on the project.

Subscribe to the Svelte Society YouTube account to be the first to know when the videos are released.

What’s new in Svelte: May 2025

Dani Sandoval — Thu, 01 May 2025 00:00:00 GMT

Only a week until Svelte Summit Spring 2025! If you can’t make it in-person to Barcelona, you can purchase a virtual ticket here.

But before that, we’ve got a few updates to highlight...

What’s new in Svelte and SvelteKit

The Svelte maintainers have been hard at work building out Asynchronous Svelte this month, but still found the time to ship some helpful features. If you’re interested in trying out the async branch, or just want to follow along with the development, check out feat: allow await in components #15844

Certain expressions will now be partially evaluated to improve runtime performance (svelte@5.27.0/5.28.0, #15494/#15781)
The Svelte CLI (sv) has added a --install <package-manager> flag to create and add to specify which package manager to use when running (cli@0.8.1, #531)
The two separate CloudFlare adapters have been merged into one: adapter-cloudflare (adapter-cloudflare@7.0.0, #13634)
adapter-vercel will now create symlink functions for each route, for better observability (adapter-vercel@5.7.0, #13679)

There were a number of fixes in SvelteKit too - including an improvement to the HandleServerError hook to give it access to getRequestEvent! (#13666)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here. Interested in all the new fixes in language tools? You can find them here.

Community Showcase

Apps & Sites built with Svelte

TableSlayer is an open source software for managing in person RPG games with digital displays (check out the video demo on Reddit)
Iconia is a free tool that understands natural language and responds with relevant icons from famous icon libraries
CMSDocs transforms your Google Docs into Blog CMS
Svelte Changelog v2 is out now and is a reimagined way of staying up to date on all the new changes in the Svelte ecosystem
Hookah UI is a visual configuration builder for the Hookah project
mockiapi is a mock API server that allows you to define endpoints, return custom JSON responses, and simulate real-world API behavior
soarSQL is an SQL editor made for analytical processing on Postgres, MySQL, and CSVs - powered by duckDB
Persona Simulator helps you practice your communication skills by chatting with different personas
Typo is a web-based markdown editor with formatting in codeblocks and typescript execution
FernOS is a lightweight operating system running inside your browser

Learning Resources

Featuring Svelte Contributors and Ambassadors

SvelteKit is the best way to build single page apps - and it just got even better! by Stanislav Khromov (Video)
Svelte London - April 2025
- Building cross-platform browser extensions with Svelte by Oliver Turner (10:52)
- Kioko: Coding CAD by Armel de Montgros and Soloman Azizi (43:00)

This Week in Svelte

Ep. 100 — Q&A with Rich Harris
Ep. 101 — Changelog

To Read

Graphite - an open source 2D procedural graphics editor built with Svelte - has released a product update blog post
Cloudflare Workers & SvelteKit: BetterAuth, Custom Domain, Google OAuth, OTP & Email - Securing Your Application by Jilles Soeters
Building a Real-time Dashboard with Flask and Svelte by Amir Tadrisi
Copying Nuxt’s useState in Qwik and Svelte by Jonathan Gamble

Libraries, Tools & Components

diaper is an advanced bottom sheet component for Svelte 5
mcp-svelte-docs is an MCP server that lets you search and access Svelte documentation with built-in caching
Version 4 of Anime.js - a popular JS animation library - has been released
DeepWiki has created a comprehensive introduction to the Svelte framework repository
Vite Static Assets Plugin is a Vite plugin that automatically scans your static assets directory, generates a type-safe TypeScript module with all asset paths to help during build or development time
Mode Watcher v1 provides simple light/dark mode management, now rewritten with first-class Svelte 5 support

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

Until next time 👋🏼!

What’s new in Svelte: April 2025

Dani Sandoval — Tue, 01 Apr 2025 00:00:00 GMT

With a couple minor releases of SvelteKit in the last month and a few more from Svelte itself, there’s a lot to be excited about this month. From new helper functions to new configuration options, we’ve got a lot to cover...

So let’s dive in!

What’s new in Svelte

The new idPrefix option for render makes client-side ID generation more reliable in the rare cases that multiple Svelte runtimes exist on a page (5.22.0, Docs, #15428)
State created in deriveds/effects can now be written/read locally without self-invalidation - reducing the number of “unsafe read”s significantly (5.24.0, #15553)
Derived statements are now writable (5.25.0/5.25.2, Docs, #15570 and #15581)
The Svelte CLI also got an upgrade to its code generation for more intuitive formatting (0.7.0, #380)
eslint-plugin-svelte v3 has been released. The main update is improved support for Svelte 5. Check out the CHANGELOG for more details.

There were also quite a few fixes to the language tools earlier in the month - so be sure to keep your plugins up to date!

What’s new in SvelteKit

reroute can now be called async - with an option to fetch if you need to pass along cookies or other request context (2.18.0/2.19.0, Docs, #13520 and #13549)
The new normalizeUrl helper provides people a way to normalize a raw URL that could contain SvelteKit-internal data (2.18.0, Docs, #13539)
getRequestEvent is a new function in $app/server that returns the current RequestEvent (2.20.0, Docs, #13582)
Updates to the cloudflare-adapter brings Wrangler 4 support, improved _headers and _redirects files, and support for specifically building for Cloudflare Workers Static Assets (5.1.0-7.0.0, CHANGELOG)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Fusion is a lightweight, self-hosted friendly RSS aggregator and reader
Brooks’ Law simulator visualizes how communication complexity grows as team size grows
ai-chatbot-svelte is a full-featured, hackable SvelteKit AI chatbot built by Vercel
raymarching-webgpu is a ray marching implementation using WebGPU and Svelte 5, shaders written in WGSL
Eurlexa lets you access and search EU regulations and directives instantly
Lars is the Wall Street Journal’s AI Tax Bot - built with Svelte and embedded into a React frontend
RT is a lightweight, ad-free Twitch frontend built with Tauri, Rust & SvelteKit
Atom Clicker is an engaging incremental game where you’ll build your own atomic empire
peasy provides modern web analytics without the clutter
svelte-lexical is a rich-text editor for Svelte and SvelteKit
sveltekit-epub-writer is an ergonomic book editor that lets you export to EPUB in one click

Learning Resources

Featuring Svelte Contributors and Ambassadors

Why re-renders hurt performance and how you can fix them in Svelte 5 by Stanislav Khromov
Runes and Global state: do’s and don’ts by Paolo Ricciuti
Learn How To Make Interactive 3D Apps With Svelte And Threlte by Joy of Code
Svelte London - March 2025 featuring:
- SvelteKit and SST by Andrico Karoulla
- Mythbusters! Svelte Ecosystem Edition by Willow (GHOST)

This Week in Svelte

Ep. 96 — durable objects
Ep. 97 — stick to botton
Ep. 97 — Changelog
Ep. 99 — Custom Select

To Watch

Deploying Svelte Kit on DigitalOcean App Platform (awesome Vercel alternative) + Tailwind by Elans Builds

To Read

Recursive Svelte Components by Martin Brandenburg
Building a Real-time Dashboard with FastAPI and Svelte by Amir Tadrisi Amir Tadrisi
A short guide to Async Components in Svelte 5 by Abdullah Bashir
SvelteKit 5: How to make code-based router, instead of file-based router by Max Core
Integrating tRPC with SvelteKit by Robert Soriano

Libraries, Tools & Components

Bun has added official support for Svelte as a frontend framework for their bundler
Skeleton v3.0 is now available - including Svelte 5 support, Tailwind 4 and a more modular structure
SaapsUI is a comprehensive Svelte component library designed for creating responsive, accessible, and beautiful user interfaces with minimal effort
SVAR Svelte v2.1 has added new UI components - including DataGrid and Gantt charts
cnblocks provides 50+ UI & Marketing blocks using Svelte 5, Tailwind CSS v4 and Shadcn Svelte
Edra is a Headless & ShadCN-Powered Rich Text Editor for Svelte Developers
Paraglide, the i18n library for supporting multiple languages in your Svelte app, release their 2.0 version
oRPC helps you build type-safe APIs for Svelte and TanStack Svelte Query
Sveltepress is a content centered site build tool, built on top of Sveltekit
Konva.js is a declarative 2D Canvas for Svelte apps
Svelte Inspect Value is a “JSON tree”-like value inspector
Svelte 5 Snippets offers reusable code templates to accelerate development and ensure consistent coding practices in VS Code

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

Until next time 👋🏼!

What’s new in Svelte: March 2025

Dani Sandoval — Sat, 01 Mar 2025 00:00:00 GMT

SvelteHack 2024 has ended and the winners were announced on February 9th. Congrats to all the winners who you’ll also find listed in the “Community Showcase” below.

But before we dive into that, let’s get to some updates!

What’s new in Svelte and SvelteKit

Native support for Websockets in SvelteKit is now available for testing! You can install the version of SvelteKit from the PR using pkg.pr.new and the PR number (How To Install, PR/Docs)
$props.id() provides SSR-safe ID generation - unique for each instance of a component (Svelte@5.20.0, Docs, #15185)
SvelteKit now supports an option for server-side route resolution. This means that instead of loading the whole routing manifest in the client, and doing the route resolution there, the server runtime is invoked for each route request (Kit@2.17.0, docs, pull request)
The values for cache-control and content-type headers are now validated in dev mode to help catch invalid values early (2.17.0, #13114)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Faviconizer is a simple, functional favicon (.ico) converter made with SvelteKit
stocknear is an open source stock analysis & community platform (congrats on 2 years of development!)
Workouts is a simple and private app for tracking your strength training workouts
Perplexity Fast Chat is a modern web interface to interact with Perplexity AI and OpenAI models, featuring a unique deep research mode
exiftool-web is an exif data inspector tool, in the browser (via WebAssembly!)
Weekend Scanner helps you find long weekends by combining your weekends and holidays
Linklink is a link management tool for organising and sharing links
Multiplayer Globe App displays website visitor locations in real-time using Astro, Cloudflare and Redis
Mathesar is an intuitive spreadsheet-like interface that lets users of all technical skill levels view, edit, query, and collaborate on Postgres data directly
Squash lets you compress and convert your images to AVIF, JPEG, JPEG XL, PNG, or WebP
Segment Anything 2 in WebGPU is a WebGPU implementation of Facebook Research’s model

Svelte Hack Wizzbangery Wizard Winners

kunkun is an open source, cross-platform, extensible app launcher (like Raycast) - it’s also the winner of SvelteHack 2024 🏆
Infinite Turtles is a card game made with Threlte
Svudoku is a modern-looking Sudoku application that lets you enjoy solving both Classic and Killer Sudoku puzzles
Svelte Space is a TowerDefence clicker game made with Svelte 5, without canvas. Playable on different screens, Mobile or Desktop.
Haunted house is an old-school arcade game where you explore a haunted mansion full of ghosts. Control plasma bullets, use your wits and clear the whole house! Created only with Svelte 5.

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Hack 2024 Winners Announcement Livestream featuring GHOST, Paulo and Dominik
20 Svelte Features You Missed During Advent Of Svelte by Joy of Code
Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way) by Stanislav Khromov
Svelte London - February 2025

This Week in Svelte

Ep. 92 — Changelog and Showcase
Ep. 93 — Changelog, dynamic layouts with snippets
Ep. 94 — Go + Svelte as a hybrid SPA/MPA application
Ep. 95 — Changelog

To Watch

GitHub Copilot: the agent awakens uses SvelteKit as their example project 🙌🏼
Full Stack E-Commerce + Dashboard: Svelte 5, Cloudflare, Tailwind, Drizzle, Sqlite, 2025 by Lawal Adebola

To Read

How to Protect Your SvelteKit Routes by Yuki Ishii
Sharing Runes in Svelte 5 with the Rune Class by Jonathan Gamble
Mixed Signals with Svelte 5 from the FullMeasure Blog
Did Svelte 5 Get Runed with Complexity? by sobPilot
Background Jobs in SvelteKit with BullMQ by Ranjan Purbey

Libraries, Tools & Components

Svelte Form Builder helps you create forms with Shadcn-Svelte, Superforms and schema within minutes
shadcn-svelte-enhancements is a collection of additional components designed specifically for Shadcn-Svelte
lomer-ui provides standalone components for Svelte powered by Tailwind CSS
Vite Plugin Svelte Anywhere empowers developers to define reusable custom elements directly within their Svelte components
Svelte 5 + SvelteKit Sage is a custom GPT to get the best answers out of ChatGPT
ModalFileManager and PersonalKanban have been updated to work with Svelte 5 (and fix a large number of bugs)
components-pack provides photos-related UI components for Svelte 5, Vue 3, Astro 5 and vanilla JS

Svelte Hack Rune Ritualist Winners

SyncroState brings Svelte 5 reactivity DX to the multiplayer level. Built on top of Yjs, it’s a typesafe, efficient and dead simple way to manage multiplayer state. It is just like a normal $state but synchronised in realtime.
Twoslash Svelte is an extension of twoslashes/twoslash which supports Svelte. This will be beneficial for adding type hints to code blocks on any documentation website targeting Svelte.
svisx is a port of Airbnb’s visx to Svelte, bringing the power of D3 visualizations to the Svelte ecosystem.
Svelte Value Inspect is a “json tree”-like inspector inspired by the likes of react-json-view, and svelte-json-tree.
Flexiboards provides headless, reactive drag and drop components for Svelte 5.

Svelte Hack Migration Magician Winners

Svelte MapLibre GL lets you build interactive web maps effortlessly with MapLibre GL JS and Svelte 5.
svelte-ux is a collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
rokkit is a data-driven, configurable, and themeable UI library built for use with Svelte. Rokkit controls are designed to be easily themeable, so you can match the look and feel of your project with minimal effort.
Svelte MiniApps is a collection of user-friendly tools rebuilt with Svelte 5 for enhanced speed and reliability
Roguelighter Engine is a free, open-source, easy-to-use game engine for 2D game development.

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

Until next time 👋🏼!

What’s new in Svelte: February 2025

Dani Sandoval — Sat, 01 Feb 2025 00:00:00 GMT

The Svelte developer experience got a huge upgrade this month with more exported types and better syntax highlighting in VS Code. Combine that with the huge releases from Storybook, Tailwind and Threlte... and you’ve got a pretty big month!

Let’s dive in 🐬

What’s new in Svelte

Non-numeric values can now be tweened by snapping immediately to the new value (5.17.0, Docs, #14941)
const tags are now allowed inside of a svelte:boundary (5.17.5, Docs, #14993)
<template> elements are now allowed to contain any child elements (5.18.0, Docs, #15007)
ClassValue is now exposed from svelte/elements (5.19.0, Docs), #15035)

What’s new in SvelteKit and Language Tools

Custom identifiers can now be invalidated on goto() navigation (2.16.0, Docs, #13256)
The postinstall script has been removed to support pnpm 10 (2.16.0, #13304)
- users should add "prepare": "svelte-kit sync" to their package.json in order to avoid the a warning upon first running Vite
PageProps and LayoutProps types are now provided (2.16.0, #13308)
The generics attribute is now supported for JSDoc (svelte2tsx-0.7.32/svelte-check-4.1.2, #2624)
Semantic document highlighting makes the document highlights based on semantic/syntactic meaning instead of the current word-based default by VSCode (language-server-0.17.9, Docs, #1408)

Community Showcase

Apps & Sites built with Svelte

Daily Tokki is daily personalized Korean learning delivered right to your inbox
svelte-tower-defence is a tower defense clicker game built with Svelte 5, without canvas, using only CSS transitions and the Runes
PraccJS lets you practice JavaScript with real-time code execution
Invoice-r calculates what you’re owed from the information you give and makes your invoice look good
Carry Fit is an online carry-on luggage compliance checker
Fiddle (currently in waitlist stage) lets you design, collaborate and experiment in code
Kener is a modern status page with batteries included
Open TLC is a free, open source CAT (Computer-Assisted Translation) tool
Mathesar is a secure, spreadsheet-like tool for Postgres data
Pile Commander is an open-source file manager for creative people
Hetzner Auction Browser is a better way to find the perfect server in Hetzner’s Server-Bidding marketplace

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5 And The Future Of Frameworks: A Chat With Rich Harris by Frederick O’Brien
Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way) by Stanislav Khromov

Svelte Radio

This Week in Svelte

Ep. 89 — Sailkit
Ep. 90 — Svelte Radar VS Code Extension
Ep. 91 — Threlte 8

To Read

Dockerize SvelteKit with adapter-static and Nginx, Analyze and optimize your Vite bundle and End-to-end type safety with Svelte 5 and SvelteKit 2 by Hugo Sum

Libraries, Tools & Components

Svelte Radar is a VS Code extension that provides a visual overview of your project’s routing structure
Threlte 8 is out and is more performant, flexible and aligned with Svelte 5
Storybook 8.5 includes Svelte Storybook Test support - improving testing in Svelte CSF stories
SVAR for Svelte provides feature-rich Svelte UI Components
Tailwind CSS v4.0 has been released - with a new engine, simpler installation and more
Frizzante is a procedural, minimalistic and opinionated web server that uses Svelte to render web pages
svelte-5-dashboard is a boilerplate for Svelte 5 dashboards. Including alerts, avatars, custom formatting and more
dnd-kit-svelte is a Svelte 5 dnd-kit port
youva provides pagination, debounced search, sorting, filtering and caching for SvelteKit

That’s it for the review of Svelte’s first month of 2025! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: January 2025

Dani Sandoval — Wed, 01 Jan 2025 00:00:00 GMT

From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there’s even more to look forward to... like the 10th Svelte Summit! Join the Svelte community online or in-person in Barcelona: May 8th and 9th.

Now let’s get to the news 👀

What’s new in Svelte

Snippets can now be exported from module scripts (5.5.0, Docs, #14315)
defaultValue and defaultChecked are now supported for inputs (5.6.0, Docs, #14289)
The loose parser mode creates a more modern AST for developer tools to consume (5.13.0, Docs, #14691)
A new “worker” exports condition helps better support bundling for worker-based environments (5.15.0, #14779)
The class attribute can now be an object or array, using clsx (5.16.0, Docs, #14714)

New/Updated Syntax

<svelte:boundary> is a new special element that can capture errors that occur from within its subtree during client rendering (5.3.0, Docs, #14211)
#each is now supported without as (5.4.0, Docs, #14396)
The new Spring and Tween classes in svelte/motion make it even easier to build custom animation (5.8.0, Docs, #11519)
The new outro option in unmount will play transitions before the component is removed from the DOM. (5.13.0, Docs, #14540)
The $inspect.trace rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (5.14.0, Docs, #14290)

Reactivity APIs

createSubscriber creates reactive values that depend on subscriptions (5.7.0, Docs, #14422)
The reactive MediaQuery class creates a media query and provides a current property that reflects whether or not it matches (5.7.0, Docs, #14422)
Getters and setters can now be bound to with bind (5.9.0, Docs, #14307)
The svelte/reactivity/window module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (5.11.0, Docs, #14660)

What’s new in SvelteKit, Svelte CLI and Language Tools

The new init hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (2.10.0, Docs, #13103)
The new transport hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (2.11.0, #13149)
The new $app/state module replaces the existing $app/stores module but using Svelte 5 state. The migrate tool in the CLI/language tools have been updated to match (2.12.0, Docs, #13140)
bundleStrategy lets you choose between 'split', 'single' and 'inline' output options for JS and CSS files (2.13.0 and 2.15.0, Docs, #13173 and #13193)
The new sveltekit-adapter add-on for the Svelte CLI (sv) installs and replaces existing SvelteKit adapters (Docs, #346)
The language tools extensions will now make use of loose Svelte parser and provide better intellisense (109.4.0, #2631)

Adapter Updates

adapter-auto has added support for the bun language server (3.3.0, #12854)
adapter-cloudflare-workers now supports wrangler.json config files (2.7.0, #13151)
adapter-cloudflare will now generate an .assetsignore file for use with Cloudflare Workers Static Assets (4.9.0, #13109)

Community Showcase

Apps & Sites built with Svelte

Tokeko is an educational platform designed to help users understand and learn about different types of parsers, grammar structures, and parsing techniques
QuickFlags is a fast paced, simple, flag knowledge game
Hotspotter is an incentivized crowdsensing system that collects, maps, and visualizes WiFi and cellular data to pinpoint hotspots and dead zones for the effective visualization of network coverage
Writastic is an AI social media writing assistant to optimize your content with the best strategies of successful creators
Walle is a macOS chatbot app that lets you interact with Claude, GPT, and Gemini simultaneously
Fli.so is a free, modern open-source link shortener
VRDB is a comprehensive database for Meta Quest Store, App Lab, and VR games
sv-resize-image resizes images using just the browser
WickGPT is an online tool to generate fake clips of chatGPT responses
other.supply is a virtual vinyl shop that simulates the record-flipping experience

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte at Bloomberg (feat Julian Burgess) and Scott Tolinski on Svelte 5 Local First Development by Svelte Radio
Rich Harris’ North Star at JSNation US 2024
Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot by Stanislav Khromov
Svelte 5 Is Here! and View Transitions Are More Powerful Than You Think by Syntax

This Week in Svelte

Ep. 86 — Tabs component
Ep. 87 — GPU rendered components with svader
Ep. 88 — Live coding local storage

To Read

Building accessible sites with SvelteKit: seven practical tips by Antonio Sarcevic
How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data by Yuki Ishii
Svelte Job’s Svelte Salaries Report shows average and median salaries across remote, non-remote positions, locations, and seniority levels

To Watch

Build & Launch a Svelte Website in Just 15 Minutes! by NAD LABS
The Magic of Svelte by Jürg Hunziker, Vendure Conf 2024

Libraries, Tools & Components

The Svelte docs are now available in an LLM-friendly format (shout out to Stanislav Khromov for svelte-llm)
svelte-mainloop is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component (Reddit)
bsky-comments-svelte is a simple customizable component to add comments to your website using Bluesky
Svelte Mini Router is a declarative, minimal SPA router for Svelte 5, without SvelteKit
svelte-firebase-state simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data
monoco-svelte lets you create custom (squircle) corners and borders for Svelte components
svelte-audio-waveform transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more
Svader creates GPU-rendered Svelte components with WebGL and WebGPU fragment shaders

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

Happy new year! 🥳

What’s new in Svelte: December 2024

Dani Sandoval — Sun, 01 Dec 2024 00:00:00 GMT

I can’t believe it’s already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉

As we look forward to the next year and watch the Svelte team do 24 features in 24 days, let’s dive into what’s new in the past month...

What’s new in Svelte

The bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you’re noticing anything weird, make sure you upgrade to the latest version and, as always, check out the CHANGELOG for all the bug fixes.

The features since last month can be found below:

ContentVisibilityAutoStateChangeEvent has been added to element definitions (5.2.5, MDN Docs, #14373)

What’s new in SvelteKit, Svelte CLI and Language Tools

isActionFailure is a new helper method to check if a variable is an instanceof ActionFailure - helpful for debugging parsing of user input (2.8.0, #12878)
const load = ... declarations will now be typed automatically (svelte2tsx-0.7.23, #2540)
The CLI will now include a jsconfig.json in the ‘no type checking’ template (0.6.2, #290)
When installing dependencies, the CLI will display the package manager’s output (0.6.3, #305)
A short description will now be shown for each add-on in the CLI menu (0.6.5, #299)
Instance types will now be provided automatically in Svelte 5 (svelte2tsx-0.7.23, #2553)
A code lens indicator for “runes mode” will now appear atop a file when detected - “legacy mode” when not (language-server-0.17.4, #2554)

Community Showcase

Apps & Sites built with Svelte

Unsubscribe is an interactive site that makes fun of how hard it is to unsubscribe from things on the internet these days
Dealcrane helps technology shoppers find discounts across popular internet shopping sites
Raw Web is a search engine for indexing the content of independent, especially personal, websites
Jovian Moon’s personal site features an interactive rocket ship to fly you straight to Jupiter (or anywhere else you want to go)
Font Preview makes it easy to analyze and explore font characters in the browser
Dunks & Threes is a professional basketball analysis platform that provides data-driven NBA predictions
AdresseDuBien is a small utility to find addresses for real estate ads (for France) with a Libre Map implementation
PixelAttack takes an image, pixelizes it and makes the pixels fight each other
NeoHtop is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI
WebVM is a Linux virtual machine that runs in your browser
Sveltris is Tetris built entirely in the Svelte REPL

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 🧡 is a Bluesky feed to keep up to date on Svelte news in that application
SvelteKit Streaming: The Complete Guide by Stanislav Khromov
Remote Workshop: Svelte 5 & Runes is taking place February 6-7th, 2025 and taught by Paolo Ricciuti
Svelte 5: In Action | Build A Tasks App by Syntax
Svelte Society London - featuring Paolo with his talk, Herd your async tasks!

This Week in Svelte

Ep. 83 — You might not need an effect
Ep. 84 — manifest.build
Ep. 85 — @sheepdog/svelte

To Read

Web software development (2024) is a self-study course for all things web development and features Svelte heavily
Async Fetching in Svelte 5 by Jonathan Gamble
Cross-Origin-Isolation with SvelteKit, Vite, and Firebase by Captain Codeman
The $effect.tracking rune by Matt Simon

Libraries, Tools & Components

Component Libraries

shadcn-svelte now supports Svelte 5 and has brand new docs to go with the update
Zag now supports Svelte 5
Skeleton V3 is now in beta (and, as expected, supports Svelte 5)
Storybook 8.4 now supports Svelte 5 and CSF natively with component testing built-in

Icon Libraries

svelicon converts Iconify SVG icons to type-safe components with one command
moving icons is a collection of animated icons based on the lucide icon library
Monicon is an all-in-one icon library that provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome

Everything Else

Svelte Multitone Image is a simple image renderer to apply multitone effects for Svelte
number-flow is a component to transition, format, and localize numbers
sveltednd is a lightweight, flexible drag and drop library for Svelte 5 applications
ShadEditor is a highly extensible text editor for svelte made with TipTap and ShadCN UI
Tipex is an advanced rich text editor based on Tiptap and Prosemirror
svelte-bundle is a tool for bundling Svelte components into a single HTML file
svelte5-router is an SPA router that allows you to divide & conquer your app with nested routers
@sheepdog/svelte is a library to manage async tasks and concurrency with ease.

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

Until next ~~time~~ year! 👋

Advent of Svelte

The Svelte team — Sun, 01 Dec 2024 00:00:00 GMT

Last December, Svelte Society presented an advent calendar’s worth of festive Svelte-themed code challenges.

This year, we’re turning it around: you get to relax while we take on a challenge. We’ve set ourselves a goal of releasing one thing a day from here until Christmas, whether it’s a new feature in Svelte or SvelteKit or an improvement to the website.

Follow @svelte.dev and @sveltesociety.dev and check back every day to see what we’ve been cooking up.

Day 1: error boundaries

This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.

Day 2: each without as

If you just want to render something in an {#each ...} block n times, and don’t care about the value, you can now omit the as part.

docs
demo

Day 3: exported snippets

You can now export snippets from a component’s <script module>, for use in other components, as long as those snippets don’t reference anything belonging to the component instance.

docs
demo

Day 4: form control default values

When you reset a form, the value of each <input> element reverts to its defaultValue. This is normally the empty string, but you can now control it directly in your template.

docs
demo

Day 5: MediaQuery, prefersReducedMotion and createSubscriber

It’s a three-in-one kind of day. new MediaQuery(...) gives you an object with a reactive current property that’s true when the media query matches. prefersReducedMotion is an instance of MediaQuery that matches if the user has expressed a preference for reduced motion, helping you build accessible apps. Under the hood, both are using the createSubscriber mechanism, which gives you an easy way to set up event listeners when a value is read inside an effect.

Day 6: Spring and Tween

We now have modern state-based alternatives to the spring and tweened stores of old. Smooth!

A lot of you disliked the dropdown navigation for the tutorial — essentially a giant, unwieldy <select> element — so we’ve replaced it with a hierarchical menu. Because it’s all just <details> and <a> elements, we get accessibility features for free. You can even navigate the tutorial with JavaScript disabled!

tutorial

Day 8: function bindings

You can now do bind:value={get, set} to validate and transform bound values. This works for all bindings, even on components.

docs
demo

Day 9: error and warning documentation

When Svelte emits a warning or error (whether at build time, when the compiler is running, or when the app is running on the server or in the browser) it will now be accompanied by a link to the corresponding entry in the documentation containing a description (which is omitted from production builds, to save bytes) and — in some cases, with more to come — more details on why it happened and what you can do to fix it.

demo

Day 10: SvelteKit init hooks

A lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an init function from hooks.server.js and hooks.client.js that will be awaited before any other stuff happens.

docs

Day 11: svelte/reactivity/window

Today we added a whole new module. svelte/reactivity/window exports a variety of reactive values like innerWidth, innerHeight, scrollX, scrollY and so on. Like the MediaQuery introduced on day 5 and Spring and Tween from day 6, these are class instances with a reactive current property that you can use in your template and in deriveds/effects. Behind the scenes, Svelte handles all the event listener stuff.

docs
demo

Day 12: custom type transport in SvelteKit

A load function that runs on the server in your SvelteKit app isn’t restricted to returning things that can be serialized as JSON. You can return Maps, Sets, Dates, objects with cyclical references, even Promises, and SvelteKit will handle the serialization on the server and deserialization in the browser.

As of today, you can also return things that aren’t built in to the language, such as classes containing state, or classes returned by your database ORM library, or whatever — just export a transport object from your hooks.js that provides an encode and decode function.

docs
demo

Day 13: rise of the robots

For those of you using LLMs to help you write code — via Cursor or Copilot or Claude or Bolt or v0 or some other interface — we now publish the documentation in a selection of robot-friendly llms.txt files. This is experimental and will evolve over time, but by way of example here’s a snake game built by Sonnet 3.5 with no additional prompting.

Thanks to Didier Catz and Stanislav Khromov for building this!

docs

Day 14: unmount with outros

Now, if you need to programmatically mount and unmount a component, you can now pass an outro: true option to unmount to play transitions before it is removed from the DOM.

docs
demo

Day 15: debugging superpowers

The new $inspect.trace(...) rune gives you detailed information about which state changes caused a derived or effect to re-run.

docs
demo

Day 16: $app/state

SvelteKit’s $app/stores module, which gives you a way to access information about (for example) the current page, now has a modern Svelte 5 state-based counterpart: $app/state. It exposes all the same information, but using fine-grained state, and without the clunky $ prefix. $app/stores is now deprecated, and will be removed in SvelteKit 3 next year.

You can migrate automatically by running the following command in your SvelteKit app:

npx sv migrate app-state

Day 17: better IntelliSense

The parser used by the language tools that power things like the Svelte for VS Code extension is the same one used by the Svelte compiler. Until today, it would fail if it encountered a syntax error, making it hard to provide things like autocomplete while you were in the middle of writing code.

We just fixed that. Install the latest version of Svelte in your project, make sure your extensions are up to date, and feel the wind in your hair as you write your components.

demo video

Day 18: playground hovers

If you’ve ever wondered how the Svelte compiler works, today’s update is for you. If you go to the playground and open the AST output tab, you’ll see the abstract syntax tree that the compiler operates on. As of today, hovering over code in the editor will highlight the corresponding section of the AST and vice versa. Clicking on a piece of code will expand the tree and scroll to the AST.

The JS and CSS output tabs have also been upgraded — they now use sourcemaps to highlight the output code that corresponds to a given piece input, where applicable, and vice versa. We plan to use this to improve the sourcemaps themselves, which over time will result in smoother debugging when you’re building Svelte apps.

Day 19: single-file SvelteKit bundles

By default, SvelteKit uses a technique called code-splitting so that you only load the JavaScript and CSS you need for the page you’re currently on. This helps make sure your app loads fast even if it grows very large.

In some situations, code-splitting is unhelpful — what you really want is a single .js file and a single .css file for your entire app. SvelteKit now supports this with the output.bundleStrategy option.

docs
example

Day 20: Vim mode

The playground had a secret Vim mode that you could activate by appending ?vim=true to the URL, but it was buggy. We’ve fixed it, and added a toggle to the playground and the tutorial that remembers your preference between visits. But don’t worry: unlike normal Vim, you can quit by turning it off again (or closing the tab).

Day 21: hash-based routing

SvelteKit now supports hash-based routing, in addition to the default pathname-based routing. This can be useful for purely client-side apps (including those you might build with Electron or Tauri), or situations where you don’t control the webserver and need to put everything on a single page.

It comes with caveats — you can’t use server-rendering (or any server logic), and you need to make sure all your internal links start with /#/ or they won’t work. Other than, it’s just like any other SvelteKit app.

docs
demo

Day 22: self-contained apps

Following the introduction of the bundleStrategy option on day 19, and hash-based routing yesterday, we now have the ability to generate fully self-contained apps with the bundleStrategy: 'inline' option. Together with Vite’s assetsInlineLimit option, it’s possible to put an entire SvelteKit app — code, styles, fonts, images, audio and everything else — inside a single .html file that you can share with people on a floppy disk.

Day 23: download from playground

We’ve added a ‘download app’ option to the toolbox in the playground — selecting it will zip up the app, along with any packages you’ve imported, and download it to your machine so you can continue working on it in your editor of choice.

playground

Day 24: clsx built in

Svelte now uses clsx to parse class attributes, meaning you can use objects and arrays to conditionally add and remove classes. It’s much more powerful and flexible than the class: directive, and — since this is Svelte — you still get dead code elimination of unused CSS. This feature is particularly useful for all you Tailwind-heads.

And that’s a wrap! Thanks for following along, everyone, and Merry Christmas to all who celebrate.

What’s new in Svelte: November 2024

Dani Sandoval — Fri, 01 Nov 2024 00:00:00 GMT

In case you missed the announcement post, the brand new omnisite or the maintainers shipping it LIVE during Svelte Summit... Svelte 5 is out!

Also announced at Svelte Summit was SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes). The submission period ends January 9 and only projects started after October 18th are eligible. So get those $s ready and start hacking!

Since the release of Svelte 5, there’s already been one minor version to introduce a couple of helpful features. We’ll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month’s roundup...

What’s new in Svelte

If you’ve only recently migrated to Svelte 5, check out the last few months of updates for all the features that have gone into this release. For this month, you’ll see some marked -next.XXX. These changes were in the 5.0 release.

Snippets can now be used to fill slots (5.0.0-next.262, #13427)
hidden until-found and beforematch are now available on DOM elements (5.0.0-next.266, MDN Docs, #13612)
Breaking: State mutations are not allowed in logic block expressions (5.0.0-next.269, #13625)
getContext() is now allowed within $derived runes (5.1.0, Docs, #13830)

To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the CHANGELOG.

What’s new in SvelteKit, Svelte CLI and Language Tools

adapter-auto now supports the Bun package manager (3.3.1, #12854)
The Svelte CLI now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in the CLI Repository or by running npx sv create from your command line.
The Svelte extension now provides a Svelte 5 component migration command (extensions-109.1.0)

Community Showcase

Apps & Sites built with Svelte

DocumentCloud is an all-in-one platform used by newsrooms around the world to manage primary source documents
Chord is an app for recording podcasts and interviews in high quality
Monokai.pro uses Svelte 5 now (See the Reddit Post for more details)
svelte audio visualizations are useful for visualizing voice input and output
avi12’s YouTube extensions are great examples of how Svelte can be used in Chrome extensions
Multy is a simple tool that allows you to create a list of URLs, and share it with a single link
BlackJack is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Summit Fall 2024 was a blast! Keep an eye out on this playlist to see all the talks split up into individual videos
Svelte 5 Basics - Complete Svelte 5 Course for Beginners by Syntax
Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions by Stanislav Khromov

This Week in Svelte

Ep. 79 — Changelog, Global/shared state, Kampsy-ui
Ep. 80 — Changelog, formgator
Ep. 81 — Changelog, Inertia.js
Ep. 82 — Changelog, Migration guide

To Read

Speed of Svelte reactive bindings vs keyboard events by Zell Liew
SvelteKit + Passkeys by Passlock
Local-First Web Development with Replicache: Building smooth user experiences by Shootmail
10 game-changing tools that level up Svelte developers in 2025 by Sébastien Conejo

To Watch

Svelte 5 Is Like React, But Better by Theo - t3․gg
JavaScript framework reinvents itself… Did “runes” just ruin Svelte? by Fireship

Libraries, Tools & Components

Svelte 5 testing example is a good example project demonstrating how to test Svelte 5 applications with Vitest
Origin UI - Svelte is an extensive collection of copy-and-paste components for quickly building app UIs
Cancellable is a building block adds three reactive attributes to button and anchor elements to create a more consistent user experience across browsers and platforms
svelte-simple-router is a client-side router made for Svelte 5
svelte-openai-realtime-api is a Svelte component for using the OpenAI realtime api
FlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins
Svelte-Next automates Svelte version updates
SvelteKit Dynamic Component Load demo shows how you can dynamically load different Svelte components depending on what content your backend API delivers
Tzezar’s datagrid is an easy to use, easy to customize, datagrid made in Svelte 5
svelte-bundle is a tool for bundling Svelte components into single HTML files (with SSR!)
svelte-virtuallists keeps your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists
Sveltick is a lightweight traffic-tracking library for your Svelte apps

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

Until next time 👋

Introducing the new Svelte CLI

Ben McCann — Thu, 24 Oct 2024 00:00:00 GMT

We’ve just released sv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects.

One of the most common question we hear is “how do I set up Tailwind on my new project?”. Tailwind has SvelteKit documentation, but it lists eight steps. While the community-led svelte-add project could automate the process, few knew about it.

Introducing sv at Svelte Summit Fall 2024

Now, we’re offering that functionality via our own CLI, directly within the project creation screen. And not just for Tailwind — we have built-in add-ons for formatting, linting, testing, setting up databases and auth and i18n and more. Just run npx sv create and follow the prompts:

$ npx sv create

┌  Welcome to the Svelte CLI! (v0.5.8)
│
◇  Where would you like your project to be created?
│  my-new-app
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier (https://prettier.io)
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└

You can also run npx sv add to apply add-ons to existing projects. In the near future, we will also be supporting add-ons contributed by the community within sv. If you’re interested in building one, please subscribe to the issue in the CLI repository to be notified when third party add-ons are supported.

It doesn’t stop there. Over time, Svelte has accumulated a handful of CLIs: svelte-check type-checks your project from the command line, npx svelte-migrate helps you upgrade to new major versions, and in the future we might have even more capabilities. Remembering the package name of each tool is cumbersome, which is why we unify the experience under one roof, sv. That means you can now run sv migrate svelte-5 to upgrade your Svelte 4 projects to Svelte 5. (The migration functionality can also be found in Svelte for VS Code as well as in the playground.)

A huge thank you to Christopher Brown (chbrown) who donated the sv package name on npm to make this CLI possible. This package merges the previous create-svelte and community-led svelte-add tools into a single package. Thank you to Manuel (manuel3108) and Adrian (CokaKoala) who recently took over maintenance of the svelte-add project and have joined as the newest Svelte maintainers in making this project an official part of Svelte. Also thank you to J (babichjacob) for creating the svelte-add project and successfully stewarding it for years as an important part of the Svelte community.

To see the CLI in action, check out this demo from Ben Davis and t3.gg...

Introducing sv at Svelte Summit Fall 2024

...or run npx sv to try it out yourself.

Svelte 5 is alive

The Svelte team — Tue, 22 Oct 2024 00:00:00 GMT

After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable.

It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn.

Despite all that, Svelte is almost completely backwards-compatible with Svelte 4 — for the majority of users, the initial upgrade will be completely seamless:

{
	"devDependencies": {
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5",
		// …
	}
}

What is Svelte?

Svelte is a framework for building user interfaces on the web. It uses a compiler to convert declarative component code, based on HTML, CSS and JavaScript, into tightly optimised JavaScript.

Because the compiler shifts a lot of the work out of the browser and into npm run build, Svelte apps are small and fast. But beyond that, Svelte is designed to be an enjoyable and intuitive way to build apps: it prioritises getting stuff done.

The team behind Svelte also maintains SvelteKit, an application framework that handles routing and data loading and server-side rendering and all the gory details that go into building modern websites and apps.

What changed, and why?

For one thing, we’ve overhauled our website. You can read more about that here.

As for Svelte itself, we’ll cover the why first. We’re not fans of change for change’s sake — in fact, Svelte changed less than any other major framework between 2019 (when we launched Svelte 3) and now, which is an eon in front end development. And people really liked Svelte 3 and 4 — it routinely tops developer surveys of satisfaction.

So when we make changes, we don’t make them lightly.

With more and more people building more and bigger applications with Svelte, the limitations of some of our original design decisions started to become more apparent. For example, in Svelte 4, reactivity is driven entirely by the compiler. If you change a single property of a reactive object in Svelte 4, the entire object is invalidated, because that’s all the compiler can realistically do. Meanwhile, other frameworks have adopted fine-grained reactivity based on signals, leapfrogging Svelte’s performance.

Equally, component composition is more awkward in Svelte 4 than it should be, largely because it treats event handlers and ‘slotted content’ as separate concepts, distinct from the props that are passed to components. This is because in 2019 it seemed likely that web components would become the primary distribution mechanism for components, and we wanted to align with the platform. This was a mistake.

And while the $: construct for reactively re-running statements is a neat trick, it turned out to be a footgun. It conflated two concepts (derived state and side-effects) that really should be kept separate, and because dependencies are determined when the statement is compiled (rather than when it runs), it resists refactoring and becomes a magnet for complexity.

Svelte 5 removes these inconsistencies and footguns. It introduces runes, an explicit mechanism for (among other things) declaring reactive state:

let count = 0;
let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

Interacting with state is unchanged: with Svelte — unlike other frameworks — count is just a number, rather than a function, or an object with a value property, or something that can only be changed with a corresponding setCount:

function function increment(): voidincrement() {
	let count: numbercount += 1;
	var console: Consoleconsole.Console.log(...data: any[]): voidMDN Reference
log({ count: numbercount });
}

Runes can be used in .svelte.js and .svelte.ts modules in addition to .svelte components, meaning you can create reusable reactive logic using a single mechanism.

Event handlers are now just props like any other, making it easy to (for example) know whether the user of your component supplied a particular event handler (which can be useful for avoiding expensive setup work), or to spread arbitrary event handlers onto some element — things that are particularly important for library authors.

And the slot mechanism for passing content between components (together with the confusing let: and <svelte:fragment> syntax) has been replaced with {#snippet …}, a much more powerful tool.

Beyond these changes are countless improvements: native TypeScript support (no more preprocessors!), many bugfixes, and performance and scalability improvements across the board.

How do I upgrade?

If you’re currently on Svelte 3, begin by migrating to Svelte 4.

From there, you can update your package.json to use the newest version of svelte and ancillary dependencies like vite-plugin-svelte.

You don’t have to update your components immediately — in almost all cases, your app will continue working as-is (except faster). But we recommend that you begin to migrate your components to use the new syntax and features. You can migrate your entire app with npx sv migrate svelte-5, or — if you’re using VS Code with the Svelte extension — you can migrate components one at a time by selecting ‘Migrate Component to Svelte 5 Syntax’ in your command palette.

Svelte has a large and robust ecosystem of component libraries that you can use in your applications such as shadcn-svelte, Skeleton, and Flowbite Svelte. But you don’t have to wait for these libraries to upgrade to Svelte 5 in order to upgrade your own application.

Eventually, support for Svelte 4 syntax will be phased out, but this won’t happen for a while and you’ll have plenty of warning.

For more details, see the comprehensive Svelte 5 migration guide.

Our new CLI

Along with a new version of Svelte, we have a new Command Line Interface (CLI), sv, to go with it. You can learn all about it in the announcement blog post.

What’s next?

We plan to release a new version of SvelteKit in the near future that takes advantage of the new Svelte 5 features. In the meantime, you can use Svelte 5 with SvelteKit today, and npx sv create will create a new SvelteKit project with Svelte 5 installed alongside it.

After that, we have a laundry list of ideas we want to implement in Svelte itself. This release is the foundation for many improvements that would have been impossible to build on top of Svelte 4, and we can’t wait to roll up our sleeves.

The Omnisite

Rich Harris — Mon, 21 Oct 2024 00:00:00 GMT

Launching Svelte 5 and the brand new sv CLI wasn’t enough: we’ve also released a brand new website. You’re looking at it.

Up until now, we’ve maintained multiple different sites under the svelte.dev domain — the main site, for Svelte itself, along with kit.svelte.dev and learn.svelte.dev. This had some minor benefits, but was mostly a nuisance:

inability to search across sites
subtly different navigation
potential for broken links (at build time, SvelteKit automatically validates that every internal link is correct, but links to other sites are a different matter)
preferences such as dark mode are not shared between sites
navigating between (for example) documentation and the tutorial involves a full page reload

From an implementation perspective, keeping multiple sites in sync proved to be a headache.

Having everything under a single roof means you’ll have an easier time finding the information you need. Right now, the site includes documentation for Svelte and SvelteKit; soon, it will also cover the CLI and additional packages like vite-plugin-svelte.

New look

We’ve also given the site a facelift. Our logo and hero artwork (‘the machine’), designed by the brilliant Achim Vedam, are unchanged — these, and the Svelte orangey-red colour, are still the cornerstones of our visual identity.

But many other aspects of the site have been cleaned up, starting with the five Bs — boxes, backgrounds, borders, box-shadows, bold text — which are tempting to overuse when organising information on a page. By getting rid of most of these and simplifying our colour palette, the site is calmer, more cohesive and less cramped.

We’ve also updated our button styles so that they actually look like buttons (a radical concept in modern UI design, unfortunately).

What the font?

Of course, the most salient difference is the typography. Previously, we used Overpass for everything except code — logo, headers, UI elements and body copy. It’s surprisingly versatile given its origins as an adaptation of Highway Gothic (the typeface used on road signs in the US since 1948, aside from a brief flirtation with Clearview), but it’s really not meant to be used for everything. We found ourselves making all sorts of ad hoc adjustments (tweaking colours, casing, line heights, spacing, weights and so on) and breaking other design rules (misaligning copy, adding unnecessary borders) to create hierarchy and reduce monotony. We needed a change.

At the same time, we couldn’t bring ourselves to look the same as every other documentation site. Modern web design is stiflingly anodyne: everything is boxes, purple glowy nonsense, and the same handful of sans serif typefaces.

We should find that last part strange. Open any book or magazine and it’s overwhelmingly likely that it will have been set in a serif typeface. There’s a reason for that: serifs make individual letters more distinct, aiding readability, and help to define the type’s personality.

On screens, serif type is less common. That’s partly for historical and technological reasons: on the lower resolution screens of yore, particularly on Windows with its inferior font rendering, serifs lack definition and make readability worse. But most users today have much sharper screens, making this less of an issue. Indeed, most newspaper and magazine websites, and many blogs, use serifs for their body copy.

I suspect the real reason is mostly cultural: because we’ve come to associate serif type with the printed word, it is viewed as less modern. Conversely, sans serif type is associated with digital products.

I don’t know about you, but I’ve come to associate digital products with unreliability: with bugs, cookie banners, exploitative business models, a disregard for privacy, planned obsolescence, and the many other sins of the technology industry.

I want the things I use to have analog sensibilities. I like things that feel weighty, that have an almost physical presence. (Svelte’s HTML-first design, and ‘the machine’, are, in a way, manifestations of this, even though we are inescapably a digital product.)

Above all, I want a web that isn’t so damn homogeneous.

So our new site uses a selection of typefaces:

DM Serif Display for headings
EB Garamond for body copy, falling back to Georgia on low-resolution screens
Fira Sans for UI elements
Fira Mono for code

We know this is a controversial choice! Many people today engage with the written word almost exclusively through screens, and so the sight of serif typefaces might seem offensively strange. It may take some getting used to. We also recognise that there may be some legitimate readability concerns for some people with some combinations of operating system/screen/dark mode preference, and so we beg your understanding while we get everything just so.

Contributing

As with any big update, there are a few details that still need polish, some of which may have escaped our notice until now. The codebase is now open source, and we welcome your contributions.

What’s new in Svelte: October 2024

Dani Sandoval — Tue, 01 Oct 2024 00:00:00 GMT

It’s October! Which can only mean one thing... Svelte Summit Fall is only 19 days away! Stay up to date with the latest Svelte Summit news by subscribing to its official newsletter or follow along during the stream on the Discord.

Thanks to the number of folks who have been trying the Svelte 5 release candidates, the maintainers have been hard at work in addressing bugs and implementing performance improvements for the upcoming release. This month, we’ll cover the most notable changes along with the many apps, resources and libraries that the community has created over the last few weeks.

What’s new in Svelte

Have you been wanting to migrate your project to Svelte 5? Want to test out the migration tool and give the team feedback? Then you should give the svelte-migrate tool a try! npx svelte-migrate svelte-5 is all you need to get started. If you run into any problems, please file an issue.

Here’s what else is new...

Legacy components can now be manually instantiated asynchronously with the sync option (5.0.0-next.237, #12970)
The each block is now much better in SSR mode - removing an unnecessary declaration and caching the length of the array before iterating over it (5.0.0-next.242, #13060)
A callstack will now appear if an infinite loop is detected - with the last ten effects printed out - in development mode (5.0.0-next.246, #13231)
Projects that use @sveltejs/enhanced-img should see a much smaller bundle thanks to module variables being inlined into the template (5.0.0-next.246, #13075)
There are now a11y warnings for <button> / <a> elements that are missing an aria-label and content (5.0.0-next.250, #13130)
Animations now take into account zoom when calculating transforms (5.0.0-next.254, #13317)
<svelte:self> is now deprecated in runes mode. It’s not necessary since components can now import themselves (5.0.0-next.256, #13333)
svelte-check, the CLI is used by almost every Svelte project, is now much smaller (repo, post)

Curious to see all that the maintainers have been up to in getting Svelte 5 production ready? Check out the CHANGELOG to see all the fixes - big and small!

What’s new in SvelteKit and Language Tools

SvelteKit now suports typed arrays in load functions. It’s “not something to over-use, since it uses base64 encoding which is 33% larger than the raw data, but useful when you need it”(2.6.0, #12716)
Components typed through Svelte 5’s Component interface get proper intellisense (extensions-109.0.1)

Community Showcase

Apps & Sites built with Svelte

svelte0.dev lets you generate Svelte UIs using shadcn/ui via a text prompt
Mini Spreadsheet Component is a great introduction to how reactivity works in Svelte
Poof is a self-destructing notes app that includes features like an optional to do list, email alerts and deleting after a specific date
kunft is a cloud platform for deploying docker containers and apps directly from GitHub
quickprompt is a browser extension to make saving and retrieving ChatGPT prompts easy
Dither is a lo-fi GIF chat app inspired by Return of the Obra Dinn and Meatspac.es
cobalt helps you save anything from your favorite websites: video, audio, photos or gifs
YouTube Looper is a custom loops extension for Youtube videos
LeetLink is a linktree-a-like with customizable themes
WhatChord is a chord finder for piano
AIUI is a web UI for OAI-Compatible APIs

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dockerizing Your SvelteKit Applications: A Practical Guide by Stanislav Khromov
Is Local First the future of web development?, The hidden benefit of upgrading to Svelte 5 - smaller bundle sizes and SvelteKit Streaming Explained: When and How to Use It - Videos by Stanislav Khromov
Svelte 5 - everything about the new APIs with Simon Holthausen at CITYJS CONFERENCE
Learn How To Use Svelte 5 Snippets by Joy of Code
Svelte London - September 2024 feat. maya with “The Joy of Side Projects ✨”

This Week in Svelte

Ep. 74 — Changelog, race and maybeStream, svelte:component obsolete
Ep. 75 — Changelog, $props, $state
Ep. 76 — Changelog, svelte-fsm, script module, trailing slash
Ep. 77 — Changelog, Context API, JSX and Single FIle Components
Ep. 78 — Changelog, Indeterminate checkbox, classes and actions

Svienna 09/2024

How to embrace Zod in your SvelteKit by Sasan Jaghori
Dates an intersection of a romantic story and Dates in JS by Domenik Reitzner
Svelte 5: Why the hell did you do that by Simon Holthausen

To Read

My thoughts on upgrading a ~15,000 LOC project to Svelte 5 by /u/practisingdeeplurk
How to Publish an Unbundled Svelte Package to npm by Matthew Davis
Migrating YouTube Looper to Svelte 5 by Wilker Lucio
Breaking out of Svelte’s reactive statements by Zell Liew
Data Visualizations using Svelte and D3 by DataVizSvelte

To Watch

Sveltekit Data Fetching in 2024 Explained by Ben Davis
DB or not DB? and Github issues as CMS? by With Svelte
Crash course on Sveltekit Superforms and Build a Full-stack Ecommerce Platform with Sveltekit, Vendure, Houdinigql, Shadcn-svelte by Lawal Adebola

Libraries, Tools & Components

Tzezar’s Datagrid is an easy to use and easy to customize datagrid component
SparklePost is a demo application that implements interface patterns commonly found in native iOS and Android apps, using modern and performant web development techniques
tipex is a customizable rich text editor for SvelteKit; based on TipTap

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

Until next time 👋

What’s new in Svelte: September 2024

Dani Sandoval — Sun, 01 Sep 2024 00:00:00 GMT

A bunch of updates to Svelte dropped in the last few weeks, plus a few quality of life improvements in the Svelte language tools.

Let’s take a look...

What’s new in Svelte and Language Tools

$state.frozen has been replaced with $state.raw (5.0.0-next.218, Docs, #12808)
$state.is has been removed. RIP, little guy (#12916)
svelte:options now lets you set the css: "inject" compiler option on a per-component basis (5.0.0-next.209, #12660)
<svelte:component> is now unnecessary in runes mode and therefore is deprecated (5.0.0-next.203/217, #12646 and #12694)
:global is now allowed in more places - making it easier to use in <style> tags and fixing issues with Tailwind’s @apply (5.0.0-next.199, Docs, #12560)
Svelte’s typescript definition generator that comes with @sveltejs/package will now warn when its diagnostics detect that a d.ts file was not generated (svelte2tsx@0.7.14, #2428)
You can now specify a tsconfig in emitDts - helpful when working in a monorepo (svelte2tsx@0.7.16, #2454)

Not covered in this list are a ton of efficiency and performance improvements across css and javascript compilation. If you’re interested, check out the CHANGELOG for more on how destructuring, state proxies and actions/styles/classes have all improved since last month.

Community Showcase

Apps & Sites built with Svelte

Apple Podcasts for the web now uses Svelte
UCLA Student Affairs has created their website with SvelteKit
tidytube is a browser extension to declutter Youtube’s UI
Graphite is an open source 2D procedural graphics editor
My Yogi is a yoga sequence builder and manager
Mark Of Destiny is a multiplayer online strategy game where you are the ruler of a small developing kingdom
Dungeons and Jacks is a game mixing blackjack and roguelite elements
YT Desk is a standalone player for YouTube and Youtube Music with a miniplayer, Discord “Rich Presence” and global shortcuts
Synapsis is an AI-based learning platform
SvelteCareers is a new Svelte job site that posts job alerts every Monday

Learning Resources

Featuring Svelte Contributors and Ambassadors

React VS Svelte - Which one should you choose in 2024?, Svelte 5 Runes - How to talk to the compiler and Creating your JavaScript framework? by Prismic (featuring Rich Harris)
Local First with Replicache - How to Build a Full Stack App with Data Syncing Part 1 by Syntax
Avoid Using Effects To Derive Values In Svelte and Understanding Effects In Svelte And When To Use Them by Joy of Code
Svelte Dev Vlog (with Simon) — July 2024
Svelte London - August: Svelte’s Boundary Areas and Prototyping Tools (in Svelte!)
This Week in Svelte:
- Ep. 71 — Listening to object updates using $effect, IntelliJ, Icons
- Ep. 72 — Changelog, using AI with Svelte 4 and 5, Icon components
- Ep. 73 — Changelog, OptimistiKit, database options

To Read

Svelte 5 signals fix its glitchy and inconsistent reactivity by webdevladder
Why Svelte is a game changer for IIoT development by Peter Repukat
Local First with Cloud Sync using Firestore and Svelte 5 Runes by Captain Codeman
SvelteKit - Potential Information Leakage from the State by Yuki Ishii
Fine-Grained Reactivity in Svelte 5 by Frontend Masters
Broadcasting messages on Chrome extensions by Wilker Lucio
Everything you need to know about: Svelte by Jeo Carlo Lubao

To Watch

Svelte 4 vs Svelte 5 🎇. what are the difference by Lawal Adebola
How to deploy your Sveltekit application with Firebase Hosting and Firebase Functions (adapter-node) by Melchisedek Dulcio

Libraries, Tools & Components

This gooey tooltip is fluid and satisfying
select-kit is a one-stop solution for all your select/combobox/autocomplete needs
ssgoi is a page transition library thats support animated page transition with every browser - including Safari
@svelte-put/preaction is a proof-of-concept Svelte preprocessor that allows usage of “preaction” - an extension to Svelte action with the ability to add static attributes on server-side
svelte-standalone is a series of configurations that aims to process any svelte widget to a single standalone javascript file
svelte-cartesian is a single component that helps with rendering all prop combinations of a provided component for visual regression testing

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

Until next time 👋

What’s new in Svelte: August 2024

Dani Sandoval — Thu, 01 Aug 2024 00:00:00 GMT

The ramp up to the Svelte 5 release has led to a bunch of huge improvements to both performance and customizability. Also in this month’s round-up: some minor SvelteKit updates and a return of the Svelte Dev Vlog.

Let’s dive in!

What’s new in Svelte

Below, you’ll find the highlights from the Svelte 5 release notes (currently in Release Candidate):

Breaking: The names of the svelte/reactivity helpers have been updated to include a Svelte prefix (5.0.0-next.169, Docs #12248)
Branch effects now have better DOM boundaries - reducing bugs in {#each} blocks and during DOM manipulation (5.0.0-next.171 and 5.0.0-next.182, #12215, #12258, #12383)
Single-pass hydration has reduced DOM size and significantly improved hydration speed (5.0.0-next.179, #12335, #12339)
Breaking: Transitions now play on mount by default (5.0.0-next.177, #12351)
CSS can now be included in the <head> when the css: 'injected' compiler option is enabled. This makes it trivial to include styles when rendering things like emails and OG cards, as well as massively simplifying toy setups where you can’t be bothered to figure out how to get CSS from the compiler into your server-rendered HTML (5.0.0-next.180, Docs, #12374)
Svelte will now warn in dev on {@html ...} block hydration mismatches (5.0.0-next.182, #12396)
The new warningFilter compiler option lets you disable certain warnings for the whole application without having to add svelte-ignore comments everywhere (5.0.0-next.186, #12296)
The new createRawSnippet API, allows low-level creation of programmatic snippets outside of Svelte templates (5.0.0-next.189, Docs, #12425)

What’s new in SvelteKit and beyond

The HTML attributes enctype and formenctype are now respected for forms with use:enhance (plus, some other bug fixes in the CHANGELOG)
The cloudflare, cloudflare-workers, netlify and vercel adapters have all been updated to copy .eot, .otf, .ttf, .woff, and .woff2 font files when bundling (CHANGELOGs)
svelte-preprocess, the tool used in nearly every Svelte project, is now dependency free! The team has gradually reduced it from 44 dependencies in 5.0.0 down to zero in the latest release (Tweet)
prerendered redirects will now be appended to the _redirects file in the Cloudflare Pages adapter (adapter-cloudflare@4.7.0, #12199)

Community Showcase

Apps & Sites built with Svelte

The StackOverflow 2024 Developer Survey results site was built using Svelte. Even better, the results show that 73% of developers that used it want to keep working with Svelte (More info in this tweet)
azigy is a live, multiplayer quiz and trivia application
on-device-transcription is a ready-to-use, minimal app that converts any speech into text
Whispering is an open-source transcription application that provides global speech-to-text functionality
Frogment is an OpenAPI specification editor
SticAI Glance summarizes reddit post to actionable insights
Over Rice tracks the best halal carts around New York City
earbetter is an ear trainer and tools for playing and programming music and audio
Moonglow is a deep planetary simulation using GPGPU
opml-editor is an online OPML editor tailored for managing subscription lists more easily
Praxis is an AI-powered trading journal that analyzes your trades and uncovers patterns
Lokal lets you share your localhost with Public and https .local Address
formcrafts lets you create incredible forms like application forms, lead generation forms, surveys, payment forms, and more
Shootmail is a template-first mail platform with scheduling and analytics
Supersaw is Open Source Web Based Digital Audio Workstation (DAW)

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Dev Vlog (with Rich) — June 2024 on Svelte Society YouTube
Svelte London — July 2024
Svelte Meets Vite: A Deep Dive with Matias Capeletto (patakdev) by Svelte Radio
Unleashing the Power of Claude Artifacts with Svelte and Sonnet 3.5 and Perfect AI development setup for any programming language with Sonnet 3.5 and Claude Projects by Stanislav Khromov
Local First from Scratch - How to make a web app with local data by Syntax.
This Week in Svelte:
- Ep. 67 — Changelog, Popover API, starting-style, resetting file inputs
- Ep. 68 — Changelog, EATView, Capacitor
- Ep. 69 — Changelog, socket activation, open source support
- Ep. 70 — Changelog, Taiwind CSS and Svelte Motion, when tu use $derived

To Read

From React To Svelte - Our Experience as a Dev Shop by gimp3695
Authentication in SvelteKit using SvelteKitAuth by Aakash Goplani
SvelteKit (Svelte 5) and Supabase by the spatula
Firebase signInWithRedirect, localhost, and SvelteKit, Dealing with Dialogs in Svelte and Build a Docker Container from a pnpm monorepo by Captain Codeman
Introducing Svelte 5 by Frontend Masters

To Watch

Introduction to Sveltekit (#1) Parahack’s Let learn Sveltekit, image optimization in sveltekit and Deploy your sveltekit app to cloudflare pages by Lawal Adebola
How Svelte runes syntax is better than plain JavaScript with signals by webdevladder

Libraries, Tools & Components

Sveaflet is an open-source Map component library
Svelte Magic UI are componetns built using Tailwind CSS, Tweened, Spring and Svelte Motion
Figblocks is an open-source UI component library for building Figma plugins with Svelte
VS Code Supports Custom Tab Labels (a good reminder for folks who haven’t sent it up yet)
Storybook did a prerelease of @storybook/addon-svelte-csf with support for Svelte v5. If you’re using it, share your feedback on their RFC: storybookjs/addon-svelte-csf#191
sveltekit-search-params released v3.0.0 with better types
optimistikit got revamped to fully support runes in v1.0.0 while keeping the @legacy tag if you still can’t update from stores

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

Until next month 👋

What’s new in Svelte: July 2024

Dani Sandoval — Mon, 01 Jul 2024 00:00:00 GMT

This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic’s CEO how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024.

Let’s jump in!

What’s new in Svelte

Below, you’ll find the highlights from the Svelte 5 release notes (now in Release Candidate):

You can now declare props in runes mode more succinctly using let props = $props() (5.0.0-next.167, #12201)
The new on import from svelte/events allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs, #11912)
The Component type now represents the new shape of Svelte components (5.0.0-next.143, #11775)
<svelte:document> has new activeElement and pointerLockElement bindings (5.0.0-next.150, #11879)
<svelte:element>, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)
render, mount and hydrate options are now actually optional if no properties are required (5.0.0-next.163, Docs, #12111)

What’s new in SvelteKit

The node and Cloudflare adapters got a few upgrades this month:

The BODY_SIZE_LIMIT environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (adapter-node@5.2.0, Docs, #11680)
Node servers can now listen to the sveltekit:shutdown event (replacing the more abrupt exit) that is emitted after the HTTP server has closed all connections (adapter-node@5.1.0, Docs, #12153)
The Cloudflare adapter will now only throw a _routes.json error when the file exists but there are no configured routes in svelte.config (adapter-cloudflare@4.5.0, #12360)

Community Showcase

Apps & Sites built with Svelte

Shootmail is an email template and content creation tool
wplatest automates your WordPress plugin updates across multiple websites
Svelte-MiniApps is a collection of bite-sized, user-friendly tools built with SvelteKit
Interior Render AI redesigns your interior with AI in seconds

Learning Resources

Featuring Svelte Contributors and Ambassadors

Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! by Prismic
How Svelte and RSCs are Changing Web Development with Rich Harris, Creator of Svelte by This Dot Media
Learn Why JavaScript Frameworks Love Signals By Implementing Them and The Svelte 5 Reactivity Guide For The Modern Developer and Crafting Magical Spells Using Svelte’s Powerful Reactivity by Joy Of Code
Practical Svelte 5 - Shopping Cart by Huntabyte
CascadiaJS 2024: Optimize for vibes by Geoff Rich (Livestream of Geoff’s talk starts at 1:08:30)
This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:
- Ep. 66 - adapter-node, new SvelteKit docs, Debugging Event modifiers in Svelte 5
- 7 Jun - Validation libraries, $effect.active() usage
- 31 May - Floating UI, StartStopNotifier
Svelte Society Vienna
- Ermin Celikovic — Building Web Components using Svelte
- Domenik Reitzner — Svelte 5 Runes explained for Vue devs
Svelte London — June 2024
Svelte Dev Vlog — June 2024 with Rich Harris

To Read

Lessons using sveltekit to build a dataviz platform by DNLBLN on Reddit
Frontend Frameworks in 2024 for eCommerce by Crystallize
Using Unplugin Icons in SvelteKit: A Step-by-Step Guide by Rishi Raj Jain
Migrating Tronic247 from WordPress to SvelteKit and Methods to Load Data in Svelte and SvelteKit by tronic247

To Watch

The Easiest Way to Build Web Apps and 13 Svelte Concepts you Need to Know by Awesome
SvelteKit Form Validation with Zod by Ross Robino
Bringing together Auth and Payments with AirBadge by Stripe Developers
Svelte 4 vs. Svelte 5 – Runes and Snippets by SvelteRust

Libraries, Tools & Components

svelte5-commenter is a component demonstration for the common comments section
SSC (Speedy Svelte Compiler) is a super-fast Svelte compiler written in Rust

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

Until next month 👋

What’s new in Svelte: June 2024

Dani Sandoval — Sat, 01 Jun 2024 00:00:00 GMT

The maintainers have been hard at work getting the Svelte 5 Release Candidate ready for release. In this month’s newsletter, you’ll find highlights from the pre-release CHANGELOG and a host of items from our community showcase.

Let’s dive in!

What’s new in Svelte

bind: is now disallowed on component exports in runes mode and has much better types to tell if a prop is $bindable (5.0.0-next.113, 114 and 125, Docs, #11238, #11225 and #11498)
Tons of work on the migrate tool to make migrating to Svelte 5 syntax easier (5.0.0-next.116, 136 and 137, Docs, #11334, #11659, #11704)
MathML is now supported (5.0.0-next.120, Docs, #11387)
The Svelte Inspector is now supported (5.0.0-next.125, Docs, #11514)
The $state.is rune lets you compare values or check if an object exists within a deeply reactive object/array (5.0.0-next.134, Docs, #11613)
The rootDir compiler option makes filenames relative to simplify development in monorepos or complex folder structures (5.0.0-next.135, #11627)

Community Showcase

Apps & Sites built with Svelte

Onlook is a chrome extension that enables designers to contribute to their team’s UI codebase
Fluid Type Generator is a modern fluid type generator built with Svelte 5
LCH Palette Generator is a tool that allows you to easily create and save gradient palettes to be used in UI design
Typepost is a simple text post generator for social media
Equimake is a collaborative real-time 3D platform for learners, gamers, artists, and coders
svelte.dev-machine is a physical based animation to replicate the Svelte machine on the svelte.dev homepage

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5: Compiler, Signals, and Web App Performance by JSJ 627 with Rich Harris
Svelte London - May 2024
This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:
- 3 May
- 10 May
- 17 May
- 24 May

To Read

Securing Your SvelteKit App and Prevent Waterfalls from Multiple SvelteKit Server Hooks in sequence by Captain Codeman
Svelte 5 Todo App with Firebase by Jonathan Gamble

To Watch

Svelte 5 Runes Demystified by Peter Makes Websites Ltd
How to Build an eCommerce Store with SvelteKit by Crystallize

Libraries, Tools & Components

Floating UI Svelte is a library for positioning floating elements and handling interaction
Svelte Animated Pixels provides an easy way to create pixelated canvas animations by just declaring maps of pixels a strings
SvelteKit Passkey Template is a SvelteKit template project featuring Passkey authentication, Google sign in and mailbox verification
svelte-infinite is an infinite scrolling library designed for Svelte 5 with runes
svelte-next attempts to automated Svelte library updates

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

Until next month 👋

What’s new in Svelte: May 2024

Dani Sandoval — Wed, 01 May 2024 00:00:00 GMT

Svelte Summit was last week - featuring a number of fantastic talks from across the community. In the final talk, What You Can Do For Your Framework, Rich Harris (with a little help from PuruVJ’s neoconfetti library) announced that Svelte 5 is now in the “Release Candidate”.

Lots of pre-release changes to cover in this post and a host of community showcase items... so let’s dive in!

Highlights from Svelte Summit Spring 2024

Below, you’ll find links to all the talks in the livestream version of Svelte Summit.

Simple and Sustainable web development in academic libraries with Svelte
Building a SaaS module for SvelteKit
Intro To LayerChart
Spatial Programming with Threlte Studio
Convex (Sponsored talk)
Kitbook: Easily Build, Document, Inspect & Test Svelte Components
Fullstack Testing
What You Can Do For Your Framework - also covers a ton of the new features listed below

These will all get broken up into more sharable (and rewatchable) videos over time, so make sure you subscribe to the Svelte Society YouTube channel to keep up to date.

What’s new in Svelte

Svelte 5 is officially in the Release Candidate stage and gets closer to release every day. Below, you’ll find some highlights from its pre-release changelog:

Hot module reloading is now supported in Svelte 5 (5.0.0-next.97 and 101, #11106, #11132)
It is now possible to define global (or child global) styles in a block (5.0.0-next.111, #11276)
Compiled code is even more efficient for if blocks, each blocks and attribute updates (5.0.0-next.83-85, #10906, #10937 and #10917)
The built-ins from svelte/reactivity are now re-exported to be available on the server (5.0.0-next.88, Docs, #10973)
A new reactive URL object is now available in svelte/reactivity (5.0.0-next.103, Docs, #11157)
HTML tags are now faster with more efficient hydration markers (5.0.0-next.90-91, #10986 and #11019)
The new $host rune retrieves the this reference of the custom element that contains a component - removing the need for createEventDispatcher (5.0.0-next.96, Docs, #11059)

Community Showcase

Apps & Sites built with Svelte

Collabwriting just raised $1.2M and launched a new product - Collabwriting for Teams. Congrats!
Skypix is a music library that allows users to create playlists, add songs to their library, and share their music with friends
Jonze is an open-source but managed tool for managing member information. It features attendance tracking and membership plans
midi-note-trainer is a music notation trainer app built with Web MIDI
Easy-Rd is a free tool for coding-based ER diagram creation
Gamera is a simple site analytics tool for a privacy-first world
Collecta lets you collect your internet in a single space - organize images, bookmarks, inspiration, and share your vibe with friends
ColdCraft writes for you by turning bullet points and LinkedIn profiles into effective cold emails
Fourplay is a multiplayer word game written with Rust and Svelte
how-long-is-a-click is a site that measures how long exactly a click is on the web

Learning Resources

Featuring Svelte Contributors and Ambassadors

Preprocessors Are The Most Powerful Svelte Feature No One Talks About, How To Make A Custom Markdoc Renderer and Responsive CSS Grid Layout In One Line Of Code by JoyOfCode
Phoenix LiveView and Svelte with Wout De Puysseleir by Svelte Radio
Svelte London - April 2024:
- Auth in SvelteKit, the hard & easy ways by Ajit Krishna
- 3 stories of walking in the fire with my SvelteKit project by Rowan Aldean
This Week in Svelte:
- 29 Mar - Superforms
- 5 Apr - When to go serverless?
- 12 Apr - svelte-api-keys with Captain Codeman
- 19 Apr - Multiple Action Forms
- 26 Apr - Service Workers

To Read

LiveView is best with Svelte by Anthony Accomazzo
Optimizing My SvelteKit Blog by refac0r
Why Lucia might be the best authentication library for SvelteKit by Justin Ahinon
Deploying a Svelte App with Docker and Node.js: A Developer’s Guide by Klevert Opee
SvelteKit Todo App with Firebase Admin by Jonathan Gamble
Dependency injection in Svelte for fun and profit by Kyle Nazario
Don’t Lazy-Load Translations by Loris Sigrist
View Transitions in SvelteKit by Mattias Tomas Bobo Lindvall
Why is Svelte better? by Zack Webster
Mocking SvelteKit Stores in Storybook by Tyler Gaw
Deploy SvelteKit to AWS Amplify: A Step-by-Step Guide by Rishi Raj Jain
SvelteKit and Stripe demo by the spatula
SvelteKit Turso Fly.io App Guide by Scott Spence

To Watch

Build a Animated Website with SvelteKit, GSAP & Prismic by Prismic
Svelte 5: What’s New by Simon Holthausen
Build the Ultimate Learning Platform with SvelteKit, PocketBase & TailwindCSS! and Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash by Lawal Adebola
Porting a vanilla JavaScript library to Svelte 5 by Stanislav Khromov

Libraries, Tools & Components

sk-seo is a dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you
Svelte Lib Helpers is a utility package designed to streamline various tasks when developing Svelte libraries
skitsa is a simple yet fully fledged operational demonstration of SvelteKit Magic Links using SST, hosted on AWS, as a Lambda application
svelte-zoomable-circles is a Svelte component for displaying and browsing hierarchical data using zoomable circles

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋

Svelte 5 Release Candidate

The Svelte team — Tue, 30 Apr 2024 00:00:00 GMT

Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.

It doesn’t mean that it’s ready for production, or that nothing will change between now and 5.0. But if you’ve held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the ‘Try the Svelte 5 preview’ option when starting a new SvelteKit project...

npm create svelte@latest

...or you can add Svelte 5 to an existing project...

npm install --save-dev svelte@next

...or you can tinker in the Svelte 5 Preview website.

I’m out of the loop. What’s Svelte 5?

For the last several months, we’ve been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we’ve collectively learned from several years of building apps with Svelte.

You can learn more about the new features from the preview documentation, and by watching the presentation from the most recent Svelte Summit:

What You Can Do For Your Framework

The highlights include:

runes, the new signal-powered reactivity API that sits at the heart of Svelte 5 and unlocks universal, fine-grained reactivity
overhauled event handling with less boilerplate and more flexibility
better component composition through snippets
native TypeScript support, including inside your markup

Will I need to rewrite everything?

Components written for Svelte 4 will continue to work with Svelte 5, with a handful of exceptions. If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it’s stable. (In the meantime, if you’re currently on Svelte 3 then you should update to Svelte 4.)

Eventually — in Svelte 6 or 7 — support for certain Svelte 4 features will be dropped in favour of their modern replacements. Because of that, we do encourage you to incrementally migrate your components (you can mix and match old and new components in the same app). We’ll release a command line tool for automating much of this migration, and you can try an experimental version of that tool in the playground by pasting in some Svelte 4 code and clicking the ‘migrate’ button.

When is the stable release?

When it’s done, and we’ve updated all the documentation. Bear with us!

What’s new in Svelte: April 2024

Dani Sandoval — Mon, 01 Apr 2024 00:00:00 GMT

Spring is just around the corner (for half the globe at least), which means Svelte Summit Spring is coming soon! The event will be streamed on the Svelte Society YouTube channel on April 27.

Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We’ll get into them all below, so let’s jump right in!

What’s new in Svelte

Svelte 5 is in preview and gets closer to release every day. Below, you’ll find some highlights from its changelog:

The new Map, Date and Set classes can now be imported from svelte/reactivity and used just like their native counterparts to fit into Svelte’s reactivity model (5.0.0-next.79, Docs, #10803, #10622, #10781)
state/derived/props can be explicitly exported from components again (5.0.0-next.62, #10523)
bind:value now allows for a dynamic type attribute - fixing issues with common input bindings (5.0.0-next.66, #10608)
SSR HTML mismatch validation has been improved and provides clearer error messages (5.0.0-next.69, #10658)
Breaking: Slots inside templates with a shadowrootmode attribute are now preserved (5.0.0-next.73, #10721)
Breaking: The $props() no longer accepts a generic type argument. Instead, component authors should type their props like any other variable declaration (5.0.0-next.76, #10694)
The new $bindable rune allows parents to :bind to a component’s prop in addition to using them as regular props (Docs, #10851)
The webkitdirectory DOM boolean attribute is now supported (5.0.0-next.81, #10847)
Form resets are now taken into account for two way bindings (5.0.0-next.82, Docs, #10617)

What’s new in SvelteKit

adapter-vercel now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (@sveltejs/adapter-vercel@5.2.0, Docs, #11987)
adapter-vercel’s build output files now include framework metadata - improving observability on the platform (@sveltejs/adapter-vercel@5.2.0, #11800)
adapter-cloudflare and adapter-cloudflare-workers now implement adapter.emulate which allows the adapter to emulate the Cloudflare platform during dev and preview (#11732)
Breaking: adapter-node now shuts down gracefully and supports the new IDLE_TIMEOUT and SHUTDOWN_TIMEOUT environment variables (@sveltejs/adapter-node@5.0.1, Docs, #11653)
Breaking: The default value of precompress in adapter-node is now true - making sites faster by default (@sveltejs/adapter-node@5.0.0, Docs, #11945)
Google Cloud is now supported in adapter-auto without any additional configuration (@sveltejs/adapter-auto@3.2.0, Docs, #12015)

For all the changes in SvelteKit, including bug fixes and adapter-specific changes check out the CHANGELOGs in each of the packages.

Community Showcase

Apps & Sites built with Svelte

notepad is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
Tokenbase is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks.
MelloOS is a fake OS desktop in the style of Windows 95
PowerHound is an app for tracking snow conditions across Colorado’s ski resorts and backcountry
ProductSurveys gathers user feedback directly inside your product
WAIfinder is an interactive map shows entities operating in the AI industry in the UK
talkmedown is an emergency landing survival game using SvelteKit UI and Three.js graphics.
Bird Flapping is that game with a flapping bird (not to be confused with FlappyBird)
Minesweeper FUNNYMODE is minesweeper, but FUNNY
Routickr is a habit-tracking app with Firefox and Chrome extensions
immich is a self-hosted photo and video management solution

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svienna (Svelte Society Vienna):
This Week in Svelte:
- 22 Mar 2024
- 8 Mar 2024

To Read/Watch

How we built our 41kb SaaS Website by Critical Moments
Migrating a personal homepage to Svelte by Jake Ouelletee

Libraries, Tools & Components

Svisualize is a VS Code Extension that visualizes your components as you code
Neel/UI is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
BLICKCSS is a small (~30kb) CSS library to build great websites and web apps quickly and easily

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: March 2024

Dani Sandoval — Fri, 01 Mar 2024 00:00:00 GMT

This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better.

Lots to showcase too... so let’s dive in!

What’s new in Svelte

As you may already have heard, Svelte 5 is in preview. In the meantime, Svelte 4 (@latest) has had one bugfix. The Svelte 5 changelog has quite a few updates, though:

breaking: $derived.call is now $derived.by (5.0.0-next.54, Docs, #10445)
Destructuring derived object properties will now keep fine-grain reactivity (5.0.0-next.55, Docs, #10488)
The new hydrate method makes hydration-related code treeshakeable (5.0.0-next.56, Docs, #10497)
Nested CSS is now supported, along with better support for :is(...) and :where(...) (5.0.0-next.57, #10490)
breaking: The client-side API has been simplified by removing createRoot, adjusting the mount / hydrate APIs and introducing unmount (5.0.0-next.58, Issue#9827, #10516)

For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out the CHANGELOG on main.

What’s new in SvelteKit

Mostly bug fixes, this month. Most notably is a fix to prevent stale values after navigation (2.5.1, #11870).

Adapters can also now use an emulate function to provide dev and preview functionality (2.5.0, Docs, #11730). This will allow for an improved experience developing for Cloudflare in the near future (11732).

For all the changes in SvelteKit, check out the CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

Wishgram is a tool to generate handwritten wishing cards
rfidify is a Raspberry PI RFID reader that plays things on Spotify
listn.fyi is a fun and easy way to share what music you’re currently into
Meowrite is an AI writing tool for cover letters, essays and more
Photo Multitool is a free set of online tools for manipulating photos
sveltekit-weather-app is a gorgeous weather app made with SvelteKit

Learning Resources

Featuring Svelte Contributors and Ambassadors

How to make a great framework better? - Svelte 5 with Rich Harris by Prismic
Svelte 5 is a beast, but is it worth switching? by Syntax.FM

This Week in Svelte:

To Read/Watch

Upgrading to Svelte 5 by Mike Stachowiak
Building with GPT4 and Svelte by Lev Miseri
Mini site for recommending songs using Svelte & Deno by Bryce Dorn
Effortlessly Sync Your SvelteKit Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs by Launchnow
How to build an editable website in 15 minutes in 2024 by Svelte Headless
Local-First LiveView Svelte ToDo App by Tony Dang

Libraries, Tools & Components

PaneForge provides components that make it easy to create resizable panes in your Svelte apps
Svelte UX and LayerChart now include theme support via semantic and state classes
Huly Platform is a robust framework designed to accelerate the development of business applications, such as CRM systems
svelte-marquee is a beautiful marquee component for Svelte
Just Ship is a SvelteKit auth boilerplate for Svelte 5
cells is a functional & reactive library for Svelte
Svelte Headless is an example site showing how to create a simple blog site that plugs into a headless CMS
Sugar.css is a semantic, accessible, lightweight CSS framework
apple-svelte is a component library for Svelte based on Apple’s Human Interface design language
SvelteKit SSE provides an easy way to produce and consume server sent events.
Formsnap, an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved its docs

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: February 2024

Dani Sandoval — Thu, 01 Feb 2024 00:00:00 GMT

Since SvelteKit 2.0 released late last year, there’s been a bunch of new features to make the Kit dev experience even better! Meanwhile the Svelte team has been hard at work making Svelte 5 a reality.

In case you missed it, Rich also posted Tenets, “an attempt to articulate the Svelte philosophy — our bedrock principles, that guide our design decisions.”

So let’s dive in to check out what’s new and see what the rest of the community has been up to...

What’s new in SvelteKit

The client router is now tree shakeable (2.1.0, #11340)
$env/static/public is now exposed in service workers (2.2.0, Docs, #10994)
style-src-elem is now supported in environments with a Content Security Policy (2.2.1, Docs, #11562)
The new reroute hook allows you to change how URLs are translated into routes (2.3.0, Docs, #11537)
The read function is now available in the $app/server module - allowing you to read assets from the filesystem (2.4.0, Docs, #11649)
Adapters can now emulate the prod environment for dev and preview servers by implementing the corresponding functions. This is useful for providing access to e.g. KV namespaces in development (2.5.0, Docs, #11730)

What’s new in Svelte

In case you missed it, Svelte 5 is in preview. In the meantime, Svelte 4 (@latest) has had one bugfix release. There’s just one new feature to highlight from the Svelte 5 changelog:

Snippets can now take multiple arguments (5.0.0-next.42, Docs, #9988)

For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out the CHANGELOG on main.

Community Showcase

Apps & Sites built with Svelte

Sprite Fusion is a free level design tool to craft beautiful 2D tilemaps right in your browser using any tileset
TypeMeUp a typing website that teaches you how to type faster
Pathfinding Algorithm Visualizer is an interactive pathfinding algorithm visualizer with player functionality
Roch Dog ranks businesses and hotels based on how dog-friendly they are
highlight.cool is a free, customizable, and real-time highlighting tool for your blog
Nola Devs is a vibrant and inclusive software developers group nestled in the heart of New Orleans. This site aggregates all their events across groups
Startup Funding Simulator is a tool to help founders understand how modern fundraising (with safes) works, and how much dilution you can expect when raising money.

Learning Resources

Featuring Svelte Contributors and Ambassadors

New SvelteKit feature: import { read } from '$app/server' by Rich Harris
Reading assets on the server in SvelteKit by Geoff Rich
Tan Li Hau’s new book, Real-World Svelte is out now
Svelte Society San Diego - January 2024: Attila covers the latest updates on Svelte 5 and also SvelteKit.
Svelte London - January 2024: featuring talks from both Rich Harris and pngwn
Svelte 5: Speed, Simplicity & Size by Syntax.FM
This Week in Svelte:
- 12 Jan 2024: A deep dive into the SvelteKit Changelog
- 19 Jan 2024: Showcasing a new library from Paolo Ricciuti
- 26 Jan 2024: Featuring “Cells” - a functional and reactive programming library

To Read

Customise font in TailwindCSS with SvelteKit by Launchnow
Svelte from the perspective of an Angular developer (for Svelte devs) and How to create a sitemap for your SvelteKit blog by Kyle Nazario
Get Up and Running with Svelte on the Internet Computer by Roland BOLE
SvelteKit + Socket.io server deployed on deno by Devr

Libraries, Tools & Components

Lucia - an auth library written in TypeScript that abstracts away the complexity of handling sessions - has just released its 3.0 version
Paraglide JS Adapter SvelteKit is a SvelteKit integration for ParaglideJS - a tool for i18n routing

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

See ya next month!

What’s new in Svelte: January 2024

Dani Sandoval — Mon, 01 Jan 2024 00:00:00 GMT

Happy New Year! It’s been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the release of SvelteKit 2!

You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.

Let’s jump in...

What’s new in SvelteKit (2.0 and more!)

With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new Performance page - which explains how SvelteKit works to make your applications as performant as possible.

resolvePath has been replaced by resolveRoute in $app/paths. Use it to populate a route ID with params to resolve a pathname (1.29.0, Docs, #11261)
response.arrayBuffer() will now be inlined during SSR (1.30.0, Docs, #10535)
SvelteKit 2.0.0 adds:
- untrack to load to opt-out of invalidation (Docs, #11311)
- shallow routing to create history entries without navigating (Docs, #11307)
- html typings (#11222)
- redacted internal stack traces when reporting config errors (#11292)
- fine grained invalidation of search params (Docs, #11258)

You can find a migration guide for SvelteKit 2.0 on the SvelteKit docs. Things should be pretty seamless with the svelte-migrate command doing much (if not all) for you!

What’s new in Svelte

With Svelte 5 in preview, Svelte 4 (@latest) has only been getting bug fixes - with its current version at 4.2.8. The updates below are from version 5’s preview branch:

The new $inspect rune is like console.log except that it will re-run whenever its argument changes (5.0.0-next.16, Docs, #9705)
$state is now proxied to make reactivity nested by default. This is a response to user feedback with plenty of context in the PR - so check it out if you’re interested on how the syntax has improved during the preview (5.0.0-next.18, Docs/Examples, #9739)
Fallback values for bindings are disallowed in runes mode since they’re confusing, and a source of bugginess and implementation complexity (5.0.0-next.19, #9784)
Fallback props are now readonly (unless used with bind:). By extension, default values should also be readonly (5.0.0-next.19, #9789)
The new unstate function allows you to remove reactivity from objects and arrays created with $state (5.0.0-next.19, Docs, #9776)
GamepadEventHandlers for window.addEventListener (gamepadconnected and gamepaddisconnected) have been added (5.0.0-next.23, Docs, #9861)
{@const} can now be used inside snippet blocks (5.0.0-next.24, #9904)
The new $state.frozen rune lets you access a read-only version of $state that cannot be mutated. This is useful if you want to work with data using immutable patterns rather than mutable patterns (5.0.0-next.27, Docs, #9851)

For all the release notes going forward, check out the CHANGELOG on main.

Community Showcase

Apps & Sites built with Svelte

eCourse is a sleek and customizable website template designed for effortless self-hosting of your online course
Typogram is a brand design tool with “a sprinkle of AI”
calcium is a browser extension for devs with fuzzy-find on browser tabs, bookmarks, history and common developer docs
hintable is an exciting word guessing game
domian.io retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them
Story Scroller is a REPL showcasing how Svelte can be used to make a scrollable cards list
The Atlas of Sustainable Development Goals 2023 presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals.
Lingotrack is a social platform for you as a language learner to track your progress and find engaging new media
Lofi Flow lets you save your best-loved YouTube lofi live radios and videos in one spot

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte in dynamic e-commerce widgets with Jacob Stordahl and Slicing Svelte with Sam Littlefair and Prismic from Svelte Radio
I already love SvelteKit v2 by Huntabyte
14 Awesome Real World Projects That Use Svelte by Joy of Code
Building a SvelteKit Adapter for WinterJS with Willow and Kev
Progressive Splash Screen by Quang Phan (Svelte Vietnam)
This Week in Svelte:
- 2023 Dec 1 - Svelte 4.2.8, reusing searchParams, peerDependencies!
- 2023 Dec 8 - validating forms UX, suppress ESLint warnings, bound functions
- 2023 Dec 15 - SvelteKit 2.0
- 22 Dec 2023 - SvelteKit 2.0.6, handling peerDependencies, action params
- 29 Dec 2023

To Watch/Hear

Let’s Build A Dropbox clone With SvelteKit And Firebase 🔥, Tailwind css, Shad-cn svelte etc 😁 by Lawal Adebola
“App-like” List → Detail View Transitions 🦸 with SvelteKit by Johnny Magrippis
Learn SvelteKit · Build a Modern Landing Page w. SvelteKit & TailwindCSS by Smoljames

To Read

Deploy a SvelteKit App to GitHub Pages by Captain Codeman
A Practical Guide to Mocking Svelte Stores with Vitest by Ben Tilling
Svelte 5 is good, but runes need improvement by Kyle Nazario
Shader Park and 2D by Untested

Libraries, Tools & Components

Routify, the popular routing library used in many Svelte apps, has its first Release Candidate for version 3
Superforms v2 is out now - supporting all validation libraries
SvelteKit-Design-Pattern is a template showcase Kreonovo’s SvelteKit MVC Design patterns (more info in the Reddit post)
Shadcn’s Svelte VSCode extension helps you install and use Shadcn components directly without leaving your IDE
SGSG is an alternative “full-stack application” template based on Svelte, Go, SQLite and gRPC
mistral-kit is a prompt-to-code site using mistral-7b and ollama
svelte-browser-import provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step.
progressbar-svelte is a Svelte package for customizable progress bars
MdCraft is an open-source web app that serves as an in-browser Markdown editor and previewer

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Have a great year 🥳

Announcing SvelteKit 2

The Svelte team — Thu, 14 Dec 2023 00:00:00 GMT

Version 2.0 of SvelteKit, the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released Vite 5 along with a bevy of small improvements and one much-requested feature.

If you’ve been paying close attention to Svelte in recent months, you’ll know that we’ve been hard at work on Svelte 5, which is possibly the most anticipated release in the project’s history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance.

We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool:

npx svelte-migrate sveltekit-2

The migration guide has more details about what’s new.

Shallow routing

Way back in the mists of time — May, to be precise — we teased a new feature that allows you to associate state with a history entry without causing navigation. It’s very useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don’t want to do a full navigation to.

That feature is called shallow routing, and this week we finally dusted off the pull request and added it to the framework. We’re excited to see what you use it for.

One year of SvelteKit

Today is the one year anniversary of SvelteKit’s launch and we’re excited to celebrate how far SvelteKit has come. SvelteKit has been quickly embraced by the web development community:

Tweet from @flaviocopes

In the past year, we’ve seen a number of open source projects like Storybook, Tailwind, and Playwright officially support SvelteKit as well as a number of commercial entities like Prismic, Sentry, and InLang.

SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like Skeleton, shadcn-svelte, Melt UI, Flowbite Svelte, daisyUI, and many more. And our first ever hackathon saw winners from amazing Svelte projects like Superforms, Threlte, and SvelteLab.

Finally, we’ve also launched major supporting projects like a new Svelte DevTools (chrome web store, GitHub, talk), Svelte Inspector (docs, talk), and experimental image optimization support (docs, talk).

Upcoming

In addition to the ongoing image work, we’ll be working to improve support for Svelte 5 and internationalization in upcoming releases. The first parts of that work have already landed in SvelteKit 2, which includes improved support for prerendering URLs with optional path segments often used to specify a language. Thank you to the team from InLang who contributed this improvement.

What’s new in Svelte: December 2023

Dani Sandoval — Fri, 01 Dec 2023 00:00:00 GMT

Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found here (timestamps below):

0:00 Hype music!
18:20 Exploring Svelte DevTools - Ignatius B (4 minutes)
25:27 How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)
53:00 enhanced:img - Ben McCann (6 minutes)
1:03:44 inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)
1:17:32 How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)
1:53:10 svelte-ecosystem-ci - Dominik G (10 minutes)
2:23:06 Svelte for Creative Development - Steven Stavrakis (10 minutes)
2:35:33 Translating the docs - Romain I’Ourson (11 minutes)
2:49:48 ENHANCE! - Paolo Ricciuti (25 minutes)
3:18:25 Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)
3:49:11 svelte@next - Rich Harris (18 minutes)

Today is also the first day of Advent of Svelte: A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte!

Now let’s dive into the updates...

What’s new in Svelte (5.0 Preview!)

Svelte 5 preview is now available at svelte@next while Svelte 4’s current version (@latest) is 4.2.7. All the changes below are from the preview’s branch:

TypeScript is now supported natively via acorn-typescript (5.0.0-next.9, #9482)
The new $effect.active rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (5.0.0-next.10, Docs, #9591)
The new $effect.root rune creates a non-tracked scope that doesn’t auto-cleanup. This is useful for nested effects that you want to manually control (5.0.0-next.14, Docs, #9638)

For all the release notes going forward, check out the CHANGELOG on main. For the highlights, take a look below!

What’s new in SvelteKit

Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta (#11026)
Prettier 3 and prettier-plugin-svelte 3 are now the default versions when creating new SvelteKit projects (#10410)
nodejs20.x is now supported via the Vercel adapter (#11067)
@sveltejs/enhanced-img makes serving different sizes of images easy, thanks to pre-processing (Docs, #10788)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

What’s new in Language Tools

The latest version of language tools adds best-effort fallback typings to $props() rune (extensions-108.1.0)
Language tools better supports the @render tag by using the Snippet type (extensions-108.0.0)
The Svelte ESLint plugin has been updated to support the Svelte 5 preview (v2.36.0-next.2)

Community Showcase

Apps & Sites built with Svelte

MobileView is a Chrome Extension for real-time, cross-device website simulation
ClassroomIO is an Open Source Platform for Tech Bootcamps
sshx is a secure web-based, collaborative terminal
ToneShift lets you clone any voice, create music, and join a community of voices
CanvasGPT is Autonomous Mind Maps. Powered by AI
Wordplay is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography (Blog Post)
CodeFlow is a roadmap for programmers to learn, think and code better
Teller is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend
Sudoku is a board created with SvelteKit, Typescript and Tailwind

Learning Resources

Featuring Svelte Contributors and Ambassadors

View Transitions in SvelteKit and beyond with Geoff Rich and Melting UIs with Thomas G. Lopes by Svelte Radio
Making The Best Svelte SVG Animation Library, How To Publish Your JavaScript Code To Npm With SvelteKit, and What’s New In Svelte 5? (Runes, Events, Snippets) by Joy of Code
Svelte Society Talks
- Svelte Society - San Diego November 2023
- Building a SvelteKit Adapter for WinterJS with Willow and Kev
This Week in Svelte:
- 2023 October 27 - SvelteKit 1.27.1, the pillars of a component library
- 2023 November 3 - SvelteKit 1.27.2, choosing a database, preprocessors
- 2023 November 10 - SvelteKit 1.27.4, Svelte 4.2.3, closing modals
- 2023 Nov 17 - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features!
- 2023 Nov 24 - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit

To Watch/Hear

Why Stack Overflow is embracing Svelte by The Stack Overflow Podcast
Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc by Lawal Adebola
SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial by Prismic

To Read

Hands-On Experience: How to Build an eCommerce Store with SvelteKit? by Bård Farstad
Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen) by Quang Phan
Setting up OAuth with Auth.js in a SvelteKit Project by Andrey Mikhaylov
SvelteKit 🤝 Storybook by Paolo Ricciuti
Integrate Storybook in Svelte: Doing it the Svelte-way by Óscar Domínguez Celada
Drizzle ORM with Sveltekit and Sveltekit — Streaming SSR by Mohammed Anas
Svelte & WordPress Full Stack Course by Artneo Web Design on udemy
Add a loading indicator to a Form Action in SvelteKit by Useful Snippets (Stanislav Khromov)

Libraries, Tools & Components

sveltekit-view-transition provides a simplified view-transition-api for Sveltekit
T18S aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use
Svelte Flow is a customizable Svelte component for building node-based editors and interactive diagrams
Super Sitemap is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths
Svelte UX is a Tailwind-based component library to simplify creating highly interactive and visual applications
CanIKit provides a simple way to add authorization to your SvelteKit application
Svelte Toggles manages light & dark mode interactions and preference storage
Baselime now supports SvelteKit for the edge-logger package

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: November 2023

Dani Sandoval — Wed, 01 Nov 2023 00:00:00 GMT

Mark your calendars! Svelte Summit Fall is on November 11th. Join us on YouTube and in the Discord for hours of Svelte-focused fun 🎥

Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month’s releases brings an improved developer experience with better block folding, inferred types and configuration for use:enhance.

Let’s take a closer look 👀...

What’s new in Svelte & Language Tools

Svelte 4.2.2 cleans up a few element-specific features (Release Notes)
Extensions 107.12.0 improves block folding for functions, if statements and more (Release Notes, PR)

What’s new in SvelteKit

Route parameter types will now be inferred from the applicable matcher’s guard check (kit@1.26.0, Docs, #10755)
The new invalidateAll boolean option lets you turn on and off the invalidateAll() form function within the enhance callback (kit@1.27.0, Docs, #9476)
The output of the project creation wizard will now reflect which package manager you’re using (create-svelte@5.1.1, #10811)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

4THSEX is a creative website for the producer / creative director with the same name
Syntax.fm has been redesigned from the ground up with SvelteKit
GitContext is an early-access tool to improve the process of reviewing code
Lunier is a site to browse and buy handbags (site is in French)
Feldman Architecture is a portfolio set for the architects of the same name
Formulator is a faster way to iterate, experiment, & build user interfaces
Dwarf is a relaxed domain name marketplace for domain hoarders
Teek is a simple, free time tracker for developers with an hourly rate
Sessionic is a web extension to easily save browser sessions and manage them
Pilink is a “suckless” link shortener

Learning Resources

Featuring Svelte Contributors and Ambassadors

Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick by Svelte Radio
This Is How You Sveltify Any JavaScript Library, Svelte Actions Make Svelte The Best JavaScript Framework and How Svelte Stores Make State Management Easy by Joy of Code
Svelte Society Talks
This Week in Svelte:
- 2023 September 29 - Svelte 4.2.1, SvelteKit 1.25.1, Runes FAQ, data mocking
- 2023 October 6 - Ordering attribs, client hints, async custom store with runes
- 2023 October 13 - SvelteKit 1.25.2, How Melt UI works
- 2023 October 20 - Kit 1.26.0, Svelte 4.2.2, dynamically-loaded components

To Watch

SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio by freeCodeCamp.org
Why SvelteKit? [Intro to SvelteKit 1.0, part 1] by Jeffrey Codes Javascript
Build an AI Chatbot - it’s that easy?! by Simon Prammer
Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises by This Dot Media

To Read

What we learned from migrating our web app to SvelteKit by Marten Sigwart
SvelteKit Tutorial: Build a Website From Scratch by Prismic has been updated based on the latest SvelteKit features
Svelte by Example is a succinct, gentle introduction to Svelte & SvelteKit
The Comprehensive Guide to Locals in SvelteKit by Stanislav Khromov
How to build a blog, the hard way by Curtis Parfitt-Ford
How to make a full-content RSS feed for your SvelteKit blog by Kyle Nazario
A simple hash-routed dialog system with Svelte by Jamie Perkins
When and Where to Render and One Less Reason to Build a Native App by Ross Robino
Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector by Theo Steiner

Libraries, Tools & Components

Work to support SvelteKit in Deno is ongoing and Deno now supports creating SvelteKit projects out-of-the-box!
Purplix is an open-source collection of tools dedicated to user privacy and creating trust with your audience
Obra Icons is a simple, consistent set of icons, perfect for user interfaces
svelte-chat-langchain is a minimal version of “Chat LangChain” implemented with SvelteKit, Vercel AI SDK and of course Langchain
Cloudinary just released an official Svelte SDK (GitHub)

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: October 2023

Dani Sandoval — Sun, 01 Oct 2023 00:00:00 GMT

Svelte 5 isn’t out yet (you can, however, preview it now), but that doesn’t mean we don’t get a sneak peek! Most notably are Runes - a simpler way to manage reactive variables in Svelte code. There’s lots of links the showcase section for deeper dives on all things Runes, but let’s talk about what else been released this month...

What’s new in Svelte & Language Tools

Svelte 4.2.1 was released with a bunch of fixes to HTML, CSS and sourcemap compilation
The latest version of the Svelte language tools enhances component references in the “Find All References” command, fixes a persistent issue with automated types going missing after restarting a project and adds fallback handling to auto-types (like those found in SvelteKit’s +server.js files)

What’s new in SvelteKit

+server.js now has a catch-all handler that handles all unimplemented valid server requests. Just export a fallback function! (1.25.0, Docs, #9755)

That’s all for the new features! If you’re looking for other patches and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Svelte Summit Fall is happening on Nov 11, 2023. The 7th Virtual Svelte Conference is open for proposals until October 15 - anyone can submit!

Threlte is throwing a hackathon (motion warning for the landing page - it will respect Reduce Motion settings). The kickoff event is on Sunday, 15 October 2023 16:00 UTC.

Apps & Sites built with Svelte

game-of-life-svelte is a Conway’s Game of Life implementation using SvelteKit tech
Limey is an easy-to-use website builder for simple sites and landing pages
Appwrite’s new landing page is now written with SvelteKit (previously covered was their console UI in Svelte)
PlaceIt is a game about numbers and places
Sveltroid is a fan-made recreation of Metroid Prime: Remastered (code)
Bolighub is a Denmark housing search portal
Dithering is a tool to dither photos with plenty of options
Rocky Mountain Slam is an interactive map to follow Jason Heyn as he attempts to complete the first ever Rocky Mountain Slam (code)

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5: Introducing Runes... with Rich Harris and its follow-up: Svelte 5 runes: what’s the deal with getters and setters?
Conditionally stream data in SvelteKit by Geoff Rich
Svelte Runes Change How Reactivity Works In Svelte, Make A 3D GitHub Skyline With Svelte To Flex On Your Peers, Simple Page Transitions Using The View Transitions API With SvelteKit and Using JavaScript Libraries With Svelte Is Easy by Joy of Code
Modern Web Podcast S11E2 - Exploring Svelte, Open Source, and Discord Bots with Willow (GHOST)
We are back! Svelte 5, Transitions, What’s New?! by Svelte Radio
This Week in Svelte:
- 2023 September 1 - SvelteKit 1.24.0, View Transitions API, AbortController
- 2023 September 8 - SvelteKit 1.24.1, Capacitor walkthrough, reusing prop types
- 2023 September 15 - SvelteKit 1.25.0, deserialize form data, magic is coming
- 2023 September 22 - Svelte 5 Runes!

To Watch

RUNES - Coming in Svelte v5 | My Take by Coding Garden
Don’t Sleep on Svelte 5 and Level Up Your Svelte Stores by Huntabyte
Introduction To Svelte Runes (Every Svelte Rune Explained) by Cooper Codes
Svelte Runes: Awesome or Awful? by Jack Herrington
Let Build A Youtube Clone With SvelteKit (Svelte, Tailwind Css, RapidApi, Shadcn Svelte, Axios, etc) by Lawal Adebola

To Read

Create the Perfect Sharable Rune in Svelte by Jonathan Gamble
You Don’t Need to “Learn” Svelte by KaviiSuri
Build Websites with Prismic and SvelteKit by Angelo Ashmore
How to embed Svelte apps inside PHP? by Justin Ahinon
Using Web Browser’s Indexed DB in SvelteKit by Shivam Meena
Integrate Storybook in Svelte: Doing it the Svelte-way by Oscar Dominguez
The Sveltekit tutorial: Part 1 | What, why, and how? by Suyashtnt

Libraries, Tools & Components

KitForStartups is an Open Source SvelteKit SaaS boilerplate
SuperNavigation is a mobile-like navigation UX for the web
skeleton-material-theme is a Material theme for the Skeleton UI library
better-i18n-for-svelte is a SEO focused library for multi-language SvelteKit sites
uico is a Tailwind plugin that provides utility classes for basic UI elements
svelte-maskify is a action wrapper for AlpineJS masks
sveltekit-capacitor is a template for building a SvelteKit SPA with Capacitor
router-gen.ts is a type-safe router for SvelteKit

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

Hacktoberfest 2023 with SvelteKit

Willow (GHOST) & Braden Wiggins — Sun, 01 Oct 2023 00:00:00 GMT

Sveltekit 🧡 Hacktoberfest

We’re excited to announce SvelteKit’s participation in this year’s Hacktoberfest! Hacktoberfest is a global event that takes place every October, during which developers are encouraged to contribute to open-source projects like SvelteKit. The goal is to foster a vibrant open-source community, celebrate shared knowledge, and make the world of coding more accessible to all. You can find other participating repositories by searching the hacktoberfest topic on github.

Getting Started

The first step is to register for Hacktoberfest. Once you’ve registered, any PRs submitted to Sveltekit will count towards your participation in the event!

Contributing

If you need inspiration when looking for an issue to fix, check out the low hanging fruit, contributions-welcome, ready to implement, or documentation tags.

It’s a good idea to communicate clearly and often about what you’re trying to solve or take on. You can do this by commenting on the issues you intend to take on. This helps avoid duplicate work and ensures that your contribution is in line with the project’s goals. Nobody likes to have their work rejected, so it’s best to ask questions early and often!

Join our Discord and ask questions in the dedicated #hacktoberfest channel. We’re happy to help you get started!

We’re excited to see what you’ve got in store for SvelteKit! Happy hacking! 🎃

Introducing runes

The Svelte team — Wed, 20 Sep 2023 00:00:00 GMT

In 2019, Svelte 3 turned JavaScript into a reactive language. Svelte is a web UI framework that uses a compiler to turn declarative component code like this...

App

<script>
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

<script lang="ts">
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

...into tightly optimized JavaScript that updates the document when state like count changes. Because the compiler can ‘see’ where count is referenced, the generated code is highly efficient, and because we’re hijacking syntax like let and = instead of using cumbersome APIs, you can write less code.

A common piece of feedback we get is ‘I wish I could write all my JavaScript like this’. When you’re used to things inside components magically updating, going back to boring old procedural code feels like going from colour to black-and-white.

Svelte 5 changes all that with runes, which unlock universal, fine-grained reactivity.

Introducing runes

Before we begin

Even though we’re changing how things work under the hood, Svelte 5 should be a drop-in replacement for almost everyone. The new features are opt-in — your existing components will continue to work.

We don’t yet have a release date for Svelte 5. What we’re showing you here is a work-in-progress that is likely to change!

What are runes?

rune /ro͞on/ noun

A letter or mark used as a mystical or magic symbol.

Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses let, =, the export keyword and the $: label to mean specific things, runes use function syntax to achieve the same things and more.

For example, to declare a piece of reactive state, we can use the $state rune:

App

<script>
	let count = 0;
	let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

<script lang="ts">
	let count = 0;
	let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

At first glance, this might seem like a step back — perhaps even un-Svelte-like. Isn’t it better if let count is reactive by default?

Well, no. The reality is that as applications grow in complexity, figuring out which values are reactive and which aren’t can get tricky. And the heuristic only works for let declarations at the top level of a component, which can cause confusion. Having code behave one way inside .svelte files and another inside .js can make it hard to refactor code, for example if you need to turn something into a store so that you can use it in multiple places.

Beyond components

With runes, reactivity extends beyond the boundaries of your .svelte files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a custom store in a .js or .ts file:

counter

import { function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.
@paramvalue initial valuewritable } from 'svelte/store';

export function function createCounter(): {
    subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => Unsubscriber;
    increment: () => void;
}createCounter() {
	const { const subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => UnsubscriberSubscribe on value changes.
subscribe, const update: (this: void, updater: Updater<number>) => voidUpdate value using callback and inform subscribers.
update } = writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Create a Writable store that allows both updating and reading by subscription.
@paramvalue initial valuewritable(0);

	return {
		subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => Unsubscribersubscribe,
		increment: () => voidincrement: () => const update: (this: void, updater: Updater<number>) => voidUpdate value using callback and inform subscribers.
@paramupdater callbackupdate((n: numbern) => n: numbern + 1)
	};
}

Because this implements the store contract — the returned value has a subscribe method — we can reference the store value by prefixing the store name with $:

App

<script>
	import { createCounter } from './counter.js';

	const counter = createCounter();
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
<button on:click={counter.increment}>
	clicks: {$counter}
</button>

<script lang="ts">
	import { createCounter } from './counter.js';

	const counter = createCounter();
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
<button on:click={counter.increment}>
	clicks: {$counter}
</button>

This works, but it’s pretty weird! We’ve found that the store API can get rather unwieldy when you start doing more complex things.

With runes, things get much simpler:

counter.svelte

import { writable } from 'svelte/store';

export function function createCounter(): {
    readonly count: number;
    increment: () => number;
}createCounter() {
	const { subscribe, update } = writable(0);
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

	return {
		subscribe,
		increment: () => update((n) => n + 1)
		get count: numbercount() { return let count: numbercount },
		increment: () => numberincrement: () => let count: numbercount += 1
	};
}

App

<script>
	import { createCounter } from './counter.svelte.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
	clicks: {counter.count}
</button>

<script lang="ts">
	import { createCounter } from './counter.svelte.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
	clicks: {counter.count}
</button>

Outside .svelte components, runes can only be used in .svelte.js and .svelte.ts modules.

Note that we’re using a get property in the returned object, so that counter.count always refers to the current value rather than the value at the time the function was called.

Runtime reactivity

Today, Svelte uses compile-time reactivity. This means that if you have some code that uses the $: label to re-run automatically when dependencies change, those dependencies are determined when Svelte compiles your component:

<script>
	export let width;
	export let height;

	// the compiler knows it should recalculate `area`
	// when either `width` or `height` change...
	$: area = width * height;

	// ...and that it should log the value of `area`
	// when _it_ changes
	$: console.log(area);
</script>

This works well... until it doesn’t. Suppose we refactored the code above:

const const multiplyByHeight: (width: any) => numbermultiplyByHeight = (width) => width: anywidth * height;

$: area = const multiplyByHeight: (width: any) => numbermultiplyByHeight(width);

Because the $: area = ... declaration can only ‘see’ width, it won’t be recalculated when height changes. As a result, code is hard to refactor, and understanding the intricacies of when Svelte chooses to update which values can become rather tricky beyond a certain level of complexity.

Svelte 5 introduces the $derived and $effect runes, which instead determine the dependencies of their expressions when they are evaluated:

<script>
	let { width, height } = $props(); // instead of `export let`

	const area = $derived(width * height);

	$effect(() => {
		console.log(area);
	});
</script>

As with $state, $derived and $effect can also be used in your .js and .ts files.

Signal boost

Like every other framework, we’ve come to the realisation that Knockout was right all along.

Svelte 5’s reactivity is powered by signals, which are essentially what Knockout was doing in 2010. More recently, signals have been popularised by Solid and adopted by a multitude of other frameworks.

We’re doing things a bit differently though. In Svelte 5, signals are an under-the-hood implementation detail rather than something you interact with directly. This means we don’t have the same API design constraints, and can maximise both efficiency and ergonomics. For example, we avoid the type narrowing issues that arise when values are accessed by function call, and when compiling in server-side rendering mode we can ditch the signals altogether, since on the server they’re nothing but overhead.

Signals unlock fine-grained reactivity, meaning that (for example) changes to a value inside a large list needn’t invalidate all the other members of the list. As a result, Svelte 5 is ridonkulously fast.

Simpler times ahead

Runes are an additive feature, but they make a whole bunch of existing concepts obsolete:

the difference between let at the top level of a component and everywhere else
export let
$:, with all its attendant quirks
different behaviour between <script> and <script context="module">
$$props and $$restProps
lifecycle functions (things like afterUpdate can just be $effect functions)
the store API and $ store prefix (while stores are no longer necessary, they are not being deprecated)

For those of you who already use Svelte, it’s new stuff to learn, albeit hopefully stuff that makes your Svelte apps easier to build and maintain. But newcomers won’t need to learn all those things — it’ll just be in a section of the docs titled ‘old stuff’.

This is just the beginning though. We have a long list of ideas for subsequent releases that will make Svelte simpler and more capable.

Try it!

You can’t use Svelte 5 in production yet. We’re in the thick of it at the moment and can’t tell you when it’ll be ready to use in your apps.

But we didn’t want to leave you hanging. We’ve created a preview site with detailed explanations of the new features and an interactive playground. You can also visit the #svelte-5-runes channel of the Svelte Discord to learn more. We’d love to have your feedback!

What’s new in Svelte: September 2023

Dani Sandoval — Fri, 01 Sep 2023 00:00:00 GMT

Happy September y’all! With all the sneak peeks at what’s coming soon in Svelte 5, we thought it’d be best to look back at the last month to see what’s shipped and what the community is building with Svelte.

Before we jump in, a warm welcome to the new Svelte Ambassadors: @cainux and @grischaerbe! Welcome to the crew ⛴️

What’s new in Svelte & Language Tools

svelteHTML has moved from language-tools into Svelte core so that svelte/element types will now load correctly (4.2.0 in Svelte, 107.10.0 in Language Tools)

What’s new in SvelteKit

URL is now accepted in the redirect function (1.23.0, Docs, #10570)
Mistyped route filenames will now throw a warning (1.23.0, #10558)
The new onNavigate lifecycle function enables view transitions - Check out the blog post for more info (1.24.0, Docs, #9605)

But that’s just the new features! For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

Planet Of The Bugs allows developers to practice and hone their skill-sets by exposing them to an endless supply of unique, curated issues and bugs from popular open-source projects on Github
Minesweeper is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the Google Play Store)
Pendor is an AI component generator for Svelte
Avatars Pro is a social proof widget made for the web
Pomodoro Focus is a pomodoro timer browser extension
memegen is a Firefox web extension that allows users to generate memes using various templates
Resgen is a Chrome extension that tailors resumes based on job descriptions and your experiences
Icono Search is an AI-powered video search engine
digital-paper is a writing app with no backspace or undo
Ubuntu 22.04 in Svelte aims to replicate the Ubuntu 22.04 desktop experience on the web
My Queue creates a playlist of written articles by turning them into audio stories

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Society - London August 2023
Building a Blog using SvelteKit and Nostr as a CMS (Part 1) by Kev
Mastering SvelteKit with Geoff Rich | JS Drops by This Dot Media
Using GitHub Contributions To Flex On The Normies, Learn Svelte By Making A Matching Game and Who Needs API Permission When You Can Use Web Scraping by Joy of Code
The missing guide to understanding adapter-static in SvelteKit by Stanislav Khromov
This Week in Svelte:
- 2023 July 28 - Screen reader market share, Svelte to plain JS, Web Components
- 2023 Aug 4 - Svelte 4.1.2, SvelteKit 1.22.4, ES Modules, Types in markup
- 2023 August 11 - Svelte 4.2.0, SvelteKit 1.22.5, How to create Toggle Switches
- 2023 August 18 - SvelteKit 1.22.6, accessible form error summaries
- 2023 August 25 - SvelteKit 1.23.0, Bun and SvelteKit, Enhanced search
Svienna (Svelte Society Vienna) Sessions
Sirens Sessions
- Prismic Slice Machines & SvelteKit with Sam Littlefair
- Medusa and SvelteKit E-Commerce Stack with Lacey Pevey
- Design Systems: Lessons Learned with Eric Liu

To Watch

Image optimization in SvelteKit with vite-imagetools by hartenfellerdev
Building a Todo App with Rust and SvelteKit: Complete Tutorial and Stripe Payment In SvelteKit With Dynamic Pricing by SvelteRust
Leaflet maps in SvelteKit like it’s 2023 (HowTo) ShipBit

To Read

Internationalization in SvelteKit (Series) by Aakash Goplani
The easiest Chatbot you will ever build and Intro to LangSmith🦜️🛠️ by Simon Prammer
SvelteKit: How to make code-based router, instead of file-based router [August 2023] by Max Core
SvelteKit Hydration Gotcha by Captain Codeman
Automatically generate sitemap.xml in SvelteKit by Alex Schnabl
Discovering Svelte: Things I Learned While Using Svelte by Posandu Mapa
Typed fetch with Sveltekit and Hono using RPC by Subhendu Pratap Singh
Svelte Context Module Scripts Explained by raqueebuddin aziz
Building with GPT4 and Svelte by levmiseri
Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis by Chris Jayden
Document Svelte Projects with HTML and JSDoc Comments by Ross Robino

Libraries, Tools & Components

Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked
Threlte, the 3D framework built from Svelte and Three.js has released version 6
vite-plugin-web-extension works great with Svelte to make building browser extensions easier
Salvia-kit Svelte Dashboards contains 10 free dashboard templates for SvelteKit
drab is an Unstyled Svelte component library
svelte-img-previewer is a tool for displaying images from input file types in Svelte
sveltekit-search-params describes itself as the fastest way to read AND write from query search params in SvelteKit

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

Unlocking view transitions in SvelteKit 1.24

Geoff Rich — Thu, 31 Aug 2023 00:00:00 GMT

The view transitions API has been sweeping the web development world lately, and for good reason. It streamlines the process of animating between two page states, which is especially useful for page transitions.

However, until now, you couldn’t easily use this API in a SvelteKit app, since it was difficult to slot into the right place in the navigation lifecycle. SvelteKit 1.24 brought a new onNavigate lifecycle hook to make view transitions integration much easier – let’s dive in.

How view transitions work

You can trigger a view transition by calling document.startViewTransition and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.

var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
	await const domUpdate: () => Promise<void>domUpdate(); // mock function for demonstration purposes
});

Behind the scenes, the browser does something really clever. When the transition starts, it captures the current state of the page and takes a screenshot. It then holds that screenshot in place while the DOM is updating. Once the DOM has finished updating, it captures the new state, and animates between the two states.

While it’s only implemented in Chrome (and other Chromium-based browsers) for now, WebKit is also in favor of it. Even if you’re on an unsupported browser, it’s a perfect candidate for progressive enhancement since we can always fall back to a non-animated navigation.

It’s important to note that view transitions is a browser API, not a SvelteKit one. onNavigate is the only SvelteKit-specific API we’ll use today. Everything else can be used wherever you write for the web! For more on the view transitions API, I highly recommend the Chrome explainer by Jake Archibald.

How onNavigate works

Before learning how to write view transitions, let’s highlight the function that makes it all possible: onNavigate.

Until recently, SvelteKit had two navigation lifecycle functions: beforeNavigate, which fires before a navigation starts, and afterNavigate, which fires after the page has been updated following a navigation. SvelteKit 1.24 introduces a third: onNavigate, which will fire on every navigation, immediately before the new page is rendered. Importantly, it will run after any data loading for the page has completed – since starting a view transition prevents any interaction with the page, we want to start it as late as possible.

You can also return a promise from onNavigate, which will suspend the navigation until it resolves. This will let us wait to complete the navigation until the view transition has started.

function function delayNavigation(): Promise<any>delayNavigation() {
	return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((res: (value: any) => voidres) => function setTimeout<[value: any]>(callback: (value: any) => void, delay?: number, value?: any): NodeJS.Timeout (+1 overload)MDN Reference
setTimeout(res: (value: any) => voidres, 100));
}

onNavigate(async (navigation) => {

	// do some work immediately before the navigation completes

	// optionally return a promise to delay navigation until it resolves
	return function delayNavigation(): Promise<any>delayNavigation();
});

With that out of the way, let’s see how you can use view transitions in your SvelteKit app.

Getting started with view transitions

The best way to see view transitions in action is to try it yourself. You can spin up the SvelteKit demo app by running npm create svelte@latest in your local terminal, or in your browser on StackBlitz. Make sure to use a browser that supports the view transitions API. Once you have the app running, add the following to the script block in src/routes/+layout.svelte.

import { function onNavigate(callback: (navigation: import("@sveltejs/kit").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
onNavigate } from '$app/navigation';

function onNavigate(callback: (navigation: import("@sveltejs/kit").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
onNavigate((navigation: OnNavigatenavigation) => {
	if (!var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition) return;

	return new var Promise: PromiseConstructor
new <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve) => {
		var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
			resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve();
			await navigation: OnNavigatenavigation.NavigationBase.complete: Promise<void>A promise that resolves once the navigation is complete, and rejects if the navigation
fails or is aborted. In the case of a willUnload navigation, the promise will never resolve
complete;
		});
	});
});

With that, every navigation that occurs will trigger a view transition. You can already see this in action – by default, the browser will crossfade between the old and new pages.

How the code works
This code may look a bit intimidating – if you’re curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.

As mentioned above, the onNavigate callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if document.startViewTransition exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.

We then return a promise to delay completing the navigation until the view transition has started. We use a promise constructor so that we can control when the promise resolves.
return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((resolve: (value: any) => voidresolve) => {
	var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
		resolve: (value: any) => voidresolve();
		await navigation.complete;
	});
});
Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until > after we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.

Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting navigation.complete. Once navigation.complete resolves, the new page has been loaded into the DOM and the browser can animate between the two states.

It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.

Customizing the transition with CSS

We can also customize this page transition using CSS animation. In the style block of your +layout.svelte, add the following CSS rules.

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(30px);
	}
}

@keyframes slide-to-left {
	to {
		transform: translateX(-30px);
	}
}

:root::view-transition-old(root) {
	animation:
		90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
	animation:
		210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Now when you navigate between pages, the old page will fade out and slide to the left, and the new page will fade in and slide from the right. These particular animation styles come from Jake Archibald’s excellent Chrome Developers article on view transitions, which is well worth a read if you want to understand everything you can do with this API.

Note that we have to add :root before the ::view-transition pseudoelements – these elements are only on the root of the document, so we don’t want Svelte to scope them to the component.

You might have noticed that the entire page slides in and out, even though the header is the same on both the old and new page. To make for a smoother transition, we can give the header a unique view-transition-name so that it is animated separately from the rest of the page. In src/routes/Header.svelte, find the header CSS selector in the style block and add a view transition name.

header {
	display: flex;
	justify-content: space-between;
	view-transition-name: header;
}

Now, the header will not transition in and out on navigation, but the rest of the page will.

Fixing the types

Since startViewTransition is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your app.d.ts:

declare global {
	// preserve any customizations you have here
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface Platform {}
	}

	// add these lines
	interface ViewTransition {
		updateCallbackDone: Promise<void>;
		ready: Promise<void>;
		finished: Promise<void>;
		skipTransition: () => void;
	}

	interface Document {
		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
	}
}

export {};

Transitioning individual elements

We just saw how giving an element a view-transition-name separates it out from the rest of the page’s animation. Setting a view-transition-name also instructs the browser to smoothly animate it to its new position after the transition completes. The view-transition-name acts as a unique identifier so the browser can identify matching elements from the old and new states.

Let’s see what that looks like – our demo app’s navigation has a small triangle indicating the active page. Right now, it abruptly appears in the new position after we navigate. Let’s give it a view-transition-name so the browser animates it to its new position instead.

Inside src/routes/Header.svelte, find the CSS rule creating the active page indicator and give it a view-transition-name:

li[aria-current='page']::before {
	/* other existing rules */
	view-transition-name: active-page;
}

By adding that single line, the indicator will now smoothly slide to its new position instead of jumping.

(It might be easy to miss the difference – look at the small moving triangle indicator at the top of the screen!)

Reduced motion

It’s important to respect our users’ motion preferences while implementing animation on the web. Just because you can implement an extreme page transition doesn’t mean you should. To disable all page transitions for users who prefer reduced motion, you can add the following to the global styles.css:

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

While this may be the safest option, reduced motion does not necessarily mean no animation. Instead, you could consider your view transitions on a case-by-case basis. For instance, maybe we disable the sliding animation, but leave the default crossfade (which doesn’t involve motion). You can do so by wrapping the ::view-transition rules you want to disable in a prefers-reduced-motion: no-preference media-query:

@media (prefers-reduced-motion: no-preference) {
	:root::view-transition-old(root) {
		animation:
			90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
	}

	:root::view-transition-new(root) {
		animation:
			210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
	}
}

What’s next?

As you can see, SvelteKit doesn’t abstract a whole lot about how view transitions work – you’re interacting directly with the browser’s built-in document.startViewTransition and ::view-transition APIs, rather than framework abstractions like those found in Nuxt and Astro. We’re eager to see how people end up using view transitions in SvelteKit apps, and whether it makes sense to add higher level abstractions of our own in future.

Resources

You can find the demo code from this post on GitHub and the live version deployed to Vercel. Here are some other view transitions resources you may find helpful:

What’s new in Svelte: August 2023

Dani Sandoval — Tue, 01 Aug 2023 00:00:00 GMT

Some sweet new features have dropped in both Svelte and SvelteKit, this month. It’s also great to see how many products and side projects have launched using Svelte as their core technology!

What’s new in Svelte & Language Tools

There’s been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the CHANGELOG.

The 4.1.0 release added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the Custom Elements API docs or the PR for more info!

In addition to supporting SvelteKit’s new HEAD server method, Svelte’s language tools now support Prettier v3 (extensions-107.9.0) and workspace trust settings are now used to support all settings in workspace (extensions-107.8.0).

What’s new in SvelteKit

The HEAD server method is now available in API routes (1.22.0, Docs, #9753)
Responses with Vary headers are now cached, too (except for Vary: *) (1.22.0, Docs, #9993)
There’s now a more helpful error for preview if SvelteKit’s build output doesn’t exist (1.22.2, #10337)

For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

GitLight brings GitHub & GitLab notifications to your desktop
Days is paprikka’s life in days, inspired by Buster Benson’s Life in Weeks
Mofi is a content-aware fill and trim for music
JSON Bucket stores your JSON data so you can access it anywhere through generated API routes
Soggy Planet is an interactive map of Earth where sea levels rise and fall and the lights of civilization shine through the night (Source)
PaperClip is a Chrome extension that makes it easy to memorize details from papers in machine learning, computer vision, and natural language processing.
Maktaba is a bookmark manager that “you will actually use”
Whispering is a Chrome extension that lets you access OpenAI’s Whisper API for fast transcription in the browser (including ChatGPT)
DocuTalk is an AI Customer Support chatbot for your website
Krello is a Trello clone built with Svelte, Appwrite and Flowbite
Been is a map builder with travel stats like visited countries, extreme visited points, etc.
image-to-social-media-thumbnail lets you convert any image to a social media thumbnail
Svelte Capacitor Store is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod by This Dot Media
Svelte Sirens Stream Design Systems: Lessons Learned featuring Eric Liu, creator of Carbon Components Svelte and the sveld docgen library
This Week in Svelte:
- 2023 June 30 - Svelte 4.0.1, SK 1.21, lists, screen readers, loading
- 2023 July 7 - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
- 2023 July 21 - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement

To Watch/Hear

What is The Transitional Web? with Chris Ferdinandi by Smashing Podcast
SvelteKit in 100 seconds by Fireship
Primo V2 Introduction by Primo (a visual CMS based on Svelte)
Understanding Svelte (vs React) by Kodaps Academy
Is it thàt simple? - Mastering SvelteKit by Threeveloper
Markdown in SvelteKit with custom Components: mdsvex by hartenfellerdev
How To Add Confetti for Svelte and Sveltekit 🎉 and Make Your SvelteKit Code 10x Faster With Rust and WebAssembly by SvelteRust

To Read

SvelteJS: My ecosystem is bigger than yours by roguegpu
Avoid shared state on the server in SvelteKit by Aakash Goplani
SvelteKit Fontaine: Reduce Custom Font CLS by Rodney Lab
A Simple Guide to Redirects in Svelte Kit by Justin Golden
React vs Svelte (Q3 2023) by Gee
SvelteKit Page Reaction Component with Upstash Redis by Scott Spence
Building a privacy-friendly, self-hosted application architecture with SvelteKit and Building a privacy-friendly, self-hosted application architecture with SvelteKit by Stanislav Khromov
Deploying Sveltekit on IIS by Nutchapon Makelai
Streamlined Authentication and Secrets Management by Eman

Libraries, Tools & Components

Melt UI is a set of headless, accessible component builders for Svelte
MDsveX has been updated to work with Svelte 4
Svelte Sonner is an opinionated toast component for Svelte
WebExtensionTemplate lets you skip the boilerplate and write a Web Extension with TypeScript and Svelte or React
svelte-rust lets you run Rust code in your Svelte app
SvelteKit SSE provides an easy way to produce and consume server sent events
better-svelte-writable provides a type-safe writable which gives you more control over the container
Svetch.ts is a client/types/schema/docs generator for your API endpoints
sveltekit-localize-url handles URL localization and routing
elegua is a small, reactive PWA router for Svelte
Molly is a bash script and npm module that helps you clean up unused Svelte components in your project
sveltekit-bot is a Telegram bot made with SvelteKit and Vercel

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: July 2023

Dani Sandoval — Sat, 01 Jul 2023 00:00:00 GMT

Svelte 4 is out and folks have been building! There’s a bunch of new showcases, libraries and tutorials to share. So let’s get right into it...

What’s new in Svelte

The big news this month was the release of Svelte 4.0! You can read all about it in the Announcing Svelte 4 post. From performance fixes and developer experience improvements to a brand new site, docs and tutorial... this new release sets the stage for Svelte 5 with minimal breaking changes.

If you’re already on Node.js 16, it’s possible you won’t see any breaking changes in your project. But be sure to read the migration guide for all the details.

For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

What’s new in SvelteKit

This month there were lots of awesome bug fixes, so be sure to upgrade to the latest version! There are also a few new features to mention:

The new event.isSubRequest boolean indicates whether this is a same-origin fetch request to one of the app’s own APIs during a server request (1.21.0, Docs, #10170)
A new config option, config.kit.env.privatePrefix will set a private prefix on environment variables. This defaults to '' (1.21.0, Docs, #9996)
VERSION is now exported and accessible via @sveltejs/kit. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (1.21.0, Docs, #9969)

For adapter-specific changes, check out the CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

Heerdle is a remake of Spotify’s now-defunct Heardle - the daily music guessing game
Meoweler is a travel site filled with cats and helpful facts about popular destinations
A tech lead from IKEA gave a few more details on the way they build pages (and page template) using Svelte
The Quest to Replace Passwords features an interactive comparison visualization for all the popular password management tools
audiogest lets you turn speech to text & summarize any audio in one click
heroify generates 3D graphics for your website with AI
Diesel Legacy: The Brazen Age is a fighting game whose leaderboard and profile pages were all built in Svelte
markmyimages is a watermarking tool with bulk image resize, rename, effects, and more
md.robino.dev is a web based markdown editor
YABin is Yet Another Pastebin with some very specific features

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dev Vlog: June 2023 - Svelte 4.0 with Rich Harris
PodRocket: Svelte 4 with Geoff
This Dot Media: Svelte 4 Launch Party with Simon, Ben, Geoff, and Puru
Exposing Svelte: Between Two Nerds is a comedic conversation between Rich Harris and Dax Raad
Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions with Stanislav Khromov
SvelteKit and Storybook with Jeppe Reinhold
This Week in Svelte:
- 2023 June 2 - SvelteKit 1.20.1, Svelte 4 pre-release, Headless UI libraries
- 2023 June 9 - Updates, Self-hosting SvelteKit, Passing styles to children
- 2023 June 16 - Svelte 4 next.1, how to create a hamburger menu, group layouts
- 2023 June 23 - Svelte 4, Popovers and hover, Real Time requests with SvelteKit
Svelte Radio
- SvelteLab - a Svelte REPL for SvelteKit with Antonio and Paolo
- Svelte Radio Live - Svelte 4 Summer Special with Simon and Puru
Svelte Society - London June 2023
Using The Svelte Context API With Stores, Impossible FLIP Layout Animations With Svelte And GSAP and Create Beautiful Presentations With Svelte by Joy of Code

To Watch

Server-side filtered, paginated and sorted Table in SvelteKit by hartenfellerdev
Best Icon Library for Svelte and SvelteKit in 2023 by SvelteRust

To Read

From Zero to Production with SvelteKit by Justin Ahinon
Thoughts on Svelte(Kit), one year and 3 billion requests later by Claudio Holanda
How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor by Stanislav Khromov
Learning by doing - Vue devs build a Svelte Single Page App by Black Spike
Generate Breadcrumb and Navigation in SvelteKit, SvelteKit Authentication using SvelteKitAuth and OAuth providers: A Comprehensive Guide and SvelteKitAuth with Salesforce OAuth provider by Aakash Goplani
Instantly find and remove Svelte component orphans by Jeremy Zaborowski
Migration Guide from Routify to SvelteKit Router by Aakash Goplani
Creating 3D data visualization using Threlte and D3 by DataViz Cubed
Svelte Real‑time Multiplayer Game: User Presence and SvelteKit PostCSS Tutorial: use Future CSS Today by Rodney Lab
SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters by Igor Nowosad

Libraries, Tools & Components

The Vercel AI SDK is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte
Superforms 1.0 has been released. Check out the migration guide and new feature list for more details
Panda CSS is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
svelte-section-list is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections
WebStorm is starting to use the Svelte Language Server in its IDE tooling
shadcn-svelte is an unofficial port of shadcn/ui to Svelte that makes it easy to build your component library from common base components
sveltekit-multibuild is a starter repo to create Android apps, web sites, desktop apps, and Chrome extensions automatically
SvelteKit AI Chatbot is an open-source AI chatbot app template built with SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV.
KitAI provides batteries-included AI templates for SvelteKit and Next.js
Svelte Form Builder is a no-code drag&drop form builder for Svelte

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

svelte.dev: A complete overhaul

Puru Vijay — Thu, 29 Jun 2023 00:00:00 GMT

When the initial version of Svelte v3 was released four years ago, it included the single-page documentation that folks have been familiar with. That documentation structure had stayed the same as Svelte’s API surface increased steadily and more details were added. As a result, the single page got larger and larger to the point where it was becoming difficult to find things. The community had been asking for a revamp, and now it’s here!

Meet the new svelte.dev — a complete overhaul of the old website.

Multi-page docs

The table of contents had grown to be quite large and you had to scroll across half a dozen screens to see the whole thing. We heard you! The docs are all split up into multiple pages now and all pages list their sections in the righthand sidebar.

All modules exposed by Svelte are also listed in the sidebar under the Runtime section:

svelte/compiler is under Compiler and API section

We’ve also taken extra care to ensure that all the links from the old website will be redirected to the correct new page.

Search

The lack of search functionality could make finding stuff a nuisance as Ctrl+F only returns results in order of occurrence and not order of importance. While Ctrl+F did have its benefits such as not requiring JS, now that the site has multiple pages, it’s not an option anymore.

And for that, the new website comes with a search bar, which searches through the docs and the API surface. Hit Ctrl+K (or CMD+K for Mac users) and start searching — it even works without JavaScript!

Lights, TypeScript, Action!

The new website comes with a JavaScript / TypeScript toggle, so you can view the docs in your preferred flavour. Every module’s exported types are listed at the bottom of the page for easy reference. The types are automatically generated from Svelte’s source code, so they’re always up to date.

All the JavaScript and TypeScript code snippets have type hints available. Just hover over the variable to see its type. This allows the docs to be type checked at build time, which ensures they’re never out of date.

We also (finally!) added documentation for Actions. Svelte Actions are a way to interact with the DOM, and are a great way to add interactivity to your app. The docs for Actions are also available in TypeScript.

<script lang="ts">
	import type { Action } from 'svelte/action';

	const foo: Action = (node) => {
		// the node has been mounted in the DOM

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	};
</script>

<div use:foo />

Dark mode

After many years of users asking for dark mode on the website so they can read the docs for their night-time coding sessions, we finally added it! The website now has a dark mode toggle, which is also synced with your OS’s dark mode settings. It can be toggled from the top navbar (bottom navbar on mobile).

Updated REPL

The REPL has been rewritten from scratch to be fully typesafe and comes with features like dark mode. It was reimplemented to upgrade to CodeMirror 6 which comes with many accessibility improvements, multi-select mode, performance improvements, tree-shaking, and many more features.

Redesigned homepage

Is it a website redesign if the homepage doesn’t get the same amount of love? 🙃

The homepage has also been updated to align with kit.svelte.dev and features the beautiful Svelte Machine by @vedam.

We sent out a tweet about experimenting with bottom navigation bar on mobile rather than the conventional top navbar. The response was overwhelmingly positive, so we went ahead and added it! This makes it easier to navigate the website on mobile with just one hand. We also made sure that you’ll get to where you want with as few interactions as possible. If you’re in the docs section of the site, you’ll likely want to browse other documentation pages, which is why the navbar will show these by default when opening it with the option to go one level up to the general site navigation.

If you’re on mobile, you can already see it at the bottom. If you’re on desktop, you can see it by resizing your browser window to a smaller size.

Unification of Svelte websites

Now svelte.dev, kit.svelte.dev, and learn.svelte.dev all use the same design system and are more consistent with each other. This makes it easier to navigate between the websites and also makes it easier to maintain them. We have a package shared across the sites called @sveltejs/site-kit, which went through rigorous changes over last 4 months as we have been moving all common code into this package.

For example, we implemented the dark mode toggle in @sveltejs/site-kit. We then simply updated the package on learn.svelte.dev and kit.svelte.dev and those sites got the dark mode toggle automatically (this is also the reason why those sites got the dark mode toggle before the svelte.dev relaunch).

What’s next

We have many more things planned to do post-launch. Some of them are:

Redesigned blog page
Improved search
Playground: a unified REPL and Examples page
Unify the infrastructure of the Svelte REPL and the tutorial by creating a webcontainer-based REPL with rollup as a fallback
Address any feedback

Announcing Svelte 4

The Svelte team — Thu, 22 Jun 2023 00:00:00 GMT

After months in the making, we’re excited to announce the stable release of Svelte 4.

Time flies - Svelte 3 was released more than four years ago! In JavaScript-framework-time, that’s eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas. It sets the stage for the next generation of Svelte to be released as Svelte 5 - we think you’ll love it.

If you haven’t tried Svelte yet, take it for a spin in our interactive tutorial, on StackBlitz, or locally with npm create svelte@latest. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch Svelte Radio Live to learn more about this release.

What’s new

Performance

This release results in smaller and faster hydration code. To see the impact, SvelteKit users can see their compiled output shrink in size by examining the .svelte-kit/output/client/_app/immutable/nodes folder. For example, on kit.svelte.dev the JS generated across the whole site was reduced in size by 12.7% (126.3 kB to 110.2 kB).

Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.

The number of dependencies in Svelte has been greatly reduced from 61 down to 16. This means faster downloads for our users as well as less susceptibility to supply chain attacks. We also slightly reduced the number of dependencies in the latest versions of SvelteKit as well.

Developer experience

Svelte 4 makes the Svelte authoring experience more intuitive and consistent: |local is now the default for transitions to avoid animations blocking page transitions, preprocessors are now easier to write, and multiple fixes make CSP easier to set up and use.

For users of web components, the largest change is an overhaul of the way you use Svelte to author custom elements. By changing the way they are generated, a whole class of bugs and inconsistencies was eliminated.

Finally, we’ve also made several improvements to the IDE authoring experience: cmd+click in svelte modules now takes you to the implementation rather than a .d.ts file imports from svelte/internal are now hidden and will not clutter autocomplete suggestions auto-imports now work more reliably

Updated site, docs, and tutorial

The official svelte.dev site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new tutorial experience.

Stay tuned for a more in-depth blog post about all the site changes in the coming days!

Migrating

Most apps and libraries that are compatible with Svelte 3 should be compatible with Svelte 4. Library authors will need to update the version range to include Svelte 4 if svelte is specified in the peerDependencies. For application authors, the most common change required will be updating tooling to meet the new minimum version requirements such as Node.js 16. Many other migration steps can be handled with npx svelte-migrate@latest svelte-4.

Read the migration guide for full details.

Svelte 5: the next generation of Svelte

Svelte 5 will be a rewrite of the Svelte compiler and runtime. Svelte 4 was mainly about setting the ground for these future improvements by adopting modern tooling and dropping support for some legacy versions of various technologies such as older bundlers. These changes will help us in a number of ways such as being able to more easily compare the Svelte 5 and Svelte 4 codebases and being able to run the existing tests against the new implementation. Svelte 5 will bring major new features and performance improvements to Svelte. The changes are still baking and not quite ready to share yet, but stay tuned!

Changelog

See the full list of changes in the changelog.

Acknowledgements

First and foremost, thank you to all of the many Svelte maintainers and contributors who made this release possible. Developers contributing multiple PRs to this release were @dummdidumm, @gtm-nayan, @benmccann, @tanhauhau, @Karlinator, and @ngtr6788. Also, thank you to the many community members who donated to the Svelte OpenCollective - these donations sponsored the site overhaul completed by PuruVJ as well as a number of recent fixes from @gtm-nayan.

Finally, thank you to the various library maintainers from across the ecosystem who helped prepare for this release. Thank you to @jessebeach for the help in getting out new versions of aria-query and axobject-query, @jreinhold for ensuring compatibility with Storybook, and @yanick for updating svelte-testing-library. And to ensure things stay working, the svelte-ecosystem-ci setup by @dominikg — which was modeled off his similar work for Vite — has been helping to test against major projects in the ecosystem on an ongoing basis.

What’s new in Svelte: June 2023

Dani Sandoval — Thu, 01 Jun 2023 00:00:00 GMT

Welcome to June everyone and congrats to our SvelteHack winners, across all the categories! If you missed it, these winners were announced at Svelte Summit on May 6th 🎉

The entire playlist of the summit, including all the talks broken up in to separate videos, can be found on the Svelte Society YouTube channel. So check it out, if you haven’t already.

Lots to cover in this month’s newsletter, including a lot of improvements to both Svelte and Kit...

What’s new in Svelte

Svelte 4.0.0-next.0, the first pre-release version of Svelte 4.0 is out! An explanation of the changes, improvements and goals of this release can be found in the Releases page on GitHub. Check it out to get an early sneak peek of the future of Svelte. It also includes a migration guide, for those interested in the minimal amount of breaking changes and deprecations.

Svelte 3.59.0 is also out, with a ton of new features:

Restructuring arrays with the spread operator (...) is now handled correctly (3.59.0, #8552, #8554)
The new a11y-autocomplete-valid warning will now warn if the autocomplete attribute isn’t used according to the HTML specification (3.59.0, Examples, #8520)
fullscreenElement and visibilityState bindings are now available for the <svelte:document> element (3.59.0, #8507)
The devicePixelRatio binding is now available for the <svelte:window> element (3.59.0, #8285)
The ResizeObserver bindings contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize are now usable with bind:(3.59.0, #8022)

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

What’s new in SvelteKit

Route-level entry generators allow exporting an entries function from +page, +page.server, and +server files to supply possible values for params for prerendering (1.16.0, Docs, #9571)
URLs in <meta> tags are now crawled to make programmatic social-images much easier (1.17.0, Docs, #9900)
data and form have been renamed to formData and formElement respectively in the enhance function. Using them through the old names will log a deprecation warning and they’ll be removed in a future version. (1.17.0, Docs, #9902)
Link options can now be set to true and false (1.19.0, Docs, #10039)
The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, #9949)

Community Showcase

Apps & Sites built with Svelte

a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web
JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
Typepost is a simple text post generator for social media
tall.ly is a website for sharing bookmarks (example)
bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture
Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit
WeWatch allows watching videos together in sync
Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
CodingView.io is an online coding interview tool
MeatGPT is an art-site that promptly ignores your prompt
Vim Ninja is an interactive Vim course in the browser
prcl is a Pastebin-alternative focused on speed and simplicity
md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

This Week in Svelte:
- 2023 April 28 - SK 1.15.9, colour contrast, SK reusable types, path aliases
- 2023 May 5 - SvelteKit 1.16.0, reactive statement lifecycle, custom stores
- 2023 May 12 - Svelte 4.0 preview, SvelteKit 1.16.3, Svelte 3.59.1
- 2023 May 19 - SvelteKit 1.18.0, accessible HTML tables, CSS nesting
- 2023 May 26 - SvelteKit 1.19.0, choosing a UI library, breakpoint debugging
Svelte Radio
- Svelte Summit Hypisode (May 4, 2023)
- A primer on AI for developers with Swyx from Latent Space (May 11, 2023 | Video Version)

To Watch

Build a Blazing Fast SvelteKit Markdown Blog, Page Versus Standalone Endpoints In SvelteKit and Learn How Data Flows In Your SvelteKit App by Joy of Code
Build a ChatGPT Plugin with SvelteKit by SuperMilkDaddy
Svelte makes Drag And Drop API easy! and Simple native-like App in SvelteKit! by Antonio Sarcevic
Let’s Learn Svelte.js in 60 Minutes (fun speed run). by developedbyed

To Read

Bridging Vue 2 and Svelte by Alexis Faizeau
Write Once, Run Anywhere by Ross Robino
Reflections on Migrating my SaaS To SvelteKit by SvelteKitSaaS
Authentication system using rust (actix-web) and SvelteKit by John Owolabi Idogun
SvelteKit Forms: Grammar Check App, SvelteKit Ably: Sqvuably Real‑Time Game and Svelte Login Form Example: Best Practices by Rodney Lab
The Correct Way to Use Stores in SvelteKit and Rich Harris is NOT Getting Rid of TS Support in Svelte by Jonathan Gamble
How to add a basic SEO component to SvelteKit by Thilo Maier
SvelteKit Contact Form Example with Airtable by Scott Spence
Performant Reactivity with Svelte-Kit by Erxk
Svelte stores: the curious parts by Valdimir Klepov

Libraries, Tools & Components

svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
Sveltronics is a collection of Svelte utility functions for your project
Prompta is yet another interface for chatting with ChatGPT (or GPT-4)
Colibri is a lightweight, customizable component library for Svelte apps
Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation
Tailwind Elements now has a Svelte Integration

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: May 2023

Dani Sandoval — Mon, 01 May 2023 00:00:00 GMT

Before we dive into the updates, there’s a few announcements worth mentioning at the top:

New Svelte Ambassadors

Regular features of this newsletter and all-around great content creators for Svelte JoyOfCode and HuntaByte have been appointed as Svelte Ambassadors. Ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement!

SvelteHack winners will be announced May 6th

In a just a few days, we’ll find out who won SvelteHack - the Svelte Hackathon that took place between February 17th and April 17th. Tune in to Svelte Summit on May 6th to see if your favorite project was chosen 👀

Lots of submissions to the hackathon are featured in this month’s showcase... but first, let’s see what’s new!

What’s new in Svelte

style blocks now support CSS @container queries (3.58.0)
bind:innerText is now available for contenteditable elements (3.58.0)
A new accessability warning, a11y-interactive-supports-focus will now warn when interactive elements are not focusable (3.58.0)

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

What’s new in SvelteKit

When hot module reloading (HMR) is enabled, the page will reload after an error is fixed (1.14.0, #9497)
Two apps loaded into the same html page can now be loaded simultaneously in “embedded” mode (1.15.7, #9610)
Vite’s compilation will now log warnings for packages that use the svelte field to resolve Svelte files differently than standard Vite resolve (vite-plugin-svelte@2.1.0, kit@1.15.8)

What’s new in Language Tools

Support for <svelte:document> (#1958) and intellisense report for new bindings (#1957) (107.3.0)
The new fix-all menu option for the “Quick fix...” makes it easy to “Add all missing imports” and other detected errors (107.3.0, #1939)
We have a new and better official ESLint plugin! Previous support for Svelte in ESLint did not handle the template AST well, resulting in false positive/negatives and a high barrier to custom ESLint rules. This new official version is based on ota-meshi’s svelte-eslint-parser and is ready for prime time. Try it out and share your feedback!

Community Showcase

Apps & Sites built with Svelte

Sound of War is a storytelling data visualization project to help understand the scale of destruction in Ukraine
Syntax FM’s swag shop is now built with SvelteKit, PlanetScale and Prisma
Appreciation Jar is your own private space where you can send encouraging and appreciative messages to your partner
Japanese Jouzu is a Japanese sound and symbol learning app
MarkMyImages is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
Immich is a self-hosted photo and video backup solution directly from your mobile phone
Earbetter is an ear training game and tools for playing and programming music and audio
Tune Twisters is a guessing game for songs... in reverse
ResponseHunt is a mystery game based on browser requests - use your programming skills to get to the “golden” response
Wolfensvelte 3D is a Svelte “port” of Wolfenstein 3D
Code Solving teaches how to solve problems with code
Make Bookmarklets is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
GeniePM is an AI tool to help Product Managers write user stories and requirements
Bitesized News is an AI that delivers news digests and responds to questions via chat
Open Tunings is a place to explore alternative guitar tunings without having to retune your guitar
BlinkSMS is a text alert tool for Stockholm Student Housing to help with booking laundry times
Dev Links helps dev showcase multiple links in a single place - similar to Linktree and Kofi
Audiogest is a tool to convert speech to text & summarize any audio
MineSweep is a rendition of Minesweeper built with Svelte and JavaScript
Biolytics lets you import your lab tests to see all your lab tests in one place
Zero share is a secure P2P file sharing using WebRTC
Svelte lab is a sandbox for creating and sharing SvelteKit projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team
Rich Harris on frameworks, the web, and the edge. from Vercel’s Svelte Meetup in NYC
Svelte & SvelteKit taught by Rich Harris on Frontend Masters
This Week in Svelte:
Svelte Radio

To Watch

The Complete SvelteKit Course For Building Modern Web Apps and Simple SvelteKit Page Transitions by Joy of Code
Svelte For React Developers | Your Next JavaScript Framework? by Cretezy
Svelte & SvelteKit: The Complete Guide by Ali Alaa on Udemy
ChatGPT-4 with SvelteKit 🤖 Generative AI on the EDGE 🌍 by Johnny Magrippis

To Read

Headless WordPress with GraphQL and SvelteKit and How to fix the duplicate meta tags issue in SvelteKit by Justin Ahinon
How to setup tRPC in a SvelteKit project by Raqueebuddin Aziz
Better Data Visualizations with Svelte by newline
Offline App with SvelteKit + SQLite Part 1: Setup WebAssembly SQLite by hartenfellerdev

Libraries, Tools & Components

Sveltris lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
SwiftMarket is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
Svelegante is a Classy writable store for Svelte
Table Generator lets you create, design and customize your own tables tables online using a graphical editor
Svelte Animated Headline is an animated headline component that can grab attention in an informative way
SvelteKit Music App Example demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
Socio is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
Flowbite Svelte is an official Flowbite component library for Svelte
Wundergraph, a backend for frontend framework, just released their Svelte Query client
Lucia just reached 1.0 for their simple and flexible auth library for SvelteKit
svelte-stepper is a simple library for building animated stepper flows with Svelte

As always, feel free to let us know if we missed anything on Reddit or Discord.

See ya next time!

What’s new in Svelte: April 2023

Dani Sandoval — Sat, 01 Apr 2023 00:00:00 GMT

Happy April, everyone! This month, we’re covering all the new features in the Svelte compiler, some quality-of-life improvements in SvelteKit and a huge showcase (like always).

In core team news, Dominic Gannaway has joined Vercel to work on Svelte full-time! Dominic is a world-class expert on wringing performance out of javascript engines, on the DOM, on reactivity, on accessibility, and more! You might know him as the creator of the Inferno UI framework or Lexical, Meta’s WYSIWYG editor. It’ll be great to see his talents at work across the Svelte ecosystem 🌱

Don’t forget! Svelte Summit Spring, Svelte’s 6th virtual conference, will be happening on May 6th. Also, there’s just two weeks left until the end of SvelteHack... It’s a great opportunity to share your creations with the community and maybe even earn a prize!

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

What’s new in Svelte

A bunch of new features are now available as of 3.56.0!
- Add |stopImmediatePropagation event modifier for on:eventname (#5085, Docs)
- Add axis parameter to slide transition (#6182, Docs)
- Add readonly utility to convert writable store to readonly (#6518, Docs)
- Add readyState binding for media elements (#6666, Docs)
- Add naturalWidth and naturalHeight bindings to images (#7771, Docs)
Support  on components (#8082)
Inputs in a bind:group will clear when their value is set to undefined (3.56.0, #8214)
<input> values will now persist when swapping elements with spread attributes in an {#each} block (3.56.0, #7578)
Better warnings across the board - from noreferrer to aria rules (3.56.0)
Add svelte:document (3.57.0, #3310)
The style: directive will now take precedence over a style= attribute (3.57.0, #7475)
CSS units are now supported in the fly and blur transitions (3.57.0, #7623, Docs)

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

What’s new in SvelteKit

You can now get all cookies for a request with cookies.getAll (1.10.0, #9287, Docs)
Easily manage the submission status of (multiple) forms with the new exposed submitter parameter in use:enhance (1.12.0, #9425, Docs)
The default error page now has dark mode styles (1.13.0, #9460)
You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the announcement blog post

Community Showcase

Apps & Sites built with Svelte

Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
unplaneted is an interface for exploring very large space images
PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
papi lets you create prompts for AI models and share them with others with a unique link
Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
SQLite Playground lets you learn how SQLite runs and stores data in the browser
svgl is a beautiful library with SVG logos
Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
Game On Or Not is a free web app that helps you organize sports with your friends
Sveltia CMS is a Git-based lightweight headless CMS

Learning Resources

Featuring Svelte Contributors and Ambassadors

Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich on the svelte.dev Blog
Dev Vlog: Rich Harris shows us what’s new in Svelte and Kit, March 2023 from Svelte Society
- If you missed this one live, check out the next one - scheduled for April 5th
Svelte Society - London February 2023
Svelte Radio episodes from this month:
This Week In Svelte videos:

To Watch or Hear

Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0 by Joy of Code
Why Is Svelte.js so Popular? by Prismic
Interactive Tables in SvelteKit with TanStack Table by hartenfellerdev
SvelteKit + GraphQL with Houdini by Aftab Alam

To Read

Thoughts on Svelte by Ty Hopp
Storybook on why (and how) it supports SvelteKit
Svelte Authentication Tutorial with Authorizer by The Thinks
Use Zod to Validate Forms on the Server with SvelteKit by Ross Robino
Do I need a sitemap for my SvelteKit app, and how do I create it? and Complement zero-effort type safety in SvelteKit with Zod for even more type safety and Configuring Turborepo for a SvelteKit monorepo by Thilo Maier
Adding page transitions in SvelteKit by Josh Collinsworth
E2E testing with SvelteKit and Playwright and Why you should use TypeScript in your next SvelteKit projects by Justin Ahinon
Understanding the structure of a SvelteKit project by Igor Nowosad
Secure Authentication in Svelte using Hooks by Brewhouse Digital

Libraries, Tools & Components

@vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
Inlang is building i18n for SvelteKit and is looking for feedback
Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
Svelte Legos is a collection of essential Svelte Composition Utilities
svelte-stored-writable is a drop-in extension of Svelte’s writable that additionally stores and restores its contents using localStorage.
svelte-virtual provides Svelte components for efficiently rendering large lists.
ChatGPT Clones and Starters
- chatwithme.chat is an open source ChatGPT UI
- SlickGPT is a light-weight “use-your-own-API-key” web client for the OpenAI API written in Svelte
- AI Chat Bestie is an unofficial ChatGPT app
- chatgpt-svelte is a simple UI for the ChatGPT Open AI API

Thanks for reading! And don’t forget to try your hand at the Svelte Hackathon 🧑‍💻

As always, feel free to let us know if we missed anything on Reddit or Discord.

See ya next time!

Zero-effort type safety

Simon Holthausen — Thu, 09 Mar 2023 00:00:00 GMT

By sprinkling type annotations into your SvelteKit apps, you can get full type safety across the network — the data in your page has a type that’s inferred from the return values of the load functions that generated that data, without you having to explicitly declare anything. It’s one of those things that you come to wonder how you ever lived without.

But what if we didn’t even need the annotations? Since load and data are part of the framework, can’t the framework type them for us? This is, after all, what computers are for — doing the boring bits so we can focus on the creative stuff.

As of today, yes: it can.

If you’re using VSCode, just upgrade the Svelte extension to the latest version, and you’ll never have to annotate your load functions or data props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool svelte-check!

Before we dive in, let’s recap how type safety works in SvelteKit.

Generated types

In SvelteKit, you get the data for a page in a load function. You could type the event by using ServerLoadEvent from @sveltejs/kit:

src/routes/blog/[slug]/+page.server

import type { interface ServerLoadEvent<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, RouteId extends RouteId | null = string | null>ServerLoadEvent } from '@sveltejs/kit';

export async function function load(event: ServerLoadEvent): Promise<{
    post: string;
}>load(event: ServerLoadEvent<Record<string, string>, Record<string, any>, string | null>event: interface ServerLoadEvent<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, RouteId extends RouteId | null = string | null>ServerLoadEvent) {
	return {
		post: stringpost: await const database: {
    getPost(slug: string | undefined): Promise<string>;
}database.function getPost(slug: string | undefined): Promise<string>getPost(event: ServerLoadEvent<Record<string, string>, Record<string, any>, string | null>event.RequestEvent<Record<string, string>, string | null>.params: Record<string, string>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
params.stringpost)
	};
}

This works, but we can do better. Notice that we accidentally wrote event.params.post, even though the parameter is called slug (because of the [slug] in the filename) rather than post. You could type params yourself by adding a generic argument to ServerLoadEvent, but that’s brittle.

This is where our automatic type generation comes in. Every route directory has a hidden $types.d.ts file with route-specific types:

src/routes/blog/[slug]/+page.server

import type { ServerLoadEvent } from '@sveltejs/kit';
import type { import PageServerLoadEventPageServerLoadEvent } from './$types';

export async function function load(event: PageServerLoadEvent): Promise<{
    post: any;
}>load(event: PageServerLoadEventevent: import PageServerLoadEventPageServerLoadEvent) {
	return {
		post: await database.getPost(event.params.post)
		post: anypost: await database.getPost(event: PageServerLoadEventevent.params.slug)
	};
}

This reveals our typo, as it now errors on the params.post property access. Besides narrowing the parameter types, it also narrows the types for await event.parent() and the data passed from a server load function to a universal load function. Notice that we’re now using PageServerLoadEvent, to distinguish it from LayoutServerLoadEvent.

After we have loaded our data, we want to display it in our +page.svelte. The same type generation mechanism ensures that the type of data is correct:

src/routes/blog/[slug]/+page

<script lang="ts">
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<h1>{data.post.title}</h1>

<div>{@html data.post.content}</div>

Virtual files

When running the dev server or the build, types are auto-generated. Thanks to the file-system based routing, SvelteKit is able to infer things like the correct parameters or parent data by traversing the route tree. The result is outputted into one $types.d.ts file for each route, which looks roughly like this:

$types.d

import type * as module "@sveltejs/kit"Kit from '@sveltejs/kit';

// types inferred from the routing tree
type type RouteParams = {
    slug: string;
}RouteParams = { slug: stringslug: string };
type type RouteId = "/blog/[slug]"RouteId = '/blog/[slug]';
type type PageParentData = {}PageParentData = {};

// PageServerLoad type extends the generic Load type and fills its generics with the info we have
export type type PageServerLoad = (event: Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>) => MaybePromise<"/blog/[slug]">PageServerLoad = module "@sveltejs/kit"Kit.type ServerLoad<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, OutputData extends Record<string, any> | void = void | Record<string, any>, RouteId extends RouteId | null = string | null> = (event: Kit.ServerLoadEvent<Params, ParentData, RouteId>) => MaybePromise<OutputData>The generic form of PageServerLoad and LayoutServerLoad. You should import those from ./$types (see generated types)
rather than using ServerLoad directly.
ServerLoad<type RouteParams = {
    slug: string;
}RouteParams, type PageParentData = {}PageParentData, type RouteId = "/blog/[slug]"RouteId>;

// The input parameter type of the load function
export type type PageServerLoadEvent = Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>PageServerLoadEvent = type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : neverObtain the parameters of a function type in a tuple
Parameters<type PageServerLoad = (event: Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>) => MaybePromise<"/blog/[slug]">PageServerLoad>[0];

// The return type of the load function
export type type PageData = Kit.ReturnType<any>PageData = module "@sveltejs/kit"Kit.type Kit.ReturnType = /*unresolved*/ anyReturnType<
	typeof import('../src/routes/blog/[slug]/+page.server.js').load
>;

We don’t actually write $types.d.ts into your src directory — that would be messy, and no one likes messy code. Instead, we use a TypeScript feature called rootDirs, which lets us map ‘virtual’ directories to real ones. By setting rootDirs to the project root (the default) and additionally to .svelte-kit/types (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:

// on disk:
.svelte-kit/
├ types/
│ ├ src/
│ │ ├ routes/
│ │ │ ├ blog/
│ │ │ │ ├ [slug]/
│ │ │ │ │ └ $types.d.ts
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelte

// what TypeScript sees:
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ $types.d.ts
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelte

Type safety without types

Thanks to the automatic type generation we get advanced type safety. Wouldn’t it be great though if we could just omit writing the types at all? As of today you can do exactly that:

src/routes/blog/[slug]/+page.server

import type { PageServerLoadEvent } from './$types';

export async function function load(event: any): Promise<{
    post: any;
}>load(event: anyevent: PageServerLoadEvent) {
	return {
		post: anypost: await database.getPost(event: anyevent.params.post)
	};
}

src/routes/blog/[slug]/+page

<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	export let data;
</script>

While this is super convenient, this isn’t just about that. It’s also about correctness: When copying and pasting code it’s easy to accidentally get PageServerLoadEvent mixed up with LayoutServerLoadEvent or PageLoadEvent, for example — similar types with subtle differences. Svelte’s major insight was that by writing code in a declarative way we can get the machine to do the bulk of the work for us, correctly and efficiently. This is no different — by leveraging strong framework conventions like +page files, we can make it easier to do the right thing than to do the wrong thing.

This works for all exports from SvelteKit files (+page, +layout, +server, hooks, params and so on) and for data, form and snapshot properties in +page/layout.svelte files.

To use this feature with VS Code install the latest version of the Svelte for VS Code extension. For other IDEs, use the latest versions of the Svelte language server and the Svelte TypeScript plugin. Beyond the editor, our command line tool svelte-check also knows how to add these annotations since version 3.1.1.

How does it work?

Getting this to work required changes to both the language server (which powers the IntelliSense in Svelte files) and the TypeScript plugin (which makes TypeScript understand Svelte files from within .ts/js files). In both we auto-insert the correct types at the correct positions and tell TypeScript to use our virtual augmented file instead of the original untyped file. That in combination with mapping the generated and original positions back and forth gives the desired result. Since svelte-check reuses parts of the language server under the hood, it gets that feature for free without further adjustments.

We’d like to thank the Next.js team for inspiring this feature.

What’s next

For the future we want to look into making even more areas of SvelteKit type-safe — links for example, be it in your HTML or through programmatically calling goto.

TypeScript is eating the JavaScript world — and we’re here for it! We care deeply about first class type safety in SvelteKit, and we provide you the tools to make the experience as smooth as possible — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or typed JavaScript through JSDoc.

What’s new in Svelte: March 2023

Dani Sandoval — Wed, 01 Mar 2023 00:00:00 GMT

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-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

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

Streaming, snapshots, and other new features since SvelteKit 1.0

Geoff Rich, Rich Harris — Tue, 21 Feb 2023 00:00:00 GMT

The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: streaming non-essential data, snapshots, and route-level config.

Stream non-essential data in load functions

SvelteKit uses load functions to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn’t essential – the user won’t see any part of the new page until all the data is ready.

There were ways to work around this. In particular, you could fetch the slow data in the component itself, so it first renders with the data from load and then starts fetching the slow data. But this was not ideal: the data is even more delayed since you don’t start fetching until the client renders, and you’re also having to break SvelteKit’s load convention.

Now, in SvelteKit 1.8, we have a new solution: you can return a nested promise from a server load function, and SvelteKit will start rendering the page before it resolves. Once it completes, the result will be streamed to the page.

For example, consider the following load function:

export const const load: PageServerLoadload: PageServerLoad = () => {
	return {
		post: anypost: fetchPost(),
		streamed: {
    comments: any;
}streamed: {
			comments: anycomments: fetchComments()
		}
	};
};

SvelteKit will automatically await the fetchPost call before it starts rendering the page, since it’s at the top level. However, it won’t wait for the nested fetchComments call to complete – the page will render and data.streamed.comments will be a promise that will resolve as the request completes. We can show a loading state in the corresponding +page.svelte using Svelte’s await block:

<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
</script>

<article>
	{data.post}
</article>

{#await data.streamed.comments}
	Loading...
{:then value}
	<ol>
		{#each value as comment}
			<li>{comment}</li>
		{/each}
	</ol>
{/await}

There is nothing unique about the property streamed here – all that is needed to trigger the behavior is a promise outside the top level of the returned object.

SvelteKit will only be able to stream responses if your app’s hosting platform supports it. In general, any platform built around AWS Lambda (e.g. serverless functions) will not support streaming, but any traditional Node.js server or edge-based runtime will. Check your provider’s documentation for confirmation.

If your platform does not support streaming, the data will still be available, but the response will be buffered and the page won’t start rendering until all data has been fetched.

How does it work?

In order for data from a server load function to get to the browser, we have to serialize it. SvelteKit uses a library called devalue, which is like JSON.stringify but better — it can handle values that JSON can’t (like dates and regular expressions), it can serialize objects that contain themselves (or that exist multiple times in the data) without breaking identity, and it protects you against XSS vulnerabilities.

When we server-render a page, we tell devalue to serialize promises as function calls that create a deferred. This is a simplified version of the code SvelteKit adds to the page:

const const deferreds: Map<any, any>deferreds = new var Map: MapConstructor
new () => Map<any, any> (+3 overloads)Map();

module window
var window: Window & typeof globalThisMDN Reference
window.defer = (id) => {

	return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((fulfil: (value: any) => voidfulfil, reject: (reason?: any) => voidreject) => {
		const deferreds: Map<any, any>deferreds.Map<any, any>.set(key: any, value: any): Map<any, any>Adds a new element with a specified key and value to the Map. If an element with the same key already exists, the element will be updated.
set(id: anyid, { fulfil: (value: any) => voidfulfil, reject: (reason?: any) => voidreject });
	});
};

module window
var window: Window & typeof globalThisMDN Reference
window.resolve = (id, data, error) => {



	const const deferred: anydeferred = const deferreds: Map<any, any>deferreds.Map<any, any>.get(key: any): anyReturns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.
@returnsReturns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.get(id: anyid);
	const deferreds: Map<any, any>deferreds.Map<any, any>.delete(key: any): boolean@returnstrue if an element in the Map existed and has been removed, or false if the element does not exist.delete(id: anyid);

	if (error: anyerror) {
		const deferred: anydeferred.reject(error: anyerror);
	} else {
		const deferred: anydeferred.fulfil(data: anydata);
	}
};

// devalue converts your data into a JavaScript expression
const const data: {
    post: {
        title: string;
        content: string;
    };
    streamed: {
        comments: any;
    };
}data = {
	post: {
    title: string;
    content: string;
}post: {
		title: stringtitle: 'My cool blog post',
		content: stringcontent: '...'
	},
	streamed: {
    comments: any;
}streamed: {
		comments: anycomments: module window
var window: Window & typeof globalThisMDN Reference
window.defer(1)
	}
};

This code, along with the rest of the server-rendered HTML, is sent to the browser immediately, but the connection is kept open. Later, when the promise resolves, SvelteKit pushes an additional chunk of HTML to the browser:

<script>
	window.resolve(1, {
		data: [{ comment: 'First!' }]
	});
</script>

For client-side navigation, we use a slightly different mechanism. Data from the server is serialized as newline delimited JSON, and SvelteKit reconstructs the values — using a similar deferred mechanism — with devalue.parse:

// this is generated immediately — note the ["Promise",1]...
[{"post":1,"streamed":4},{"title":2,"content":3},"My cool blog post","...",{"comments":5},["Promise",6],1]

// ...then this chunk is sent to the browser once the promise resolves
[{"id":1,"data":2},1,[3],{"comment":4},"First!"]

Because promises are natively supported in this way, you can put them anywhere in the data returned from load (except at the top level, since we automatically await those for you), and they can resolve with any type of data that devalue supports — including more promises!

One caveat: this feature needs JavaScript. Because of this, we recommend that you only stream in non-essential data so that the core of the experience is available to all users.

For more on this feature, see the documentation. You can see a demo at sveltekit-on-the-edge.vercel.app (the location data is artificially delayed and streamed in) or deploy your own on Vercel, where streaming is supported in both Edge Functions and Serverless Functions.

We’re grateful for the inspiration from prior implementations of this idea including Qwik, Remix, Solid, Marko, React and many others.

Snapshots

Previously in a SvelteKit app, if you navigated away after starting to fill out a form, going back wouldn’t restore your form state – the form would be recreated with its default values. Depending on the context, this can be frustrating for users. Since SvelteKit 1.5, we have a built-in way to address this: snapshots.

Now, you can export a snapshot object from a +page.svelte or +layout.svelte. This object has two methods: capture and restore. The capture function defines what state you want to store when the user leaves the page. SvelteKit will then associate that state with the current history entry. If the user navigates back to the page, the restore function will be called with the state you previously had set.

For example, here is how you would capture and restore the value of a textarea:

<script lang="ts">
	import type { Snapshot } from './$types';

	let comment = '';

	export const snapshot: Snapshot = {
		capture: () => comment,
		restore: (value) => (comment = value)
	};
</script>

<form method="POST">
	<label for="comment">Comment</label>
	<textarea id="comment" bind:value={comment} />
	<button>Post comment</button>
</form>

While things like form input values and scroll positions are common examples, you can store any JSON-serializable data you like in a snapshot. The snapshot data is stored in sessionStorage, so it will persist even when the page is reloaded, or if the user navigates to a different site entirely. Because it’s in sessionStorage, you won’t be able to access it during server-side rendering.

For more, see the documentation.

Route-level deployment configuration

SvelteKit uses platform-specific adapters to transform your app code for deployment to production. Until now, you had to configure your deployment on an app-wide level. For instance, you could either deploy your app as an edge function or a serverless function, but not both. This made it impossible to take advantage of the edge for parts of your app – if any route needed Node APIs, then you couldn’t deploy any of it to the edge. The same is true for other aspects of deployment configuration, such as regions and allocated memory: you had to choose one value that applied to every route in your entire app.

Now, you can export a config object in your +server.js, +page(.server).js and +layout(.server).js files to control how those routes are deployed. Doing so in a +layout.js will apply the configuration to all child pages. The type of config is unique to each adapter, since it depends on the environment you’re deploying to.

import type { import ConfigConfig } from 'some-adapter';

export const const config: Configconfig: import ConfigConfig = {
	runtime: stringruntime: 'edge'
};

Configs are merged at the top level, so you can override values set in a layout for pages further down the tree. For more details, see the documentation.

If you deploy to Vercel, you can take advantage of this feature by installing the latest versions of SvelteKit and your adapter. This will require a major upgrade to your adapter version, since adapters supporting route-level config require SvelteKit 1.5 or later.

npm i @sveltejs/kit@latest
npm i @sveltejs/adapter-auto@latest # or @sveltejs/adapter-vercel@latest

For now, only the Vercel adapter implements route-specific config, but the building blocks are there to implement this for other platforms. If you’re an adapter author, see the changes in the PR to see what is required.

Incremental static regeneration on Vercel

Route-level config also unlocked another much-requested feature – you can now use incremental static regeneration (ISR) with SvelteKit apps deployed to Vercel. ISR provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.

To add ISR to a route, include the isr property in your config object:

export const const config: {
    isr: {};
}config = {
	isr: {}isr: {
		// see Vercel adapter docs for the required options
	}
};

And much more...

The OPTIONS method is now supported in +server.js files
Better error messages when you export something that belongs in a different file or forget to put a slot in your +layout.svelte.
You can now access public environment variables in app.html
A new text helper for creating responses
And a ton of bug fixes – see the changelog for the full release notes.

Thank you to everyone who has contributed and uses SvelteKit in their projects. We’ve said it before, but Svelte is a community project, and it wouldn’t be possible without your feedback and contributions.

What’s new in Svelte: February 2023

Dani Sandoval — Wed, 01 Feb 2023 00:00:00 GMT

Since last month, we’ve seen a couple of minor versions across Svelte and SvelteKit, a bunch of educational content to support the 1.0 release, as well as the State of JS survey results...

Svelte, once again, increased in satisfaction and interest, so thanks to everyone who voted!

Let’s dive into the updates...

What’s new in SvelteKit

Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited bug fixes to SvelteKit’s base path support landed, which means that you can now create SvelteKit projects on remote development environments. There have been several new releases with these fixes as well as a handful of new features such as:

The submitter’s value will now be included automatically when progressively enhancing
(1.0.3, #8273)
Added an error in dev mode if global fetch is used with relative URL (1.0.8, #8370)
A warning will now indicated that hydration may break if comments are removed from HTML (1.0.11, #8423)
A warning will occur when of page options are used in .svelte files or a missing <slot /> in layout is detected (1.1.0, #8475)
The new text(...) helper makes it easy to generate text responses (1.2.0, #8371)
The public env can now be accessed within app.html (1.2.0, Docs, #8449)
An error will now be thrown if cookie exceeds size limit (1.2.1, #8591)
The generated tsconfig can now be modified (1.3.0, #8606)

What’s new in Svelte and Language Tools

Added support for html.customData from the VS Code HTML language service (extensions-107.0.0, #1824)
Autocompletion for stores that need to be imported (#1823) and object/class member snippets (#1817) has been added to the Svelte extension (extensions-107.0.0)
Improve detection of promises that are also functions (Svelte 3.55.1, #8162)
Add missing types and properties for the global part attribute and on:submit, respectively (Svelte 3.55.1, #8181)
Lots of performance and bug fixes (Svelte 3.55.1* and extensions-107.0.x)

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

Community Showcase

Apps & Sites built with Svelte

Titowest.com is a series of photographic films by the writer & photographer, Tito West
Verve is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
Round The World is an interactive guide to the travels of Andrew Carnegie
Linear Regression is an interactive blog post visual introduction to (almost) everything you should know about linear regression
Flotes is a free note taking app enhanced with flashcard features
nomie is a Daily Journal for short attention spans
nocode.gallery is a collection of stunning websites made with no code
Whom to Follow helps you find accounts you’ll love by searching the network of accounts you already follow
poker-simulator is a poker simulation and evaluation tool
Pixelicious converts your images into pixel art
Apple Music is now built with Svelte (proof)

Learning Resources

Featuring Svelte Contributors and Ambassadors

SvelteKit | Rich Harris | ViteConf 2022
Talking Gradio and AI with pngwn 🐧 from Svelte Radio
Progressively enhancing the Marvel By Year filter and Advent of SvelteKit 2022: my favorite demos by Geoff Rich
EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪ by Dani Sandoval

To Watch or Hear

I built a $5 chat app with Pocketbase & Svelte. Will it scale? by Fireship
The Comprehensive Introduction To SvelteKit, What Svelte UI Library Should You Use? and Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes) by Joy of Code
Progressive Enhancement in SvelteKit (use:enhance), Are Your Routes Actually Protected? and 10X Your SvelteKit Developer Experience in VSCode by Huntabyte
The easiest realtime app I’ve ever built by Beyond Fireship
Angular developers can learn Svelte so fast... by Joshua Morony
SvelteKit + PocketBase Integration: User Login and Registration by Jian Yuan Lee
Marvels Of Using Svelte and SvelteKit - JSJ 566 with Tracey Lee and Adam L Barrett

To Read

A practical first look at the Svelte framework by Daniel Beer
State Modeling in Svelte with XState is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
🚀 Code your SvelteKit website faster with Stylify CSS by Stylify CSS
🎮 Five Svelte Games To Learn How To Code by Tom Smykowski
How to make declarative (code-based) router instead of file-based router in SvelteKit by Dev Punk
How to import tailwindcss custom config in JS/TS parts of a SvelteKit app by 0gust1
SvelteKit Internals: Load function and Svelte and CSS by Justin Ahinon
Internationalization Formatting with Intl + SSR + SvelteKit by Captain Codeman
Typesafe i18n with SvelteKit by Andreas Söderlund
Authorization in your SvelteKit app by Adam Barrett
Validate your form using Sveltekit, Tailwindcss, Felte and Yup by Hessel
SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array by Hekili Tech
Smooth Page Transitions with SvelteKit by Phil Kruft
Redis Integration in SvelteKit: A Game-Changer for Session Management by Shivam Meena
SvelteKit and GitHub Pages by Andrew Lester
Tailwind + Sveltekit in 2023 by Mitch Gent
Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg

Libraries, Tools & Components

Sveltepress is a simple, easy to use, content centered site build tool with the full power of SvelteKit
Svelte Form Helper is a lightweight helper for form validation with Svelte
Dapper UI is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
TeilUI is a better way to build design systems with Svelte
Neodrag is an SSR-friendly, multi-framework draggable library
Svelvet, a UI library for Svelte, is now 5.0 (read more here)
Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
html2svelte makes it easy to convert HTML to Svelte components in a snap

Thanks for reading! Feel free to let us know if we missed anything on Reddit or Discord

What’s new in Svelte: January 2023

Dani Sandoval — Sun, 01 Jan 2023 00:00:00 GMT

It’s been just two weeks since the release of SvelteKit 1.0! If you haven’t yet, check out the livestream, new website and tutorial to learn all the features of SvelteKit step-by-step.

Let’s dive into the details...

What’s new in SvelteKit

@sveltejs/kit 1.0 is out! All future releases will follow semver and changes will be listed as major/minor/patch in the CHANGELOG.
Improved support for Storybook and Histoire (#7990). Work is ongoing to fully support those tools (storybook#20239).
vitePreprocess is now the default preprocessor. Please see the docs for differences between vitePreprocess and svelte-preprocess (#8036).

Breaking changes:

Unknown exports (except when starting with an underscore) are no longer allowed from +(layout|page)(.server)?.js and +server.js files (#7878)
__data.json is now stripped from URL (#7979)
sveltekit() will now return a promise for an array of Vite plugins (#7994)
A new embedded option, turned off by default, helps with link clicks when embedding SvelteKit (docs, #7969)
Automatic fallback generation has been replaced with builder.generateFallback(fallback) (#8013)
invalid() is now fail() and ValidationError is now ActionFailure (#8012)
SvelteKit will now throw an error on invalid load response (#8003)
SvelteKit is now using Vite 4 and requires a Svelte peerDependency of ^3.54.0 (#7543)
Shells are now prerendered when ssr is false and prerender is not false - ensure prerender is false when ssr is also false (#8131)
Warnings and errors about removed/changed APIs have been removed (#8019)

What’s new in Svelte

The options.direction argument can now be passed to custom transition functions (3.54.0, #3918)
Variables can now be updated from a @const declared function (3.54.0, #7843)
svelte/elements has been added for Svelte/HTML type definitions (3.55.0, #7649)

What’s new in Language Tools

The Svelte extension and language tools now have a few new minimum version requirements:

Node version is now 16
TypeScript version is now 4.9
Svelte version is now 3.55

The following features have also been released:

missing handler quick fix (#1731)
add Svelte anchor missing attribute code action (#1730)
better commit characters handling (#1742)
add --preserveWatchOutput option (#1715)
enhance Quickfixes to include Svelte Stores (#1789)
only show SvelteKit files context menu in SvelteKit projects (#1771)
use the satisfies operator if possible (#1770)

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

Community Showcase

Apps & Sites built with Svelte

Svelte Recipes 🧑‍🍳 provides code snippets for common data visualization problems
Everything Svelte is a new course teaching everything you need to know to build a modern web application
CSS Timeline is a Timeline of the history and evolution of CSS
GitBar is a system tray app for showing your pull requested reviews
Texture Lab generates instant textures for games from any text
Totems is a studio creating custom-made stands and supports
PeopletoNotion is a Chrome Extension that adds LinkedIn profiles to Notion in one click
DeckDev is a deck builder for Magic: The Gathering
Default Shortcuts is a tool for searching keyboard shortcuts across browsers.

Learning Resources

From Svelte Society

Svelte Society - London December 2022 featuring two talks by Antony and Rich, respectively. Rich’s talk, “Mistakes were made” is a SvelteKit 1.0 retrospective.
SvelteKit with Netlify Edge Functions by Brittney Postma
Sirens Stream: Skeleton - A fully featured UI Toolkit with Chris Simmons and Brittney Postma
Sirens: SvelteKit for Enterprise - Lacey Pevey joins the Sirens to talk through using SvelteKit at the Enterprise level
Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev

To Watch

SvelteKit is my mistress by Fireship
Sveltekit 1.0 in under 3 minutes by Gui Bibeau
What Svelte UI Library Should You Use? and The Best Icon Library For Svelte (Iconify) by Joy of Code

To Read

Rendering emails with Svelte by Gautier Ben Aïm
Now That React is Dead, What’s the Next Big Thing? by Somnath Singh
What is SvelteKit? And Why Should You Care? by Tila
Sveltekit API endpoints by Jef Meijvis
Chart.js 4.0 has been released, with updated Svelte support
Creating A Custom Svelte Media Query Store by Rik Schennink

Libraries, Tools & Components

Konsta UI is a library of pixel perfect mobile UI components built with Tailwind CSS for React, Vue & Svelte
probablykasper/modal-svelte is a modal component for Svelte
deepcrayon/scrolltron is a news ticker overlay for OBS Studio
JetBrains WebStorm 2022.3 now has built-in support for Svelte
NextAuth.js is now available for SvelteKit
SvelteKit CAS authentication is a set of functions to ease usage of a CAS/SSO in SvelteKit
@macfja/sveltekit-session is an easy way to do session management for SvelteKit
@svelte-plugins/tooltips is a basic tooltip component written in Svelte
tRPC-SvelteKit provides end-to-end typesafe APIs for your SvelteKit applications
SvelteKit Tailwind Blog Starter is an easily configurable and customizable blog starter for SvelteKit + Tailwind CSS
Free Svelte Accelerators is a list of Svelte and Sveltekit open source code to jump start your project

Happy new year 🎆 Let us know if we missed anything on Reddit or Discord

Announcing SvelteKit 1.0

The Svelte team — Wed, 14 Dec 2022 00:00:00 GMT

After two years in development, SvelteKit has finally reached 1.0. As of today, it’s the recommended way to build Svelte apps of all shapes and sizes.

We’re so excited to share this release with you. It’s the culmination of thousands of hours of work, both from the Svelte core team and the wider community, and we think it’s the most enjoyable way to build production-grade websites, whether you’re a solo developer working on a small project or part of a large team.

To get started, run npm create svelte@latest, and visit the docs and (experimental!) interactive tutorial.

Svelte Radio Live: the Christmas special

What is SvelteKit?

SvelteKit is a framework for building web applications on top of Svelte, a UI component framework that developers love for its performance and ease of use.

If you’ve used component frameworks like Svelte, you’ll know that they make it much easier to build user interfaces than working with the DOM directly. But they leave a lot of questions unanswered:

How do I structure my source code?
How do I add server-side rendering?
How do I add routing that works on the server and in the browser?
How do I make client-side routing accessible?
How do I fetch data?
How do I mutate data?
How do I handle errors?
How do I optimise my production build?
How do I handle environment variables sensibly and securely?
How do I add CSP headers and CSRF protection?
How do I add a service worker that knows what to cache?
How do I prepare my application for deployment?

An application framework is designed to answer these questions. SvelteKit does so with a design informed by the real world needs of an army of beta testers (many of whom have been running SvelteKit in production for some time — we salute your courage and thank you for the invaluable feedback) and the best ideas from other application frameworks including Next.js and Remix.

How is it different?

Web developers today are spoiled for choice. Aside from the aforementioned frameworks, there are options like Astro, battle-tested server frameworks like Rails and Laravel, and a million static site generators. These are all wonderful tools, and you should feel good about choosing them.

SvelteKit does things a little differently, however:

Unlike traditional ‘multi-page app’ or MPA frameworks, it defaults to client-side navigation after the initial server-rendered page load. This enables faster page transitions, state that persists between pages (such as a sidebar’s scroll position), and less data usage. It also avoids re-running third party scripts like analytics on every single page load.

Unlike traditional server frameworks, it allows you to use one language, instead of effectively having two tightly-coupled apps (one to generate HTML, one to handle client-side interaction). Because SvelteKit runs wherever JavaScript runs, you can deploy your app as a traditional Node server, or using serverless functions — including at the edge.

Unlike static site generators, you can build apps with personalised or dynamic data — without the performance-killing, layout-shifting effects of fetching it from the browser after the page loads.

With SvelteKit, you have flexibility. Many frameworks assume there’s one correct way to build an app, but reality is more nuanced. It’s not true, for example, that prerendering static pages is just a poor man’s cache-control — it also lets you do build-time validation or render data from the filesystem that your edge functions can’t access, and acts as a hedge against flaky databases. It’s not true that everything needs server-side rendering — it’s the right default if you want robust, performant apps with good SEO, but there are countless exceptions.

In a SvelteKit app, you can make these choices with as much granularity as you need — for example the page you’re looking at is prerendered, but the REPL is rendered with dynamic data. Switching between the two is a single line of code. We call apps built with this approach ‘transitional apps’.

What can I use with SvelteKit?

Because SvelteKit uses Vite, the lightning-fast build tool, it has out-of-the-box support for hot module reloading, TypeScript, and many other things that developers rely on. You can install plugins from the vast Vite and Rollup ecosystems to add support for other tools.

When creating a SvelteKit project you’ll be asked if you want to add TypeScript, ESLint, Prettier, Playwright (for end-to-end browser tests) and Vitest (for unit tests). Integration guides already exist for many popular projects — Tailwind and Supabase, for example. You can use Storybook and Histoire for your component stories. The community-maintained svelte-add lets you add a growing list of other integrations with a single command.

And of course you have access to everything npm has to offer. (Note that some packages require Node.js, and so can only be used when deployed to Node-based platforms.)

Where can I deploy my apps?

Anywhere! The SvelteKit CLI needs Node.js installed locally, but the framework itself has no dependencies on any platform. This means you can deploy it wherever JavaScript runs.

This is made possible by adapters. The default adapter, adapter-auto, provides zero-config support for Vercel, Netlify, Cloudflare Pages and Azure Static Web Apps, with more platforms coming in the future. Community-provided adapters add support for Deno, Bun, Firebase, App Engine, AWS Lambda and many others.

You can also deploy your app as a Node.js server using adapter-node.

If your entire app is suitable for prerendering, or is a single-page app (SPA), you can use adapter-static — which turns SvelteKit into a static site generator — with any web server including GitHub Pages.

Acknowledgements

This release was made possible by the hard work of a great many people. First and foremost, we’d like to thank the Svelte community, whose insightful feedback and myriad contributions large and small have shaped this project into something we’re truly proud to share with the wider community of web developers.

We’re also indebted to Svelte Society and the community ambassadors, who, through initiatives like Svelte Summit and Svelte Sirens, have created a lively and welcoming space for Svelte developers, both online and IRL.

There are too many content creators to name without leaving people left out, but to everyone who has released courses and produced educational content around SvelteKit: thank you.

Back in early 2021, when we adopted Vite, we were the first major application framework to do so. At the time it was a risky bet, but we’re thrilled with how that bet paid off. Vite has grown to be an unstoppable force in the JavaScript world, and the Vite team have been brilliant and gracious partners.

We’ve had terrific support from teams at Vercel, Netlify and Cloudflare to make zero-config deployments for those platforms possible.

Our friends at StackBlitz worked feverishly to make learn.svelte.dev, our first-of-its-kind WebContainer-powered interactive tutorial, a reality.

Finally, none of this could have happened without the project’s financial supporters. This includes hundreds of backers on Open Collective, and Vercel, which employs two core developers (Rich and Simon) to work on Svelte full time and supports the project in many other ways, such as Steph’s Beginner SvelteKit course.

Migrating

If you have an app built with pre-release versions of SvelteKit, we recommend upgrading to the final pre-release version — @sveltejs/kit@1.0.0-next.588 — before upgrading to 1.0, as the stable release removes errors and warnings that were used for migrating between pre-release versions. We also recommend consulting this migration guide, especially if you’re currently on an older version than 1.0.0-next-406.

What’s next?

SvelteKit 1.0 is the beginning, not the end. It’s ready for production use today, but we’re just getting started. Our roadmap includes built-in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimisation, and many other improvements. Next year we’ll also start work on Svelte 4 — more on that later.

But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on BlueSky and YouTube to stay up to date, and join us in our Discord server and on GitHub to contribute back.

We can’t wait to see what you build.

What’s new in Svelte: December 2022

Dani Sandoval — Thu, 01 Dec 2022 00:00:00 GMT

SvelteKit 1.0 is just around the corner! With 99% of the milestone issues completed, there’s a lot of new changes from the last month to cover...

Let’s get to it!

What’s new in SvelteKit

Use the willUnload property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). (#6813)
__data.json requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios (#7532)
Linking to <a name="hash"> tags is now supported (#7596)
Throwing redirects in the handle hook is now supported (#7612)
A fallback component will now be added automatically for layouts without one (#7619)
The new preload function within the resolve hook determines what files should be added to the tag to preload it (Docs, #4963, #7704)
version is now available via $app/environment (#7689, #7694)
handleError can now return a promise (#7780)

Breaking changes:

routeId is now route.id (#7450)
‘load’ has been renamed to ‘enter’ and ‘unload’ to ‘leave’ in the beforeNavigate and afterNavigate methods. beforeNavigate is now called once with type ‘unload’ on external navigation and will no longer run during redirects (#7502, #7529, #7588)
The redirect helper will now only allow status codes between 300-308 for redirects and only error status codes between 400-599 are allowed (#7767) (#7615, #7767)
Special characters will now be encoded with hex/unicode escape sequences in route directory names (#7644)
devalue is now used to (de)serialize action data - this is only a breaking change for everyone who fetches the actions directly and doesn’t go through use:enhance (#7494)
trailingSlash is now a page option, rather than configuration (#7719)
The client-side router now ignores links outside %sveltekit.body% (#7766)
prerendering is now named building, and config.kit.prerender.enabled has been removed (#7762)
getStaticDirectory() has been removed from the builder API (#7809)
The format option has been removed from generateManifest(...) (#7820)
data-sveltekit-prefetch has been replaced with -preload-code and -preload-data, prefetch is now preloadData and prefetchRoutes is now preloadCode (#7776, #7776)
SubmitFunction has been moved from $app/forms into @sveltejs/kit (#7003)

New in Svelte

The css compiler options of css: false and css: true have been replaced with 'external' | 'injected' | 'none' settings to speed up compilation for ssr builds and improve clarity (3.53.0)

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

Community Showcase

Apps & Sites built with Svelte

Appwrite’s new console makes its secure backend server for web, mobile & Flutter developers available in the browser
RepoMagic is a search and analytics tool for GitHub
Podman Desktop is a graphical tool for developing on containers and Kubernetes
Ballerine is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
Budget Pen is a Codepen-like browser code editor with Tailwind included
doTogether helps you keep track of stuff you have get done via a List of recurring Tasks
Webscraped College Results is a collection of visualizations for data from r/collegeresults
Let’s premortem helps avoid lengthy, frustrating post-mortems after a project fails
BLKMARKET.COM is an illustration library for commercial and personal use
Sigil is a canvas for anything with spaces organized by the most-voted content
corpus-activity-streams is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
nodeMyAdmin is an alternative to phpMyAdmin written with SvelteKit
Image to Pattern Conversion is a cross-stitch pattern conversion tool with a list of pre-made patterns to start with
Verbums is an English vocabulary trainer to improve language comprehension
SVGPS removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
This 3D retro-themed asteroid shooter was made with threlte

Learning Resources

To Hear

Catching up after Svelte Summit and 3D, WebGL and AI by Svelte Radio

To Watch

Domenik Reitzner - The easy way, an introduction to Sveltekit from Svelte Society Vienna
Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
Introduction To 3D With Svelte (Threlte), How To Use Global Styles In SvelteKit and Progressive Form Enhancement With SvelteKit by Joy of Code

To Read

Building tic-tac-toe with Svelte by Geoff Rich
Speed up SvelteKit Pages With a Redis Cache by Captain Codeman
Understanding environment variables in SvelteKit, Form validation with SvelteKit and Zod and Build a SvelteKit application with Docker by Justin Ahinon
Why I failed to create the “Solid.js’s store” for Svelte, and announcing svelte-store-tree v0.3.1 by YAMAMOTO Yuji
Create an offline-first and installable PWA with SvelteKit and workbox-precaching by Antonio Sarcevic

Libraries, Tools & Components

Skeleton is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
svelte-svg-spinners is a collection of SVG Spinners components
Svelte Floating UI enables floating UIs with actions - no wrapper components or component bindings required
at-html lets you use {@html } tags with slots in Svelte apps
html-svelte-parser is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
svelte-switcher is a fully customisable, touch-friendly, accessible and tiny toggle component
sveltkit-hook-html-minifier is a hook that wrapps html-minifier
sveltekit-hook-redirect is a hook that makes redirects easy
sveltekit-video-meet is a video calling web app built with SvelteKit and SocketIO
svelte-colourpicker is a lightweight opinionated colour picker component for Svelte
Svelte-HeadlessUI is an unofficial implementation of Tailwind HeadlessUI for Svelte
svelte-lazyimage-cache is a Lazy Image component with IntersectionObserver and cache action
threlte v5.0 is a completely new developer experience that is faster, more powerful, and incredibly flexible

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

See ya next near 🎆

What’s new in Svelte: November 2022

Dani Sandoval — Tue, 01 Nov 2022 00:00:00 GMT

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

Starting With Svelte - Brittney Postma by fitcevents
Learn Svelte from scratch with Geoff Rich: A Svelte tutorial by Kelvin Omereshone
How To Connect to MongoDB in Svelte Kit by LevelUpTuts
SvelteKit Authentication Using Cookies, Make A Typing Game With Svelte and SvelteKit Tailwind CSS Setup With Automatic Class Sorting by Joy of Code
Authentication with SvelteKit & PocketBase and Form Actions in SvelteKit (+page) by Huntabyte
Sybil - Episode 1 - Rust knowledge management with SurrealDB by Raphael Darley

To Read

4 things I miss from Svelte after working in React and Create dynamic social card images with Svelte components by Geoff Rich
First-class Vite support in Storybook 7.0 (Svelte and SvelteKit included) by Ian VanSchooten
Better Svelte support is coming to WebStorm from JetBrains
Dark Mode Toggle by pyronaur
HeadlessUI Components with Svelte by Captain Codeman
Using Sequelize with SvelteKit by MetaZebre
Implementing Maintenance mode on a SvelteKit site by Andreas Söderlund
ActionStore: Real-time Svelte stores for Rails by Stefan Buhrmester
Svelte CSS Image Slider: with Bouncy Overscroll and SvelteKit Local Edge Functions: Edge on Localhost by Rodney Lab
Creating a Svelte Tabs component with Slot props by Shinichi Okada
Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout by Mike Bifulco for Stripe

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

SvelteKit Statiko is a multi-featured assistant for SvelteKit static projects
Svelte-TailwindCSS UI (STWUI) is a Tailwind-based UI that is currently in pre-release beta
KitBase is a starter template for SvelteKit and PocketBase
UnoCSS Vite Plugin (svelte-scoped) is a scoped-CSS utility for Vite/SvelteKit
SvelteKit Auth App is an example of how we can create an authentication system with SvelteKit using JsonWebToken and Prisma
SvelteKit Supabase Dashboard is a simple dashboard inspired by Supabase UI made with SvelteKit as frontend and Supabase as backend
Supakit is a Supabase auth helper for SvelteKit
@bun-community/sveltekit-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
hooks-as-store lets you use React custom hooks in Svelte Apps

Fun ones

svelte-typewriter-store is the simplest way to get a rotating typewriter effect in Svelte
Aksel is the seagull you needed on your site
Svelte-Dodge makes components dodge the pointer

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

See ya next month 👋

What’s new in Svelte: October 2022

Dani Sandoval — Sat, 01 Oct 2022 00:00:00 GMT

There’s a bunch of updates this month... from new features in Svelte and SvelteKit to a whole 2-day summit! Plus, the Svelte extension gets some helpful new tools, new accessibility (a11y) warnings, and Tan Li Hau teaches us how to build our own Svelte and a Svelte spreadsheet 😎

What happened at Svelte Summit?

A lot! Below you can find all the talks, by timestamp, from each livestream. Bite-size videos of the event will be coming soon to the Svelte Society channel, so be sure to Subscribe, if you haven’t already!

Day One

12:31 - How to get Svelte adopted at work
33:21 - Animating Data Visualization in Svelte
2:20:36 - Red flags & code smells
2:53:42 - Enhance your DX
4:42:41 - Svelte in UBS’ knowledge graph
5:06:42 - How to migrate react libraries to svelte
5:45:27 - DX magic in the world of Svelte
7:25:39 - Data visualizations powered by Svelte
7:59:38 - Partial Hydration in Svelte for Increased Performance
8:20:49 - Building the future, faster

Day Two

24:09 - Scrollytell me why: Ain’t nothing but a piece of cake
2:02:40 - I told you my dog wouldn’t run
2:29:43 - 10Xing Svelte
3:04:56 - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router
5:09:39 - Having fun with stores: an interactive demo of Svelte’s built in state management library
5:37:06 - When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded
7:22:05 - Getting started with Hooks
7:38:14 - Special Announcement*

*In the final talk of the summit, Rich Harris announces the first Release Candidate of SvelteKit! With no planned breaking changes left, the team is hard at work squashing bugs and adding the remaining features for 1.0...

More SvelteKit Updates

use:enhance is the easiest way to progressively enhance a form (Docs, #6633, #6828, #7012)
The demo app has been updated to add the Sverdle game, which Rich demoed at Svelte Summit and demonstrates use:enhance (#6979)
Cloudflare Pages _routes.json specification is now supported by adapter-cloudflare (#6530)
Improved build performance by running asset and page compression in parallel (#6710)

Breaking changes:

Node 16.14 is now the minimum version to run SvelteKit (#6388)
App.PrivateEnv and App.PublicEnv have been removed in favour of generated types (#6413)
%sveltekit.message% has been replaced with %sveltekit.error.message% (6659)
App.PageError is now App.Error - check for it in your hooks (Docs, #6963)
externalFetch is now handleFetch and will run for all fetch calls in load that run on the server (#6565)

For a full list of changes, check out SvelteKit’s CHANGELOG.

Svelte Updates

New a11y warnings for incorrect-aria-attribute-type, no-abstract-role, interactive-element-to-noninteractive-role and role-has-required-aria-props.no-noninteractive-tabindex and click-events-have-key-events coming soon! (3.50.0)
New types for ComponentEvents and SveltePreprocessor (3.50.0)
Improved parsing speed when encountering large blocks of whitespace (3.50.0)
All global JavaScript objects and functions are now recognized as known globals (3.50.1)

For all the changes to the Svelte compiler, including upcoming changes, check out the CHANGELOG.

New in Language Tools

Better code formatting for editor suggestion (106.0.0, #1598)
Easily create SvelteKit route files from the context menu or command palette (106.1.0, #1620)

Ask Questions in the Svelte Discord

In case you missed the announcement, the Svelte Discord has an exciting new update... a forum! The new questions channel utilizes Discord’s new forums feature to help the community better ask, find and answer questions!

It can be used for anything you may be trying to accomplish using Svelte including using SvelteKit, community libraries, tools, etc. So ask away!

Community Showcase

Apps & Sites built with Svelte

Timeflow is a smart calendar & task manager that dynamically schedules your tasks between your events
GeoQuest is an open source geography game
Houses Of is a project showcasing charismatic houses around the world
Greenfield Brewery is a tool for quickly installing a lot of homebrew casks
Gram Jam is a word puzzle game inspired by match three games and Scrabble
Beatbump is a privacy-respecting alternative frontend for YouTube Music
RoomOS Device Widgets is an app for demoing RoomOS device capabilities in Kiosk/PWA mode
World Seed is a full blown online multiplayer game
Lirify is a song lyrics writing web app tool made in Latvia
Splet Tech Konferencija is a tech conference in Serbia with a very fancy website
Unbounded is an open-source variable font - funded by blockchain (and an awesome-looking website)
Porter’s Paints is an eCommerce site for (you guessed it) paints built with Svelte
CRAN/E is a search engine for modern R-packages

Learning Resources

Starring the Svelte team

Upgrading SvelteKit by Svelte Sirens (with Brittney, Kev, and GHOST!)
Build your own Svelte by lihautan
Native Page Transitions in SvelteKit: Part 1 by Geoff Rich
Build a cross platform app with Tauri by GHOST

To Watch

How To Use Future CSS In Svelte and Master Animation With Svelte by Joy of Code
Svelte Kit Form Actions 101 - New Svelte Kit API and Svelte Kit Form Actions - Real World Examples - Q&A by LevelUpTuts

To Read

What’s new in svelte-kit, 1.0.0-next.445: (group) layout by Parables
Handling breaking changes in SvelteKit pre-1.0 by Thilo Maier
Svelte Custom Stores Demystified by Raqueebuddin Aziz
Sveltekit Changes: Advanced Layouts, Form Actions and Progressive Enhancement and Cookies and Authentication by Shivam Meena
How to add an Emoji Picker to Sveltekit by Xavier Coiffard
Get Started with SvelteKit Headless WordPress by Rodney Lab
Speed up SvelteKit Pages With a Redis Cache and How to await Firebase Auth with SvelteKit by Captain Codeman
Deploying SvelteKit with NodeJS to a Server Using GitLab and PM2 by A Byte of Coding
Quality of Life Tips when using SvelteKit in VS Code by doa-doa

Libraries, Tools & Components

Svelte Fit is an extremely simple, no dependency fit text library
svelte-switch-case is a switch case syntax for your Svelte components
svelte-canvas-confetti uses a single canvas to render full-screen confetti
@slidy/svelte is a simple, configurable & reusable carousel component built with Svelte - based on @slidy/core
svelte-currency-input is a form input that converts numbers to localized currency formats as you type
Adria is a super simple form validation library, with autocomplete and value/type checking
Canopy is a Svelte debugging app for the Chrome devtools panel
MenuFramework is a menu framework written for alt:V
whyframe gives iframes superpowers, making it easy to render anything in isolation
@svelte-put/modal is a solution to async, declarative, type-safe modals in Svelte
Kitty is a collection of libraries and handlers for developing secure frontend apps
svelte-turnstile is a component for Cloudflare Turnstile, the privacy focused CAPTCHA replacement

UI Kits and Starters

QWER is a blog starter built with SvelteKit
SvelteKit Zero API provides type-safety between the frontend and backend - creating a structure for easy APIs
sveltekit-monorepo is monorepo starter with 2022 tech
svelte-component-test-recipes uses vitest, @testing-library/svelte, and svelte-htm to test Svelte components that seemed to be hard to test

Whew! That’s a lot of updates. Let us know if we missed anything on Reddit or Discord!

See ya next month 👋

What’s new in Svelte: September 2022

Dani Sandoval — Thu, 01 Sep 2022 00:00:00 GMT

Still looking for something to do this month? It’s your last chance to get tickets to Svelte Summit, Stockholm! Join us on Sept 8-9th 🎉

With the redesign of SvelteKit’s filesystem-based router merging early last month, there’s lots to cover this month - from the migration script to a number of new blog posts, videos and tutorials.

But the new routing isn’t the only new feature in SvelteKit...

What’s new in SvelteKit

Link is now supported as an HTTP header and works out of the box with Cloudflare’s Automatic Early Hints (1.0.0-next.405, PR)
$env/static/* are now virtual to prevent writing sensitive values to disk (1.0.0-next.413, PR)
$app/stores can now be used from anywhere on the browser (1.0.0-next.428, PR)
config.kit.env.dir is a new config that sets the directory to search for .env files (1.0.0-next.430, PR)

Breaking changes:

The filesystem-based router and load API improves the way routes are managed. Before installing version @sveltejs/kit@1.0.0-next.406 or later, follow this migration guide (PR, Issue)
event.session has been removed from load along with the session store and getSession. Use event.locals instead (1.0.0-next.415, PR)
Named layouts have been removed in favor of (groups) (1.0.0-next.432, Docs, PR & Migration Instructions)
event.clientAddress is now event.getClientAddress() (1.0.0-next.438, PR)
$app/env has been renamed to $app/environment, to disambiguate with $env/... (1.0.0-next.445, PR)

For a full list of changes, check out kit’s CHANGELOG.

Updates to language tools

TypeScript doesn’t resolve imports to SvelteKit’s $types very well, the latest version of Svelte’s language tools makes it better (105.21.0, #1592)

Community Showcase

Apps & Sites built with Svelte

canno is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
straw.page is an extremely simple website builder that lets you create unique websites straight from your phone
Patra lets you share short notes just with a link. No database. No storage
promptoMANIA is an AI art community with an online prompt builder
Album by Mood lets you listen to music based on your mood
Daily Sumeiro is a daily game to test your math and logic skills
Lofi and Games - play relaxing, casual games right from your browser
Pitch Pipe is a digital pitch pipe with a frequency analyser and just-intonation intervals
classes.wtf is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
Scrumpack is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives

Learning Resources

Starring the Svelte team

Learning the new SvelteKit routing

Migrating Breaking Changes in SvelteKit by Brittney Postma (Netlify)
Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0 - Video by LevelUpTuts
SvelteKit Is Never Going To Be The Same - Video by Joy of Code
Let’s learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth (updated Aug 26th to keep up with the new changes)

To Watch

Svelte Guide For React Developers and Svelte State Management Guide by Joy of Code
What Is Bookit? The Svelte Kit Storybook Killer and What Is @type{import In Svelte Kit - JSDoc Syntax by LevelUpTuts
TWF Yet another JS Framework... or not? Svelte! by TWF meetup

To Read

Creating a Figma Plugin with Svelte by Lennart
Svelte Video Blog: Vlog with Mux from your own SvelteKit Site and Svelte Shy Header: Peekaboo Sticky Header with CSS by Rodney Lab

Libraries, Tools & Components

@svelte-plugins/tooltips is a simple tooltip action and component designed for Svelte
Lucia is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
remix-router-svelte is a Svelte implementation of the react-router-dom API (driven by @remix-run/router)
MKRT is a CLI to help you create SvelteKit routes, fast
Histoire is a tool to generate stories applications - scenarios where you showcase components for specific use cases
sveltekit-flash-message is a Sveltekit library that passes temporary data to the next request, usually from endpoints
svelte-particles is a lightweight TypeScript library for creating particles
svelte-claps adds clap button (like Medium) to any page for your SvelteKit apps
Neon Flicker is a Svelte component to make your text flicker in a cyberpunk style
ComboBox is a search input to help users select from a large list of items
@svelte-put is useful svelte stuff to put in your projects
vite-plugin-svelte-bridge lets you write Svelte components and use them from React & Vue

UI Kits and Starters

Svelte-spectre is a UI-kit based on spectre.css and powered by Svelte
Skeleton allows you to build fast and reactive web UI using the power of Svelte + Tailwind
iconsax-svelte brings the popular icon kit to Svelte
laravel-vite-svelte-spa-template is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
neutralino-svelte-boilerplate-js is a cross platform desktop template for Neutralino and Svelte
figma-plugin-svelte-vite is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
Urara is a sweet & powerful SvelteKit blog starter
SvelteKit Commerce is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel

Did we miss anything? Let us know on Reddit or Discord!

See ya next month!

What’s new in Svelte: August 2022

Dani Sandoval — Mon, 01 Aug 2022 00:00:00 GMT

There’s a lot to cover this month... big changes are coming to SvelteKit’s design before 1.0 can be completed. If you haven’t already, check out Rich’s Discussion, Fixing load, and tightening up SvelteKit’s design before 1.0 #5748.

Also, @dummdidumm (Simon H) has joined Vercel to work on Svelte full-time and @tcc-sejohnson has joined the group of SvelteKit maintainers! We’re super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!

Now onto the rest of the updates...

What’s new in SvelteKit

Dynamically imported styles are now included during SSR (#5138)
Improvements to routes and prop updates to prevent unnecessary rerendering (#5654, #5671)
Lots of improvements to error handling (#4665, #5622, #5619, #5616)
Custom Vite modes are now respected in SSR builds (#5602)
Custom Vite config locations are now supported (#5705)
Private environment variables (aka “secrets”) are now much more secure. Now if you accidentally import them to client-side code, you’ll see an error (#5663, Docs)
Vercel’s v3 build output API is now being used in adapter-vercel (#5514)
vite-plugin-svelte has reached 1.0 and now supports Vite 3. You’ll notice new default ports for dev (port 5173) and preview (port 4173) (#5005, vite-plugin-svelte CHANGELOG)

Breaking changes:

mode, prod and server are no longer available in $app/env (#5602)
svelte-kit CLI commands are now run using the vite command and vite.config.js is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook (#5332, Docs)
endpointExtensions is now moduleExtensions and can be used to filter param matchers (#5085, Docs)
Node 16.9 is now the minimum version for SvelteKit (#5395)
%-encoded filenames are now allowed. If you had a % in your route, you must now encode it with %25 (#5056)
Endpoint method names are now uppercased to match HTTP specifications (#5513, Docs)
writeStatic has been removed to align with Vite’s config (#5618)
transformPage is now transformPageChunk (#5657, Docs)
The prepare script is no longer needed in package.json (#5760)
adapter-node no longer does any compression while we wait for a bug fix in the compression library (#5560)

For a full list of changes, check out kit’s CHANGELOG.

What’s new in Svelte & Language Tools

The @layer CSS at-rule is now supported in Svelte components (3.49.0, PR)
The inert HTML attribute is now supported in Svelte’s language tools and plugins (105.20.0, PR)
The Svelte plugin will now use SvelteComponentTyped typings, if available (105.19.0, PR)

Community Showcase

Apps & Sites built with Svelte

PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte
Hondo is a word guessing game with multiple rounds
Hexapipes is a site for playing hexagonal pipes puzzle
Mail Must Move is an email made for those who want to get more done
Jot Down is a Visual Studio Code extension for quick and simple note taking
Kadium is an app for staying on top of YouTube channels’ uploads
Samen zjin we #1metS10 is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
On Writing Code is an interactive website to learn programming design patterns
Svelte-In-Motion lets you create Svelte-animated videos in your browser
Svelte Terminal is a terminal-like website
Bulletlist is a simple tool with a single purpose: making lists
Remind Me Again is an app for toggleable reminders on Mac, Linux and Windows
Heyweek is a timetracking app built for freelancers craving that extra pizzazz

Learning Resources

Starring the Svelte team

The Svelte Documentary is out! on Svelte Radio
Beginner SvelteKit by Vercel
Challenge: Explore Svelte by Building a Bubble Popping Game by Brittney Postma
Let’s write a Client-side Routing Library with Svelte by lihautan
Svelte Sirens July Talk - Testing in Svelte with Jess Sachs

To Watch

10 Awesome Svelte UI Component Libraries by LevelUpTuts
Learn How SvelteKit Works and SvelteKit Endpoints by Joy of Code
SvelteKit using TS, and Storybook setup by Jarrod Kane
Building Apps with Svelte! by Simon Grimm
SvelteKit authentication, the better way - Tutorial by Pilcrow

To Read

Some assorted Svelte demos by Geoff Rich
Three ways to bootstrap a Svelte project by Thilo Maier
Design & build an app with Svelte by Hugo
Define routes via JS in SvelteKit by Max Core
Integrating Telegram api with SvelteKit by Shivam Meena
SvelteKit SSG: how to Prerender your SvelteKit Site by Rodney Lab
ADEO Design System: Building a Web Component library with Svelte and Rollup by Mohamed Mokhtari
The Svelte Handbook by The Valley of Code
Test Svelte Component Using Vitest & Playwright by David Peng
Transitional Apps with Phoenix and Svelte by Nathan Cahill

Tech Demos

Bringing the best GraphQL experience to Svelte by The Guild
Style your Svelte website faster with Stylify CSS by Stylify
Revamped Auth Helpers for Supabase (with SvelteKit support) by Supabase

Libraries, Tools & Components

Lucia is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
Skeleton is a UI component library for use with Svelte + Tailwind
pass-composer helps you compose your postprocessing passes for threlte scenes
@crikey/stores-* is a collection of libraries to extend Svelte stores for common use-cases
Svelte Chrome Storage is a lightweight abstraction between Svelte stores and Chrome extension storage
Svelte Schema Form is a form generator for JSON schema
svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view
Snap Layout and universal-title-bar bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a .svelte module or as a web component
svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
json2dir converts JSON objects into directory trees
Svelte Command Palette is a drop-in command palette component
svelte-use-drop-outside is a Svelte action to drop an element outside an area
PowerTable is a JavaScript component that turns JSON data into an interactive HTML table
svelte-slides is a slide show template for Svelte using Reveal.js
Svelte Theme Light is a Visual Studio Code theme based on the Svelte REPL

Did we miss anything? Let us know on Reddit or Discord!

Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! Get your tickets now.

See ya next month!

What’s new in Svelte: July 2022

Dani Sandoval — Fri, 01 Jul 2022 00:00:00 GMT

From faster SSR to support for Vitest and Storybook in SvelteKit, there’s a lot to cover in this month’s newsletter...

So let’s dive in!

OpenCollective funding drives Svelte forward

Svelte supporters have donated approximately $80,000 to the project on OpenCollective. We’re happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. @gtm-nayan has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We’re happy that this funding has allowed Svelte to get much more of his time.

We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend Svelte Summit in person this fall. Thanks to everyone who has donated so far!

What’s new in Svelte & Language Tools

The tutorial is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! (PR)
“Find File References” (0.14.28) and “Find Component References” (0.14.29) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used (Demo)
The Svelte extension now supports CSS path completion (0.14.29)

What’s new in SvelteKit

Introduced @sveltejs/kit/experimental/vite which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook (#5094). Please leave feedback as to whether the feature works and is helpful as we consider taking it out of experimental and making vite.config.js required for all users
Streaming in endpoints is now supported (#3419). This was enabled by switching to the Undici fetch implementation (#5117)
Static assets can now be symlinked in development environments (#5089)
server and prod environment variables are now available as a corollary to browser and dev (#5251)

Community Showcase

Apps & Sites built with Svelte

Virtual Maker lets you make interactive 3D and VR scenes in your browser
Apple Beta Music appears to have been written in some combination of Svelte and web components
Itatiaia, the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
Pronauns helps you learn pronunciation online with IPA to speak better and sound more native
Immich is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
Pendek is a link shortener built with SvelteKit, Prisma and PlanetScale
Grunfy is a set of guitar tools - recently migrated to SvelteKit
Radiant: The Future of Radio is a personal radio station app built with Svelte and Capacitor
Imperfect Reminders is a todo list for things that are only sort of time sensitive
Periodic Table is a dynamic Periodic Table component written in Svelte
Svelvet is a lightweight Svelte component library for building interactive node-based diagrams
publint lints for packaging errors to ensure compatibility across environments
Playlistr helps manage and create Spotify playlists
Geoff Rich’s page transitions demo shows how SvelteKit’s beforeNavigate / afterNavigate hooks can make smooth document transitions in the latest Chrome Canary
Menger Sponge is a fractal built with Threlte

Want to contribute to a site using the latest SvelteKit features? Help build the Svelte Society site!

Learning Resources

Starring the Svelte team

Svelte Origins: A JavaScript Documentary by OfferZen Origins
Full Stack Documentation (announcing learn.svelte.dev) by Rich Harris @ JSNation 2022
All About the Sirens by Svelte Radio

To Watch

SvelteKit Page Endpoints, Named Layouts and Passing data from page component to layout component with $page.stuff by lihautan
🍞 & 🧈: Magically load data with SvelteKit Endpoints by Johnny Magrippis
Svelte for React developers by frontendtier
Learn Svelte JS || JavaScript Compiler for Building Front end Applications by Code with tsksharma
SvelteKit Authentication by Joy of Code
Svelte + websockets: Build a real-time Auction app by Evgeny Maksimov

To Read

Up-To-Date Analytics on a Static Website and Fast, Lightweight Fuzzy Search using Fuse.js by paullj
Use SvelteKit as a handler in the ExpressJs project by Tran Chien
Creating a desktop application with Tauri and SvelteKit by Stijn-B
List of awesome Svelte stores by samuba
SvelteKit Content Security Policy: CSP for XSS Protection by Rodney Lab
SvelteKit Hooks. Everything You Need To Know by Lucretius K. Biah
3 tips for upgrading the performance of your Svelte stores by Mathias Picker

Libraries, Tools & Components

Svend3r is a plug and play D3 charting library for Svelte
Svelte Hover Draw SVG is a lightweight Svelte component to draw SVG on hover
Svelte French Toast provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
SVooltip is a basic Svelte tooltip directive, powered by Floating UI
Svelte Brick Gallery is a masonry-like image gallery component for Svelte
use-vest is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
Svelidate is a simple and lightweight form validation library for Svelte with no dependencies
Svve11 is an “accessibility-first” component library for Svelte
Slidy is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
Svelte Component Snippets is a VS Code extension with access to common Svelte snippets
Svelte Confetti adds a little bit of flair to your app with some confetti 🎊

What did we miss? Let us know on Reddit or Discord to add your voice.

Don’t forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! Get your tickets now.

See y’all next month!

What’s new in Svelte: June 2022

Dani Sandoval — Wed, 01 Jun 2022 00:00:00 GMT

With last month’s Svelte Summit behind us, we’re ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to createEventDispatcher, @const declarations and tons of progress toward SvelteKit 1.0.

Let’s dive in!

What’s new in Svelte

Custom events can now be cancelled in the createEventDispatcher function (3.48.0, Docs, PR)
The {@const} tag can now be used in {#if} blocks to conditionally define variables (3.48.0, Docs, PR)
Lots of bug fixes across <svelte:element>, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!

What’s new in SvelteKit

Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)
config.kit.alias lets you more easily declare a custom alias to replace values in import statements (Docs, PR)
Pages marked for prerendering will now fail during SSR at runtime (PR)

Breaking Changes

Node 14 is no longer supported (PR)
Requests to /favicon.ico will no longer be suppressed and will instead be handled as a valid route (PR)
AMP support has been moved to a separate @sveltejs/amp package (Docs, PR)
Generated types are now written to _types directories - update your imports accordingly (PR)
%svelte.head% and %svelte.body% are now %sveltekit.head% and %sveltekit.body% in app.html (PR)
LoadInput is now LoadEvent
Dropped support for Wrangler 1 in favor of Wrangler 2 (PR)

Community Showcase

Apps & Sites built with Svelte

Plantarium is a tool for the procedural generation of 3D plants.
SPATULA is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
Waaard lets you create and send protected links with a variety of SSO providers
Magidoc is a fast and highly customizable GraphQL documentation generator
myMarkmap is a custom editor for Markmap, built with SvelteKit
PassShare is a way for you to share your passwords to your friends, securely and effortlessly
DashingOS is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
worker-kit-email helps you develop transactional emails quickly using regular SvelteKit routes
kaios-weather-svelte is a very familiar looking weather app for KaiOS
svelte-gantt is a lightweight and fast interactive gantt chart/resource booking component
Miru is a BitTorrent streaming software for cats

Looking for a great SvelteKit website to contribute to? Help build the Svelte Society site!

Learning Resources

To Read

Component party is a site that compares common patterns in different frameworks
Quick tip: style prop defaults by Geoff Rich
Working with reduced motion in Svelte by GHOST
Building a Musical Instrument with the Web Audio API by Tania Rascia
Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices and Svelte-Cubed: Loading Your glTF Models by Alex Warnes

To Watch

From Svelte Society:

The Svelte Summit Spring 2022 stream recording has been updated with chapter markers to make it easy to watch again and again
The full recording of Svelte London, April 2022 is up! Check out the amazing talks from across the Svelte London community
Persian Svelte Society is making Persian-language videos about Svelte
Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
- SvelteKit + Sanity.io: a match made in heaven on May 13
- Slicing up your Svelte Sites with Prismic on May 20
- Rendering your Svelte apps on Render on May 24
- The story behind the (unofficial) Svelte newsletter on May 27

Across the Web:

Building vite-plugin-svelte-inspector, What is Singleton? and What is Navigation? by lihautan
Auto Import Components In Svelte Kit - Weekly Svelte by LevelUpTuts
🧪 Test SvelteKit with TDD & VITEST 🧪 by Johnny Magrippis
Google Analytics With SvelteKit, Using WebSockets With SvelteKit, SvelteKit Authentication Using Cookies and Svelte Headless UI Component Library by Joy of Code
Named Layouts In Nested Routes in SvelteKit by The Svelte Junction
SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks and Svelte Capsize Styling: Typography Tooling by Rodney Lab

To Hear

Svelte Radio has been putting out weekly episodes:
Svelte and the Future of Frontend Development (feat. Rich Harris) from The New Stack

Libraries, Tools & Components

vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don’t leak into production
Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
Svelcro is a component performance tracker for Svelte applications
Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components

Special Feature: Svelte Stores

There were lots of Svelte stores released this month from a number of authors...

svelte-mutable-store is a Svelte store for mutable values with the immutable compiler option
svelte-damped-store is a derived writable store that can suspend updates while svelte-lens-store is a functional lens over Svelte stores
svelte-persistent-store is a writable svelte store that saves and loads data from Window.localStorage or Window.sessionStorage.

Did we miss anything? Join us on Reddit or Discord to add your voice.

Don’t forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! Get your tickets now.

See y’all next month!

What’s new in Svelte: May 2022

Dani Sandoval — Sun, 01 May 2022 00:00:00 GMT

With yesterday’s Svelte Summit behind us, we’ve got a lot of news to share! Check out all of the recordings on the Svelte Society YouTube Channel and the rest of this month’s updates below...

What’s new in Svelte

The <svelte:element> element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the docs or the tutorial for more info (3.47.0)!

Language Tools updates

svelte:element and sveltekit:reload are now supported
Invalid Svelte import paths will now be automatically detected - see PR for getting back the old behavior (#1448)
source.sortImports lets you sort imports without deleting unused imports (#1338)
Hovering over HTML attributes will now show HTML hover info instead of the TS hover info - resulting in much more useful information (#1447)
In VS Code, you can now wrap existing blocks of code in control flow tags using the Insert Snippet command (#1373)

What’s new in SvelteKit

Files and directories can now be named __tests__ and __test__ in the routes directory (#4438)
Netlify Edge Functions (#4657) and the Vercel build output API (#4663) are now supported
Custom load dependencies, array of strings representing URLs the page depends on, are now available when loading routes (Docs, #4536)

Breaking Changes

Validators are now called “matchers” (Docs, #4358)
__layout.reset has been replaced by named layouts - which have much configurability for shared layout elements (Docs, #4388)
Prerendering is now skipped for rel="external" links (#4545)
maxage is now cache in LoadOutput (#4690)

Community Showcase

Apps & Sites built with Svelte

polySpectra AR lets you prototype faster 3D Printing with seamless AR file handoffs (video demo)
Pixel Art Together is a free multiplayer pixel art editor powered by Liveblocks
Tooling Manager lets you compare your JavaScript tech stack against industry standard boilerplates
Easy Portfolio generates a portfolio based on your GitHub profile
FLOAT is an attendance tracking program for events
The Coin Perspective is a cryptocurrency price tracker and portfolio management tool
Locutionis is a small, online reference of figures of speech (en français)
ASM Editor is an all in one web editor for M68K and MIPS
Otium is a free and open source book manager and bookshelf organiser, that helps you managing your books and the ones you would like to read
Sinwaver is an SVG sine wave generator

Want to contribute to a modern SvelteKit website? Help build the Svelte Society site!

Learning Resources

To Read

4 tips for cleaner Svelte components by Geoff Rich
Building a Clubhouse clone with Svelte and 100ms By Seun Taiwo
SvelteKit uvu Testing: Fast Component Unit Tests by Rodney Lab
SvelteKit JWT authentication tutorial by pilcrowOnPaper
Converting a Rollup-based Svelte SPA to SvelteKit by Simon H
Add Commitint, Commitizen, Standard Version, and Husky to SvelteKit Project by David Peng

To Watch or Hear

Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC) by Svelte Society
Svelte Fundamentals - Intro to Svelte by Coding Cat
Svelte Components Using Custom Markdown Renderers - Weekly Svelte by LevelUpTuts
Implementing {@const} in if block by lihautan
Svelte and Contributing to Open-Source with Geoff Rich by 20minJS

Libraries, Tools & Components

KitDocs is a documentation integration for SvelteKit - like VitePress for Svelte.
Svelte Copy is a click/tap-to-copy library that makes it easy to copy to the clipboard
Svend3r provides beautiful visualizations that harness the power of D3 to bring your data to life while abstracting away its imperative-style code
Svelte Hamburgers is the easy to use Hamburger menu component for Svelte
Svelte Droplet is a file dropzone for Svelte
Svelte MP3 is a light blazingly fast yet simple minimalistic audio player for Svelte
SvelteUI is a component library for building fully functional & accessible web applications faster than ever
svelte-spotlight is a headless spotlight component to help you build your site’s global search box in minutes
svelte-pdf-simple is a simple svelte library for displaying PDFs and giving you all the control
persistent-svelte-store is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
svelte-exmarkdown is Svelte component to render markdown dynamically
Bookit is a storybook-like component rendering environment - finely tuned to work directly within your SvelteKit projects

Join us on Reddit or Discord to continue the conversation.

If you’d prefer to join us in person, Svelte Summit is finally transitioning properly into the real world. Come join us for two days of awesome Svelte content! Get your tickets now!

See y’all next month!

What’s new in Svelte: April 2022

Dani Sandoval — Fri, 01 Apr 2022 00:00:00 GMT

This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.

More on that, and what else is new in Svelte, as we dive in...

What’s new in SvelteKit

Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)
Explicit redirects can now be handled directly from endpoints (#4260)
svelte-kit sync (#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)

New Config Options

outDir fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)
endpointExtensions prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)
prerender.default lets you prerender every page without having to write export const prerender = true in every page file (Docs, #4192)

Breaking Changes

Fallthrough routes have been removed. For migration tips, check out the PR (#4330)
tabindex="-1" is only added to <body> during navigation (#4140 and #4184)
Adapters are now required to supply a getClientAddress function (#4289)
InputProps and OutputProps can now be typed separately in generated Load (#4305)
The \$ character is no longer allowed in dynamic parameters (#4334)
svelte-kit package has been marked as experimental so changes to it after Kit 1.0 will not be considered breaking (#4164)

New across the Svelte ecosystem

Svelte: Lots of new types for TypeScript and Svelte plugin users - including style: directives and Svelte Actions (3.46.4 and 3.46.5)
Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file (105.13.0)
Language Tools: Region folding is now supported in html with  /  (105.13.0)

Community Showcase

Apps & Sites built with Svelte

Launcher is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
Paaster is a secure by default end to end encrypted pastebin built with Svelte, Vite, TypeScript, Python, Starlette, rclone & Docker.
Simple AF Video Converter is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
Streamchaser seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
Svelte Color Picker is a simple color picker made with Svelte
ConcertMash is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you’re attending
Modulus is a Design+Code Think Tank conceived with the main mission to evolve design and technology
Multiply is an integrated PR and Social agency moving at the speed of culture
yia! is a Young Innovator Award competition in New Zealand
Write to Russia is a community email writing platform to communicate with public .ru email addresses
Markdown Playground is an online playground dedicated for your markdown experiments.
RatherMisty is a no frills weather app with weather data from Open-Meteo
Minecraft Profile Pic (MCPFP) is a site to generate Minecraft profile pictures with ease
WebGL Fluid Simulation is a configurable fluid simulation built with Svelte and WebGL
This @NobelPeaceOslo exhibition was built using printed graphics, projected motion graphics, particle animations and generative sound design

Itching to contribute to a modern SvelteKit website? Help build the Svelte Society site!

Learning Resources

To Attend

Svelte Summit: Spring will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on YouTube and Discord 🍾

To Read

Svelte(Kit) TypeScript Showcase + general TypeScript tips by Hofer Ivan
Local constants in Svelte with the @const tag by Geoff Rich
Design Patterns for Building Reusable Svelte Components by Eric Liu
Svelte is better than React by Hamilton Greene
Making Visualizations Literally with Svelte and D3 by Connor Rothschild
Coordinating Multiple Elements with Svelte Deferred Transitions by Daniel Imfeld
Animate on scroll with Svelte Inview - Little Bits by Maciek Grzybek
Lazy-Loading Firebase with SvelteKit and HeadlessUI Components with Svelte by Captain Codeman
SvelteKit Accessibility Testing: Automated CI A11y Tests by Rodney Lab
Getting Started with KitQL and GraphCMS by Scott Spence
React ⇆ Svelte Cheatsheet lists the similarities and differences between the two libraries - by Joshua Nussbaum

To Watch

Svelte Extravaganza | Async by pngwn
6 Svelte Packages You Should Know and Basic React To Svelte Conversion by LevelUpTuts
Page/Shadow Endpoint in SvelteKit by WebJeda
Custom Svelte Store: Higher Order Store by lihautan
SvelteKit For Beginners (Playlist) by Joy of Code - follow along with the blog guide
Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 by Johnny Magrippis
Firebase Authentication in SvelteKit! Full Stack App by Ryan Boddy

Libraries, Tools & Components

SvelTable is a feature rich, data table component built with Svelte
svelte-cyberComp is a powerful, lightweight component library written in Svelte and TypeScript
Flowbite Svelte is an unofficial Flowbite component library for Svelte
Svelte-Tide-Project is a starter template for Svelte frontend apps with Rust Tide backend server
Fetch Inject implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
svelte-utterances is a lightweight comments widget built on GitHub issues
Liquivelte allows you to create your Shopify theme with Svelte-like components
@storyblok/svelte is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
@svelte-on-solana/wallet-adapter is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
svelte-lookat creates a div which makes all its children follow the mouse cursor or the user’s face when using a mobile phone

Join us on Reddit or Discord to continue the conversation.

See y’all next month!

What’s new in Svelte: March 2022

Dani Sandoval — Tue, 01 Mar 2022 00:00:00 GMT

Just announced: Svelte Summit Spring will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is looking for speakers and sponsors... so it’s time to dust off those proposals!

Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the load function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.

More on that and other new features and fixes below!

What’s new in SvelteKit

The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at svelte.dev/docs/kit
Page endpoints significantly decrease the boilerplate needed when loading a page (Issue, PR, Docs)
Application versioning and update detection support lets you determine what to do when a route fails to load after an app update (Issue, PR, Docs)
A new option in npm init svelte@next will now set up Playwright automatically for testing (PR)

Breaking Changes

The target option is no longer available. Instead, the init script hydrates its parentNode (#3674)
App-level types now live in the App namespace which allows you to type global types like Stuff or Session (#3670)
JSONString is now JSONValue (#3683)
createIndexFiles has been removed — it is now controlled by the trailingSlash option (#3801)
SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom prerender.onError handler if you need to ignore them (#3826)

New in Language Tools

Accessing properties in markups has been improved in the Svelte language tools (105.12.0) - working around some known issues with autocomplete (#538 / #1302)

Community Showcase

Apps & Sites

SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
Supachat is a real-time chat app using Svelte and Supabase
Radicle is a peer-to-peer stack for building software together
The Making Known is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
Svelte Kanban is a simple Svelte Kanban made in pure CSS
fngrng is a typing trainer focussed on accuracy over speed
Generative grids is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
LifeHash is a method of hash visualization that creates beautiful, deterministic icons
TypedWebhook.tools is a webhook testing tool for checking payloads, with automatic type generation
Speedskating is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
Web tail is a web application to view lines from file on local system or on remote server

Want to work on a SvelteKit site with others? Contribute to the Svelte Society site!

Learning Resources

To Read

Svelte Components as Web Components by Matias Meno
Simple Svelte Routing with Reactive URLs by Bjorn Lu
Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting by Ryan Boddy
How This Blog Makes the Most of GitHub by paullj
FullStack JWT Auth: Introducing SvelteKit by John Idogun
Svelte-Cubed: Adding Motion to 3D Scenes by Alex Warnes
Creating a RSS feed with Sanity and Svelte Kit by GHOST
How to use Svelte’s style directive by Geoff Rich
SvelteKit and the “Client pattern” by Julian Laubstein

To Watch

~~Shadow~~ Page Endpoints In Svelte Kit - Weekly Svelte by LevelUpTuts
Testing For Beginners (Playlist) by Joy of Code
KitQL - The native SvelteKit library for GraphQL by Jean-Yves COUËT

Libraries, Tools & Components

gosvelte is a proof of concept to serve Svelte-generated pages on GoLang HTTP server with server data being sent as props to svelte components
svelte-ethers-store uses the ethers.js library as a collection of readable Svelte stores for Svelte, Sapper or SvelteKit
Fluid Grid is a CSS grid system for future web
stirstack is an opinionated framework that combines Svelte.js, TailwindCSS, InertiaJS and Ruby on Rails
OATHqr helps users create security credentials for use with 2FA/MFA and other OATH-enabled apps. Use it to generate scannable QR codes for one-time password authenticator apps such as Aegis or YubiKey
svelte-GridTiles is a drag and drop resizable tiles library built on a responsive grid
Miscellaneous Svelte Components is a collection of miscellaneous svelte components alex-knyaz often use in my projects
walk-and-graph-svelte-components is a CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka “imports”
Felte is a simple to use form library for Svelte
svelte-use-tooltip is a Svelte action to display a tooltip
persistent-svelte-store is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract

What’d we miss? Join us on Reddit or Discord to continue the conversation.

See y’all next month!

What’s new in Svelte: February 2022

Dani Sandoval — Tue, 01 Feb 2022 00:00:00 GMT

Happy February, everyone! Over the last month or so, we’ve seen Svelte and SvelteKit develop at rapid speed, new community rules across the Reddit, GitHub and Discord, and quite a few amazing apps, tutorials and libraries.

Let’s take a look...

Highlights from the Svelte changelog

3.45.0 brought a new a11y warning a11y-no-redundant-roles, destructuring and caching fixes
3.46.0 added the much requested {@const} tag and style: directive
Check out 3.46.1 - 3.46.3 for fixes to the {@const} tag and style: directive, along with a number of fixes to animations
AST output is now available in the Svelte REPL

What’s new in SvelteKit

inlineStyleThreshold allows you to specify where inline stylesheets are inserted into the page (Docs, #2620)
beforeNavigate / afterNavigate lifecycle functions lets you add functionality before or after a page navigation (Docs, #3293)
Platform context can now be passed from adapters (Docs, #3429)
Hooks now have an ssr parameter in resolve to make it easier to skip SSR, when needed (Docs, #2804)
$page.stuff provides a mechanism for pages to pass data ‘upward’ to layouts (Docs, #3252)
Fallthrough routes let you specify where to route when an route can’t be loaded (#3217)

New configs

Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets (Docs, #3499)
kit.routes config allows you to customise public/private modules during build (#3576)
prerender.createIndexFiles config lets you prerender index.html files as their subfolder’s name (#2632)
HTTP methods can now be overridden using kit.methodOverride (Docs, #2989)

Config changes

config.kit.hydrate and config.kit.router are now nested under config.kit.browser (3578)

Breaking change

use Request and Response objects in endpoints and hooks (#3384)

Community Showcase

Apps & Sites

timb(re) is a live music programming environment
Music for Programming is a series of mixes intended for listening while ${task} to focus the brain and inspire the mind
Team Tale allows two authors to write the same story in a tag-team sort of fashion
Puzzlez is an online place to play Sudoku and Wordle
Closed Caption Creator makes it easy to add subtitles to your video on Windows, Mac and Google Chrome
SC3Lab is a code generator for experimenting with svelte-cubed and three.js
Donkeytype is a minimalistic and lightweight typingtest inspired by Monkeytype.
Above is a visual routine timer built for the ADHD/autistic mind
base.report is a modern research platform for serious investors
String turns your Phone into a secure portable audio recorder, making it easy to capture and share personal notes, family moments, classroom lectures, and more
The Raytracer Challenge REPL provides a live editor interface to configure a raytraced scene and render it live in any modern browser
awesome-svelte-kit is a list of awesome examples of SvelteKit in the wild
Map Projection Explorer lets you explore different map projections and explains their differences
Rubiks is a Rubik’s Cube simulator
Pianisto is a working piano made with SVG, ToneJS and a lot of patience

Want to work on a SvelteKit site with others, try contributing to the Svelte Society site!

Learning and Listening

To Read

Accelerating Svelte’s Development by Ben McCann
Storybook for Vite
Let’s learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth
Building an iOS app with Svelte, Capacitor and Firebase by Harry Herskowitz
Mutating Query Params in SvelteKit Without Page Reloads or Navigations and Workaround for Bubbling Custom Events in Svelte by Mohamad Harith
How to build a full stack serverless application with Svelte and GraphQL by Shadid Haque
How to Deploy SvelteKit Apps to GitHub Pages
Creating a dApp with SvelteKit by Anthony Riley
Comparing Svelte Reactivity Options by Steve Lee

To Watch

Integrating Storybook with SvelteKit and Integrating FaunaDB with Svelte by the Svelte Sirens
SvelteKit Crash Course Tutorial by The Net Ninja
Svelte for Beginners by Joy of Code
SvelteKit For Beginners | Movie App Tutorial by Dev Ed
SvelteKit $app/stores by lihautan
Sveltekit - Get All Routes/Pages by WebJeda

To Listen To

New Year, New Svelte!? from Svelte Radio
So much Sveltey goodness (featuring Rich Harris) from JS Party
The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham) from Purrfect.dev

Libraries, Tools & Components

threlte is a three.js component library for Svelte
svelte-formify is a library to manage and validate forms that uses decorators to define validations
gQuery is a GraphQL Fetcher & Cache for Svelte Kit
Unlock-protocol is an integration to help login with MetaMask, Firebase, and paywall customers
AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS
Vitebook is a fast and lightweight alternative to Storybook that’s powered by Vite
SwyxKit is an opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
svelte-themes is an abstraction for themes in your SvelteKit app
svelte-transition is a Svelte component to make using CSS class based transitions easier - ideally suited for use with TailwindCSS
Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
svelte-inline-compile is a babel transform that allows for a much more pleasant experience when testing svelte components using Jest and @testing-library/svelte
@feltcoop/svelte-mutable-store is a Svelte store for mutable values with an immutable compiler option
headless-svelte-ui is a group of headless components that can be used in building Svelte Apps.

Did we miss something? Need help bringing your next idea to life in Svelte? Join us on Reddit or Discord.

See ya next month!

Accelerating Svelte’s Development

Ben McCann — Thu, 13 Jan 2022 00:00:00 GMT

Svelte is a frontend framework for building fast reactive web apps with less code. If you’re new here, check out the tutorial or examples to get a feel for it.

Svelte was launched 5 years ago and has come a long way in the time since. In 2021, as usage more than doubled, it was voted the most loved framework with the most satisfied developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.

To help developers build fully-featured applications with Svelte without worrying about the hard parts, we’ve been developing the SvelteKit application framework. We’re moving quickly towards a stable 1.0 release with the help of early adopters who have already downloaded SvelteKit almost one million times.

Scaling the team

Rich Harris, Svelte’s creator, has joined Vercel to work on Svelte full-time. We’re incredibly excited to have Rich’s level of involvement in Svelte increase even more and have him steward Svelte into the future.

Svelte has been made possible by the work of a large, dedicated community. Svelte has added numerous core maintainers over the course of the pandemic, including three this past week. In alphabetical order:

benmccann - primary maintainer of SvelteKit for much of 2021
bluwy - major contributor across SvelteKit, vite-plugin-svelte, and Vite
dominikg - creator of vite-plugin-svelte
dummdidumm - maintainer of language-tools, which includes the VS Code extension and svelte-check
ehrencrona - contributor to SvelteKit and uses Svelte at work
geoffrich - has driven efforts to improve the accessibility of the Svelte site and documentation
GrygrFlzr - holds a unique status as a maintainer of both SvelteKit and Vite
Halfnelson - creator of svelte-native
ignatiusmb - regular SvelteKit contributor especially to TypeScript support
jasonlyu123 - maintainer of language-tools, which includes the VS Code extension and svelte-check
kaisermann - creator of svelte-preprocess
RedHatter - creator of Svelte Devtools
rixo - creator of svelte-hmr

Svelte began accepting donations via OpenCollective last year and has now had over $60,000 donated to-date with Cohere giving $10,000 just today. We hope that these funds will allow existing maintainers to spend more time on Svelte or that the funds could otherwise support Svelte on a part-time or contract basis, which we will continue to investigate.

Partnerships

Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on Vercel Edge Functions. Netlify has made big contributions to the SvelteKit Netlify adapter and also updated their zip-it-and-ship-it tool to better support SvelteKit. The recent Cloudflare Pages launch featured SvelteKit as a day one partner via a new adapter written by Svelte maintainers pngwn and lukeed, the latter of whom joined Cloudflare in 2021. Begin created a SvelteKit adapter for Architect apps. And community members have contributed adapters for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.

We’ve also been working closely with the Vite team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.

A growing community

SvelteSociety just hosted the 4th Svelte Summit — read a summary here — and Kevin Åberg Kultalahti is going full-time to lead SvelteSociety. In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the Svelte Radio podcast, the SvelteSociety YouTube channel, and the Svelte subreddit. SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of sveltesociety.dev, which has been redesigned and rebuilt in SvelteKit. In October Brittney Postma, Willow aka GHOST, Steph Dietz, and Gen Ashley founded Svelte Sirens, a group for women & non-binary community members and their allies.

Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement. The initial ambassadors in alphabetical order are:

We’re also testing out GitHub discussions on SvelteKit and may bring this to other repos in the Svelte organization if feedback is positive.

Things to watch

SvelteKit is continuing to progress towards 1.0 and, in just the past week, we have added major features like improved client-only rendering, routing hooks, and the ability to pass data from child components to layouts (e.g. to support easier management of <meta> tags). We’re currently working on a number of other high priority items such as discussing API designs for features like streaming and file uploads and contributing to the upcoming Vite 2.8 release.

While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. Svelte 3.46.0 was one of our biggest releases in awhile with two major new features added: constants in markup and style directives.

Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the blog via RSS or check monthly to be the first to get them.

What’s new in Svelte: January 2022

Dani Sandoval — Sat, 01 Jan 2022 00:00:00 GMT

Happy new year, Svelte Community! Lots to share this month across Svelte, SvelteKit, Language Tools and the Showcase. Thanks to everyone who made 2021 a great year to use Svelte. Looking forward to the next one 🚀

What’s new in SvelteKit

@sveltejs/adapter-static for SvelteKit now has a precompress option to make brotli compression of assets and pages easier to do out of the box (#3079)
Concurrency mode in SvelteKit will now prerender pages in parallel (#3120). It is enabled by default in 1.0.0-next.205 and later
CSS is now automatically included before JS for improved page performance (d13efe)
A new config option adds the ability to disable service worker registration to do your own custom registration (#2988)
SSR route-splitting is here - breaking monolithic builds into smaller pieces for improved startup and routing performance (#2931)
request.origin/path/query is now request.url - simplifying the config and page load functions (#3126)
After the update to Vite 2.7, SvelteKit users are reporting significant performance improvements and loading third-parties libraries in SSR has also been greatly improved
SvelteKit server will now automatically restart when the config files is changed (vite-plugin-svelte#237)

Other new bits from svelte/*

Svelte 3.44.3 is out with a few bug fixes in the binding and loop code
Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript’s “go to” functionality (105.8.0 and later)
The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at svelte.dev/apps

Community Showcase

Apps & Sites

Discover Twitter Spaces is a tool that helps you find the Twitter Spaces
Modern Fluid Typography Editor helps create beautiful fluid typography using CSS clamp
Unnwhiteboard is a job board for companies (or teams) that don’t do “whiteboard” interviews
Secret Santa is a gift giving coordination app developed with easiness in mind
LogSnag notifies you of your projects’ events and provides you with a timeline to keep track of anything important that happens
Version 0.2 of Tangent, a Svelte-based note writing app, is now in beta
Intl Explorer is a tool for viewing output for all possible formatters for Intl

A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for svelte.dev. Thanks to all the contributors who made this possible!

If you’re looking for a fun SvelteKit project to work on, you can contribute to the Svelte Society site rewrite 💅

Learning and Listening

To Read

Mutating Query Params in SvelteKit Without Page Reloads or Navigations by Mohamad Harith
Svelte for Reactaholics : A guide for React developers by Puru Vijay
Svelte’s lifecycle methods can be used anywhere and The many meanings of $ in Svelte by Geoff Rich
Vercel and Svelte: A Perfect Match for Web Developers by Darryl K. Taft
User-defined TailwindCSS Color Scheme with Svelte Stores by jeremy zaborowski
Ionic 6 + Svelte 🚀 by Raymond Boswel
What happened in #Svelte language tools this year by Simon H

To Watch

The Future of Svelte (Interview with Rich Harris) by Lee Robinson, Director of Developer Relations at Vercel
Svelte is becoming the go-to framework for Obsidian plugin developers
Sveltekit WordPress Headless Blog by WebJeda
Getting started with SvelteKit by Lihau Tan
Deploy a full-stack SvelteKit app on Cloudflare Pages by 1nf

To Listen To

Libraries, Tools & Components

svelte-headlessui is an unofficial, complete Svelte port of the Headless UI component library
svelte-forms v2 has been released - the author is looking for feedback
Percival is a declarative data query and visualization language
Svelte FlatList is a mobile-friendly, simple, and customizable draggable menu
svelte-keyed is a writable derived store for objects and arrays
Svemix is Remix for Svelte - providing server scripts inside your Svelte components/routes, which will be transformed into endpoints

Want to add something to the showcase? Need help bringing your next idea to life in Svelte? Join us on Reddit or Discord.

See ya next month!

What’s new in Svelte: December 2021

Dani Sandoval — Wed, 01 Dec 2021 00:00:00 GMT

With SvelteKit getting more and more stable each day, there’s not much to cover in terms of code changes other than bug fixes... So, in this month’s newsletter, we’ll be covering Svelte Summit Fall 2021!

If you want to dive deep into the last month’s worth of bug fixes, check out the Svelte and SvelteKit changelogs, respectively.

What happened at Svelte Summit?

If you missed Svelte Summit, you can watch the entire live stream on YouTube and catch a recap in the #svelte-summit channel on Discord.

Here are the highlights:

Rich Harris took us through a tour of Svelte’s history and announced his move to Vercel - where he will be helping maintain Svelte full-time! (20:00)
Steph Dietz explained how Svelte’s simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate (29:00)
Kevin Bridges dove deep into Svelte’s reactivity logic by visualizing it through ReflectiveCounter and showing how to “fine tune” it, as needed. A full “syllabus” for the presentation is available on Kevin’s site. (42:55)
Mateo Morris launched Primo, an all-in-one SvelteKit CMS to help build and manage static sites (1:12:34)
Guillermo Rauch explained Vercel’s commitment to Svelte, what it means to have Rich on the team, and what’s coming next from the company... (1:21:54)
Geoff Rich introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on Geoff’s site. (1:32:30)
Dean Fogarty demoed a number of different use-cases for custom stores - transforming data to and from storage mechanisms within Svelte. Transcript and code is available on Dean’s GitHub. (1:43:06)
Kellen Mace shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience (1:49:30)
Ben Holmes explained the “islands” architecture and how 11ty + Slinkity can bring these islands to any HTML template (2:17:15)
Scott Tolinski shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and “found developer bliss” (3:16:35)
Svelte Sirens was announced as the new Svelte community for women, non-binary and allies. Their first event was on November 29th - all future events can be found on the Svelte Sirens website (3:50:45)
Rich Harris discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development (3:56:00)
Ken Kunz explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on Ken’s GitHub. (4:07:18)
Austin Crim connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn’t have to be a chore (4:21:50)
Jesse Skinner brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects (4:32:30)
Jim Fisk and Stephanie Luz introduced Plenti and its theming tools to make building new Svelte sites much faster (4:59:00)
Evyatar Alush helped us all make (and maintain) better forms using a powerful validation library called Vest (5:08:55)
Dominik G. presented a fresh take on icon libraries - one that reduces the bundle size of applications and opens up the entire iconify library for use in any Svelte app (5:30:04)

Thanks to Kevin and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, Kevin announced after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in this Svelte Society YouTube Playlist.

If you have feedback on the Svelte Summit, Kev is looking for feedback on the Svelte subreddit 👀

Community Showcase

Apps & Sites

pixeldrain is a free-to-use file sharing platform
LifeHash generates beautiful visual hashes from Blockchain Commons
simple-cloud-music is a lightweight third-party NetEase cloud music player for modern browsers (likely only works on Chrome)
palette.rocks is a color palette generator with contrast-checking built-in
Kadium is an app for staying on top of YouTube channel uploads
Multi-Monitor Calculator is a tool for planning your multi-monitor setup
Your Home is an interactive overview of Facebook’s privacy settings
Svelte Crush is a Candy Crush style match-3 game
100.000 Corona deaths in Germany is a visualization made for Spiegel Gesundheit

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.

Videos, Blogs and Podcasts

Libraries, Tools & Components

svelte-cubed is a Three.js component library for Svelte - created by Rich Harris for his presentation at Svelte Summit Fall 2021
svelte-fsm is a tiny, simple, expressive, pragmatic Finite State Machine (FSM) library, optimized for Svelte
bromb is a feedback widget for websites/web apps that is small and easy to integration/self-host
Spaper is a set of PaperCSS components for Svelte
svelte-intl-precompile is an i18n library for Svelte that analyzes and compiles your translations at build time
svelte-preprocess-svg automatically optimizes inline svg in Svelte components for better performance and reduced file size
svelte-subcomponent-preprocessor allows you to write more than one component within a svelte file
svelte-pdfjs is a crude implementation of a Svelte PDF viewer component
svelte-inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
sveltekit-adapter-wordpress-shortcode is an adapter for SvelteKit which turns your app into a wordpress shortcode
svelte-websocket-store is a Svelte store with a websocket backend
Svelte Auto Form is a fast and fun form library focused on ease of use, rather than flexibility.
set-focus is an Svelte action that will set focus on <a> or <button> elements as soon as they mount - useful for some experiences and testing

Got an idea for SvelteKit? Check out the new GitHub Discussions in the Svelte repo. You can also join us on Reddit or Discord.

See you next ~~month~~ year!

What’s new in Svelte: November 2021

Dani Sandoval — Mon, 01 Nov 2021 00:00:00 GMT

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

Have Single-Page Apps Ruined the Web? Rich Harris answers the controversial question at this year’s Jamstack Conf
Svelte vs SvelteKit - What’s The Difference? LevelUpTuts provides a quick guide to explaining the relationship between the two projects. You can check out the rest of Scott Tolinski’s guides to Svelte in his new series, “Weekly Svelte”
WebJeda’s SvelteKit Hooks series continues this month with Part 3 - Cookie Session Authentication
Writing Context Aware Styles in a Svelte App is a guide to writing self-contained components that are able to dynamically adapt to their parents
A Beginner’s Guide to SvelteKit takes a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users
Svelte vs React: Ending the Debate is a historical take on the age-old argument
Svelte Snacks | Custom Events for Modal Actions walks through a solid implementation of Svelte’s handy custom event system
What Svelte’s accessibility warnings won’t tell you explains how Svelte’s a11y warnings work and why you shouldn’t count on them to make your app accessible

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!

What’s new in Svelte: October 2021

Dani Sandoval — Fri, 01 Oct 2021 00:00:00 GMT

Hey y’all 👋 It’s been 1 year since “What’s new in Svelte” started being cross-posted to the Svelte blog. I wanted to take this moment at the top to thank all of you for reading and for all the contributors every month. From the maintainers to everyone who posts their work in the Discord and Reddit, it’s amazing to witness all the effort that goes into making the Svelte community great.

Keep up the good work, everyone! Now, let’s dive into this month’s news...

New around Svelte

New additions to Svelte’s export map now expose no-op versions of lifecycle functions for SSR (Svelte 3.43.0)
Custom components with a src attribute no longer break svelte-native builds (Svelte 3.42.4)
Svelte plugin users without the TypeScript plugin enabled will now be prompted to enable it. It enhances TypeScript and JavaScript files with additional intellisense to interact with Svelte files. Please leave feedback if you are using it (Svelte extensions 105.4.0)
Event modifiers have been added to intellisense as autocomplete and hover info (Svelte extensions 105.4.0)
TypeScript users no longer have to strictly separate type imports and value imports when using Svelte version 3.39 or higher and svelte-preprocess version 4.9.5 or higher. This means you can now write import { MyInterface, myValue } from './somewhere' instead of import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'. Huge thanks to community member @SomaticIT who mainly implemented this!

For a full list of features and bug fixes, check out the Svelte changelog.

SvelteKit Updates

Nearly 100 PRs committed again this past month, but there’s still lots to do and Svelte maintainers are looking for help getting SvelteKit to 1.0. Antony said it well in a recent comment on the issue:

If you think you are too n00b to contribute (you’re not), then add tests, or write tests for the feature you want to add, before you add it! Start small, and learn the codebase that way.

If you’d like to help, please consider working on any of the 1.0 milestone issues labeled with “help wanted”.

Notable SvelteKit improvements this month include...

Service workers are now allowed to access files using the $lib alias (#2326)
Svelte libraries should now work out-of-the-box without any Vite configuration (#2343)
Improvements to package exports field (#2345 and #2327)
[breaking] The prerender.pages config option has been renamed to prerender.entries (#2380)
A new generic argument has been added to allow typing Body from hooks (#2413)
The svelte field will be added to package.json when running the package command (#2431)
[breaking] The context parameter of the load function was renamed to stuff (#2439)
Added an entryPoint option for building a custom server with adapter-node (#2414)
vite-plugin-svelte improved support for useVitePreprocess, which uses Vite to automatically preprocess TypeScript, PostCSS, Scss, etc in Svelte components (#173)

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

Community Showcase

Apps & Sites

radiofrance just migrated their website to SvelteKit
FLAYKS is the portfolio site for Félix Péault made with SvelteKit, Sanity, and Anime.js
hirehive is a candidate and job tracking site
Microsocial is an experimental Peer-to-Peer Social Platform
Dylan Ipsum is a random text generator to replace lorem ipsum with Bob Dylan lyrics
Chip8 Svelte is a CHIP-8 emulator frontend, built on top of CHIP8 TypeScript

Podcasts Featuring Svelte

Syntax Podcast: From React to SvelteKit Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
Web Rush Podcast: Svelte Tools and Svelte Society Kevin Åberg Kultalahti talks about what Svelte Society is, what he’s excited about with Svelte, how important documentation is to any product, and much much more
Svelte: The Compiled Future of Front End details the history of component-based frontends and how a compiler changes everything
Svelte Radio: Contributing to Svelte with Martin ‘Grygrflzr’ Krisnanto Putra Grygrflzr shares his journey to becoming a maintainer and his views on React, Vite and a host of other things
Svelte Radio: Routify 3 with Jake and Willow the Svelte Radio crew sits down with the maintainers of Routify and discusses the just-released Routify 3
JS Party: 1Password mentioned on the latest episode of The Changelog’s JS Party that they use Svelte to power their in-page suggestions

Educational Content

How I built a blog with Svelte and SvelteKit is an introduction to Svelte, SvelteKit and Progressive Enhancement with code examples
I built a decentralized chat dapp is a tutorial on how to use popular web3 technologies like GUN to build a decentralized web app (dapp)
Writing a Svelte Store with TypeScript is a deep dive into writing Svelte stores with TypeScript
How Svelte scopes component styles explains scoping using classes and more complex CSS specifiers
SvelteKit Hooks shows how to use hooks.js in Sveltekit.. When you’re done, check out Part 2
An early look at SvelteKit is a post from Infoworld walking through the features and onboarding of SvelteKit

Libraries, Tools & Components

sveltekit-netlify-cms is a SvelteKit skeleton app configured for use with Netlify CMS
SvelteFireTS is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io
stores-x lets you use Svelte stores just like vueX
sveltekit-snippets is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
svelte-xactor is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
vite-plugin-pages-svelte is a vite plugin for automatic filesystem-based routing
sveltio is a Svelte wrapper for valtio - a proxy-state library
svelte-transition-classes is a custom Svelte transition for adding and swapping CSS classes
Svelte-Boring-Avatars is Svelte port of the popular Boring Avatars React project
Svelte DataTables brings DataTable, a popular JavaScript library allowing you to easily display your data in a user-friendly table, into your Svelte project.
focus-svelte is a focus trap for Svelte with zero dependencies
filedrop-svelte is a file dropzone action & component for Svelte

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

Before you go, answer the call for speakers!

Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk proposal before 30 October... all are welcome to present and attend.

More info on the sessionize site

Can’t wait for the summit? Join us on Reddit or Discord!

What’s new in Svelte: September 2021

Dani Sandoval — Wed, 01 Sep 2021 00:00:00 GMT

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) and BigInt (3.42.3) are now known globals
There 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 area
The new sequence helper lets you chain together multiple handle calls
A 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

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.

See you next month!

Want more updates? Join us on Reddit or Discord!

What’s new in Svelte: August 2021

Dani Sandoval — Sun, 01 Aug 2021 00:00:00 GMT

From The Changelog (JS Party Ep. 182) to Svelte Radio (Episodes 29 and 30), it seems that folks couldn’t help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.

New in Svelte

July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:

The |trusted event modifier allows you to check if an event is trusted before it’s called (#6137)
The new svelte/ssr package to support work on improving SvelteKit SSR (#6416)
A new errorMode compiler option to support improved preprocessing of TypeScript files (#6194)
You can now specify a ShadowRoot as the target when creating a component - making it possible to render Svelte components inside the shadow DOM (#5869)
The export { ... } from (#2214), export let { ... } = (#5612) and {#await ... then/catch} (#6270) syntaxes are all now supported in Svelte components

For a full list of features and bug fixes, check out the Svelte changelog.

SvelteKit Updates

prerender.force is now prerender.onError which lets you fine-tune which errors fail the build and which do not (#2007)
esbuild’s configuration is now exposed for use with SvelteKit adapters (#1914)
Error messages are friendlier now for common config errors (#1910) and compiler errors (#1827)
Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it (#1847)
index.js exports will now be changed to directory exports when packaging - making for nicer imports (#1905)
Vite.js’s mode is now exposed from $app/env (#1789)
Better types across the board (#1778, #1791, #1646)

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

Features & bug fixes from around svelte/*

Language Tools now better support the “Workplace Trust” functionality (used in VS Code)
In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output
Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a base tag (changelog)

Community Showcase

Apps & Sites

Parsnip is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the conversation on Reddit for all the geeky details.
Central Bank Digital Currency (CBDC) tracker is a site that keeps track of how countries around the world are adopting digital currencies.
Svelte Commerce is an advanced frontend platform for eCommerce based on Sveltekit.
neovimcraft is a SvelteKit site dedicated to neovim plugins

Educational Content

How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare.
How to Create a Blog with SvelteKit and Strapi is a step-by-step tutorial by Aarnav Pai from Strapi
Sveltekit Markdown Blog is a YouTube tutorial series by WebJeda.
Using Custom Elements in Svelte is a deep dive into custom elements by Geoff Rich.
learn / graphql / svelte is a free 2-hour GraphQL course from Hasura.
How to add Magic Link to a SvelteKit application is a guide to the popular password-less login pattern.

Libraries, Tools & Components

Svelte-Capacitor just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
svelte-remixicon is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
SveltePress is a documentation tool built on top of SvelteKit.
Svelte Starter Kit is a boilerplate to quickly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
Kahi UI is a Svelte-first UI kit with Dark Mode built-in.
typesafe-i18n is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

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

See you next month!

Want more updates? Join us on Reddit or Discord!

What’s new in Svelte: July 2021

Dani Sandoval — Thu, 01 Jul 2021 00:00:00 GMT

As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let’s take a peek 👀

New in SvelteKit

adapter-node now precompresses assets using gzip & brotli (#1693)
Support for TypeScript transpilation has been added to the svelte-kit package tooling (#1633)
Improved caching defaults in adapter-node (#1416)
Allow configuring Rollup output options (#1572)
Fixed usage of SSL with HMR (#1517)

Features & bug fixes from around svelte/*

Svelte 3.38.3 (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, this preservation in bubbled events, and more!
The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a .d.ts output target in svelte2tsx which can be used to create type definitions from Svelte files.
Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at the RFC for more details and leave feedback in this issue if you are using it.
svelte-scroller got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its index more conservatively

Coming soon to Svelte

Constants in markup (RFC): Adds a new {@const ...} tag that defines a local constant (PR)

Community Showcase

Apps & Sites

SvelteThemes is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc.
Beatbump is an alternative frontend for YouTube Music created using Svelte/SvelteKit.
Sveltuir is an app help you memorize the guitar fretboard

Educational Content

Svelte Radio: A Jolly Good Svelte Summer is a conversation about what’s new in Svelte and a celebration of Svelte Radio’s 1-year anniversary
Class properties in Svelte is a refresher on the power of class for developers switching over to Svelte from React
Sveltekit Tutorial for Beginners is a video playlist for learning SvelteKit by WebJeda
How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit walks through the power of service workers when used within SvelteKit for on-demand caching
Vue vs Svelte: Comparing Framework Internals dives deep into the differences between Vue and Svelte from the inside out
Setting up a development environment for SvelteKit with Docker and Docker Compose walks through how to use Docker to create reusable development environments, no matter what kind of device you run your code on
Scalable Scripts released three videos this month documenting how to deploy dockerized Svelte Apps to AWS, Azure and Google Cloud
Render Katex with Svelte from zero to hero demonstrates how to implement Katex in a Svelte project
Using Custom Elements in Svelte shows some of the quirks to look out for when using custom elements in a Svelte site

Libraries, Tools & Components

svelte-pipeline provides custom JavaScript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.
Sveltotron is an Electron-based app made to inspect your Svelte app
svelte-qr-reader-writer is a Svelte component that helps read and write data from QR codes
svelte-stack-router Aims to make Svelte apps feel more native by routing with Stacks
svelte-typed-context provides an interface which, when provided to getContext or setContext, allows for stricter types
svelte-modals is a simple, flexible, zero-dependency modal manager for Svelte

Want to contribute a component? Interested in helping make Svelte’s presence on the web better? Submit a Component to the Svelte Society site by making a PR to this file or check out the list of open issues if you’d like to contribute to the Svelte Society rewrite in SvelteKit.

See you next month!

Want more updates? Join us on Reddit or Discord!

What’s new in Svelte: June 2021

Dani Sandoval — Tue, 01 Jun 2021 00:00:00 GMT

This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let’s jump into the updates...

New in SvelteKit

svelte.config.js config files are now loaded in ESM format (.js instead of .cjs).
AMP pages will now use the rendered CSS, rather than emitted CSS
svelte-check has been added to the TypeScript template (sveltejs/kit#1556)
Support for https keypair sveltejs/kit#1456
Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your package.json if it’s there
Etags for binary responses sveltejs/kit#1382
Renamed $layout to __layout and $error to __error
Removed getContext in favor of request.locals
Renamed .svelte output directory to .svelte-kit. Update your .gitignore accordingly
trailingSlash: 'never' | 'always' | 'ignore' is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for index.html pages, and provides an escape hatch for anyone that needs more complex behaviour.

Notable bug fixes in SvelteKit

adapter-netlify got a fix sveltejs/kit#1467 and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have <a> elements on the page with the same origin but don’t share a base path with the app.
Hash only changes are now handled by the router fixing the browser’s “back” navigation between hash changes in some circumstances.

New in Svelte & Language Tools

Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you’re seeing this in your project, be sure to update the latest version!
A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through this setting. We encourage you to test it out and provide feedback
In the latest version of svelte-check you can now provide the path to your tsconfig.json or jsconfig.json. Example: svelte-check --tsconfig "./tsconfig.json". This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like tsc --noEmit) for non-Svelte files (svelte-check version 1.6.0)
The VS Code extension and svelte-check got a new major release. Previously, properties that had no initializer (export let foo;) were only required if the user was using both TypeScript and activated strict mode. This is changed now: People using TypeScript, and those using checkJs also in JavaScript files, will now always have these properties marked as required (svelte-check version 2.0.0, extension version 105.0.0)

Community Showcase

Apps & Sites

vidu is a minimal web analytics collector and dashboard
River Runner is a virtual way to follow rivers downstream - built with Mapbox and Svelte.
JSDoc Type Generator generates JSDoc types for valid JSON.
pagereview.io is a website feedback tool that lets you leave comments directly on the site being reviewed.
gamesroom.io is an online board game platform with video chat built-in.
Greedy Goblin is a recipe app for old-school Runescape players.
hashbrown.geopjr.dev is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app (link to source).

Libraries, Tools & Components

svelte-image-crop is a simple click’n'drag image cropping library using Web APIs.
svelte-datepicker is a lightweight and inclusive date picker build with Svelte.
svelte-regex-router is a simple, lightweight library for you to easily handle routes in your Svelte application.
Svelte Micro is a light & reactive one-component router for Svelte.
svelte-entity-store is to provide a simple, generic solution for storing collections of entity objects.
svelte-animation-store is a store that is based on Svelte’s tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.

Want to contribute a component? Submit your own component to the list of packages on the Svelte Society site.

See you next month!

Did we miss something? Join us on Svelte Society, Reddit and Discord!

What’s new in Svelte: May 2021

Dani Sandoval — Sat, 01 May 2021 00:00:00 GMT

Last week, Svelte Summit blew us away with a mountain of content! Check out the full recording or an audio-only (p)review on Svelte Radio. Now let’s get into this month’s news...

New features in the Svelte Compiler

:global() is now supported as part of compound CSS selectors (3.38.0, Example)
CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)

New in SvelteKit

kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@next
You can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)
Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)
Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)
Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)
fetch in SvelteKit code will now use the environment-provided implementation, whenever possible. If fetch is unavailable, it will be polyfilled by adapters (PR, Docs)

New in Svelte & Language Tools

svelte-preprocess now supports the “extends” field of the tsconfig.json (4.7.2)
HTML style attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions
The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined

Community Showcase

Apps & Sites

gitpod.io recently rewrote its site with SvelteKit
highlight eel is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
The Far Star Mission is an interactive audiobook companion to the album, The Far Star by Apotheus
JavaScript quiz is a small quiz application that saves your answers locally
ExtensionPay lets developers accept secure payments in browser extensions with no backend server code.
mk48.io is a naval warship game made with SvelteKit
Frog Safety is a guide for African Dwarf Frogs and the API freshwater master kit
Stardew Valley Character Preview loads your character’s attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.

Demos, Libraries, Tools & Components

svelte-parallax is a spring-based parallax component for Svelte
@svelte-plugins/viewable is a simple rule-based approach to tracking element viewability.
Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
EZGesture makes it easy to add gestures functionality with simple native DOM events

Want to contribute your own component? Submit your own component to the list of packages on the Svelte Society site.

Starters

How to use Vercel Analytics with SvelteKit teaches how to track Web Vitals across your users’ devices
Asp.NETCore + Svelte + Vite connects the three frameworks with SpaCliMiddleware (VS2019)
Add CoffeeScript to Svelte is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
Adds Supabase to Svelte is an experimental command to run to add Supabase to your SvelteKit project
svelte-babylon lets you use BabylonJS like A-Frame through reactive Svelte Components

Looking for a starter or integration? Check out svelte-adders and a number of other template examples at the community site sveltesociety.dev

Learning Resources

Amazing macOS Dock animation in Svelte demonstrates how nice Svelte and popmotion look together
Solving the Tower of Hanoi with recursive Svelte templates incorporates the <svelte:self> element into a common computer science problem
DIY SvelteKit CDK adapter puts together SvelteKit and AWS CDK
Fireship’s Svelte in 100 Seconds is a quick and easy introduction to Svelte’s core concepts
Tech Downtime has been diving into SvelteKit in this playlist - from getting up and running to debugging.
lihautan’s latest video updates in the Svelte 101 and Svelte Store playlists cover slots, stores and context - and when to use which
DavidParkerW has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like displaying a blog post list from an API

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!

What’s new in Svelte: April 2021

Dani Sandoval — Thu, 01 Apr 2021 00:00:00 GMT

Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!

What’s up with SvelteKit?

SvelteKit - Svelte’s versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the latest blog post. Want to know when 1.0 is close? Check out the milestone on github.

Want to learn more about how to get started, what’s different compared to Sapper, new features and migration paths? Check out this week’s episode of Svelte Radio for a deep dive with Antony, Kev and Swyx.

New in Svelte & Language Tools

Slotted components, including <svelte:fragment slot="..."> lets component consumers target specific slots with rich content (Svelte 3.35.0, Language Tools 104.5.0)
Linked editing now works for HTML in Svelte files (Language Tools, 104.6.0)
Type definitions svelte.d.ts are now resolved in order, allowing library authors to ship type definitions with their svelte components (Language Tools, 104.7.0)
vite-plugin-svelte is available for general use of Svelte in Vite. npm init @vitejs/app includes Svelte options using this plugin.

Community Showcase

Apps & Sites

Nagato is a task management tool that connects popular time tracking and to-do tools all in one place.
type-kana is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
Pittsburgh Steps is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
Music Mode Wheels is a website that displays music modes as interactive wheels.
Critical Notes helps game masters and players keep track of their roleplaying games campaigns and adventures.
Svelte Game of Life is an educational implementation of Conway’s Game of Life in TypeScript + Svelte
foxql is a peer to peer full text search engine that runs on your browser.

Demos, Libraries, Tools & Components

svelte-nodegui is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
Svelte Story Format allows you to write your “stories” in Storybook using the Svelte syntax. More info in the Storybook blog
SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
Svelte Checklist is a customizable CheckList built with Svelte.
Suspense for Svelte is a Svelte component that implements the core idea of React’s <Suspense>.
MiniRx is a RxJS Redux Store that works with Svelte and TypeScript
svelte-formly generates dynamic forms for Svelte and Sapper
7ty is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.

Want to contribute your own component? Submit your own component to the list of packages on the Svelte Society site.

Starters

sveltekit-electron is a starter kit for Electron using SvelteKit
sveltekit-tailwindcss-external-api is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
Sapper Netlify is a Sapper project that can run on a Netlify function.

Looking for a particular starter? Check out svelte-adders and a number of other template examples at the community site sveltesociety.dev

Learning Resources

How to Build a Website with Svelte and SvelteKit is a step-by-step tutorial walking through the new SvelteKit setup.
A Svelte store for prefers-reduced-motion demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility.
TypeScript support in Svelte is an MDN guide to using TypeScript in Svelte.
How to merge cells with svelte-window is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see from react-window 1:1 to svelte-window.
Easy-to-Embed Svelte Components explains how to use Rollup and a script tag to embed Svelte components anywhere.
Convert Svelte project from Rollup to Snowpack walks through a common migration pattern on video.
How to internationalize routing in Svelte & Sapper explains how leaf.cloud translated their site to Dutch.
Svelte Store: Reactive context using Svelte Store is a video answer to the question, “How do we make [a] context value reactive?”
Creating Social Sharing Images with Cloudinary and Svelte is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website.

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!

SvelteKit is in public beta

Rich Harris — Tue, 23 Mar 2021 00:00:00 GMT

It’s time. After five months and hundreds of commits, you’re finally invited to try out the SvelteKit beta. It’s not finished — there are a few known bugs and several missing features — but we’re really happy with how it’s shaping up and can’t wait for you to try it.

Starting a new project is easy:

# create the project
mkdir my-app
cd my-app
npm init svelte@next

# install dependencies
npm install

# start dev server and open a browser tab
npm run dev -- --open

You’ll find documentation at svelte.dev/docs/kit. If you have a Sapper app that you’d like to migrate to SvelteKit, you’ll find instructions at svelte.dev/docs/kit/migrating.

The source code is available at github.com/sveltejs/kit. Issues and pull requests are disabled while we finish getting our house in order, but we’ll be making it fully open in the near future.

Wait, what is SvelteKit?

Think of it as Next for Svelte. It’s a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.

If you’re familiar with Sapper, SvelteKit is Sapper’s successor.

From Snowpack to Vite

One thing that might seem surprising after the announcement video, in which I waxed lyrical about Snowpack, is that SvelteKit uses Vite under the hood. When we tried Snowpack back when we started thinking about what form SvelteKit should take, it was love at first sight.

Snowpack created an entirely new category of dev tooling. Rather than bundling your app in development, as we’ve been doing with webpack and Rollup for the last several years, Snowpack is an unbundled dev server that uses the browser’s native import and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else.

Vite falls into the same category as Snowpack. While Vite 1 wasn’t suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by Evan You) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit’s requirements and would give us the best chance to deliver the framework of our imaginations.

We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It’s a wonderful tool, and you should absolutely try it out.

Dogfooding as extreme sport

SvelteKit is very much in beta, but that doesn’t mean it hasn’t been used in production.

My day job is at the New York Times, where I’ve spent much of the last twelve months working on our coronavirus tracker. It uses a customised version of the workflow that powers the majority of graphics at the Times, which isn’t designed for large multi-page projects. When we decided late last year to create pages for each of the ~3,000 counties in the US, we quickly realised we would need to completely rearchitect the project.

Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I’m talking about.) Today it powers our county risk pages and we’re in the process of migrating existing pages to the SvelteKit app.

Using unfinished software to build an app that will be seen by millions of people is a risk, and in general I don’t recommend it. But it has enabled us to develop the app much faster, and has made the framework itself much stronger than it otherwise would be.

The road to 1.0

You can see the list of outstanding issues with the 1.0 milestone on our issue tracker. Alongside that work, we plan to upgrade the documentation and add more adapters.

Most importantly though, we need your feedback to help us make the best possible app framework. Try it out, and let us know which pieces are missing.

Many thanks to everyone who has tried SvelteKit out despite the ‘here be dragons’ warnings and lack of documentation; your back-channel feedback has been invaluable. In particular, I want to acknowledge the work of GrygrFlzr, who maintained unofficial docs and a fork that added Windows support when we lacked it; and dominikg whose work on Svite laid essential groundwork for SvelteKit’s Vite integration. Both have now been welcomed onto the team.

What’s new in Svelte: March 2021

Dani Sandoval — Mon, 01 Mar 2021 00:00:00 GMT

Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an Open Call for Speakers. The deadline is March 14 so if you have an idea for a talk, submit it now!

Let’s dive into the news 🐬

What’s new in sveltejs/svelte

SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (3.31.2, see custom stores and Server-side component API )
Multiple instances of the same action are now allowed on an element (3.32.0, example)
The new foreign namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (3.32.0, more info)
Support for inline comment sourcemaps in code from preprocessors (3.32.0)
Destructured defaults are now allowed to refer to other variables (3.33.0, example)
Custom elements will now call onMount functions when connecting and clean up when disconnecting (3.33.0, checkout this PR for an interesting conversation on how folks are using Svelte with Web Components)
A cssHash option has been added to the compiler options to control the classname used for CSS scoping (3.34.0, docs)
Continued improvement to TypeScript definitions

For a complete list of changes, including bug fixes and links to PRs, check out the CHANGELOG

New from sveltejs/language-tools

For language server clients that don’t support didChangeWatchedFiles, a fallback file watcher will be used instead
New highlighting rules for store accessors and element directives (like bind: and class:)
HTML tags can now be renamed together
Mustache tags parsing is now more robust and will provide better intellisense in more situations

Haven’t tried the language-tools yet? Check out Svelte Extension for VSCode or find a plugin for your favorite IDE!

Other changes from sveltejs/*

eslint-plugin-svelte3 now supports TypeScript as of 3.1.0
prettier-plugin-svelte released a number of minor versions to address whitespace and comment trimming issues.
svelte-preprocess bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of postcss-load-config
sapper’s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names.

Community Showcase

Apps & Sites

Tracking the Coronavirus from NYTimes is an example of SvelteKit in production
Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.
Track the Parcel is a one-stop tool for tracking parcel status with all major package shippers.
Memo is a replacement for email that uses Svelte for modern messaging
Userscripts Safari is an open-source userscript editor for Safari... a native Svelte app for Mac OS!
SVGX is “the desktop SVG asset manager designers and developers wished they had.”
Armoria is a procedural heraldry generator and editor
FictionBoard is a virtual table top (VTT) platform that just released fillable and responsive character sheets
Castles & Crusades Treasure Generator is a treasure generator for the table top RPG: Castles and Crusades.
NESBit Studio is a toolkit to help the development of homebrew NES games
ElectroBlocks is an online Arduino IDE with a built-in simulator (Chrome Only)
Goblin.life is a 3D world builder whose UI is built with Svelte
farmbox is a UAE-based grocery delivery services
heroeswearmasks.fun is a client-side machine learning tool that determines whether or not you’re wearing a mask.
weatherify is a very pretty (and open source) weather app
DSN Live lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time.

Demos, Libraries, Tools & Components

spc is a special characters picker component for the web
svelte-injector lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS.
Felte is a form library for Svelte with simple validation reporting.
svelte-use-form is form library that “is easy to use and has 0 boilerplate.”
Formula provides “Zero Configuration Reactive Forms for Svelte.”
Houdini is “the disappearing GraphQL client built for Sapper and Sveltekit.”
svelte-split-pane is a draggable split pane component
svelte-virtualized-auto-sizer is a high-order component that automatically adjusts the width and height of a single child.
svelte-window are components for efficiently rendering large, scrollable lists and tabular data.
Svelte Persistent store is a Svelte store that keep its value through pages and reloads
Svelte Dark is a VSCode theme inspired by the svelte.dev REPL
Import Cost has been updated to support Svelte libraries and help developers keep their bundle size under control.
Tree-sitter-svelte provides tree-sitter grammar for svelte
Svelte Ripple is a Material Design ripple effect that doesn’t depend on @material/ripple (made by @karakara in the Svelte Discord)
Analog SVG Clock is a great example of easing functions (made by @tonmcg in the Svelte Discord)
Console Log Styler lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
svelte-heroicons is a handy wrapper for the Heroicons icon library
supabase-ui-svelte are UI components for Supabase authentication

Have your own Svelte Component to share? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources & Starters

The unofficial SvelteKit docs were built using SvelteKit and are open for contributions
📦 Svelte Store course by lihautan covers the basics of Svelte Stores and best practices.
Svelte Events by WebJeda explains how directives like on: can be used to listen to DOM events.
How to Set Up Protected Routes in Your Svelte Application describes how to authenticate your users to access your routes
Using Fauna’s streaming feature to build a chat with Svelte demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
Using TakeShape with Sapper demonstrates how to connect the TakeShape CMS with Sapper
YastPack is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
S2T2 is a Snowpack + Svelte + TailwindCSS + TypeScript template
tonyketcham/sapper-tailwind2-template is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!

What’s new in Svelte: February 2021

Dani Sandoval — Mon, 01 Feb 2021 00:00:00 GMT

With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in svelte-loader, prettier-plugin-svelte, rollup-plugin-svelte, and language-tools to steady progress in Sapper and svelte-preprocess. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.

New compiler features

Aria roles from the WAI-ARIA Graphics Module are now recognized as valid aria roles in Svelte components (3.31.1)
Compiler warnings for the common React attributes, className and htmlFor, now make it easier to port React components to Svelte (3.31.1)

Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the “triage: good first issue” tag for Svelte

New bits in language-tools

User disabled auto import suggestions no longer show in VS Code (103.0.0)
Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (104.0.0)
Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (104.0.0)
“Extract Component” has been added to the context menu - allowing you to extract components out of files without having to open the command window to type “Svelte: Extract Component” (104.0.0)
The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (104.1.0)

For the complete list of changes, check out the language-tools Releases page.

A great way to try the language tools is to download the Svelte Extension for VSCode. This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor’s extension sources to see if there’s a Svelte plugin for your IDE or build your own (see coc-svelte for example)!

Big improvements across the Svelte ecosystem

svelte-loader released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new compilerOptions to match rollup-plugin-svelte. Breaking changes include dropping Svelte 2 and Node 8 support. More info in the changelog
rollup-plugin-svelte is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent compilerOptions. Be sure to checkout the changelog for breaking changes when upgrading
svelte-preprocess iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. More info in the changelog
Sapper got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don’t support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found in the changelog
prettier-plugin-svelte version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for svelteBracketNewLine and options-scripts-markup-styles should now match how the majority of users like to order the code blocks. Additionally, Prettier’s htmlWhitespaceSensitivity setting is now supported. More info in the changelog

New changes to the Svelte Society website include a new cheat sheet for easy access to useful code patterns and some smaller visual fixes across the site. Want to help make the Svelte Society website ready for prime time? Checkout the GitHub repo to get started!

Community Showcase

Apps & Sites

The official German vaccination dashboard tracks the current COVID vaccine rollout and features some well-done dataviz.
La neuva era de la educatión conectada is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape
sho.rest is a self-hostable url shortener
night.fm is a cyberpunk-themed radio station

Demos, Libraries & Components

Svelte Reactive Debugger is a way to monitor Svelte reactive statements in Firefox devtools
svelte-actions is a set of prototype Svelte actions for inclusion into official actions in future. See RFC and Discuss High Level Policy.
This css grid gallery made by @joja (in the Svelte Discord) features grid transitions based on a user’s mouse position
Patchcab is a modular Eurorack style synthesizer made with Web Audio.
svelte-knob is a knob control to help with speedometer-style visualization
descent-ripple is a highly customizable javascript ripple animation for buttons
makeItSnow is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component (Demo)
svelte-video-player is a customizable VideoPlayer component
svelte-readonly is a very small store that exposes only a readable interface.

New Integrations & Starters

svelte-derver-starter is a starter for creating full-stack applications with the client based on Svelte and the server powered by Derver.
eleventy-plugin-embed-svelte makes it easy to embed Svelte components into an 11ty site.
svelte-tailwind-extension-boilerplate is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system.
snowpack-ui lets you run & manage Snowpack projects from the browser instead of the terminal
Svelte for Appwrite explains how to integrate with Appwrite, a self-hosted Firebase alternative GitHub Repo
here-maps-svelte makes it easy to include HERE maps in a Svelte app
p5-svelte is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
svelte-windicss-preprocess is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
MitzaCoder/svelte-boilerplate features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.

Want to share your Svelte Component with the world? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources

lihautan’s Svelte Actions Playlist teaches how actions work and how they can help solve common problems when developing Svelte applications
One-click Portfolio/Personal blog generator from dev.to API walks through creating a Sapper site that also fetches your articles from DEV.to using the API
How to Code a VSCode Extension features Svelte as a way to render a custom UI within VSCode
This YouTube series on Plenti walks through the new static site generator in detail

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!

What’s new in Svelte: January 2021

Dani Sandoval — Fri, 01 Jan 2021 00:00:00 GMT

Happy new year from Svelte! In the last month we made progress on Sapper’s upcoming release, fine-tuned our SvelteComponent typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.

What’s changed in Svelte?

A new minor release replaces the SvelteComponent class with a SvelteComponentTyped class. This renaming should help with backwards compatibility. We’ve updated last month’s blog post to avoid any confusion with the name change.

If you’re using SvelteComponent or the new SvelteComponentTyped in your project or library, let us know what you’re using it for and we’ll add it to the showcase!

What’s going on in Sapper?

More quality of life features are landing in the upcoming release every day. 0.29.0 will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.

If you’re upgrading from 0.28.x, check out the migration guide for steps on updating to Sapper 0.29.

Is SvelteKit ready yet?

To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it’s ready for a larger group of users and contributors.

In the meantime, you can explore the current build by running npm init svelte@next from your command line.

As cautioned in What’s the deal with SvelteKit?, there are no docs or support available yet... So use at your own risk / for your own enjoyment!

Community Showcase

Apps & Sites

manitu.me is a background sound / pomodoro timer for focus and relaxation
Answer Socrates helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard
multris is a multiplayer Tetris game. You can read about its development here
weather-ab compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
Game Nibs is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
Ora is an open source website tracking and limiting tool for Chrome and Firefox
vscode-dms is a group direct messaging chat app for VSCode
Zero.2 is a math-based challenge game where you try to get to zero as quickly as possible
Octave Compass is a chord table and scale explorer for many popular musical scales
Infinite Walking Bass Generator 2 is an online music player that generates a unique walking bass line
ListenAddict is a site that notifies you whenever a person has a new talk/interview on podcast

Demos, Libraries & Components

svelte-tiny-virtual-list speeds up long lists by only rendering visible items
svelte-query is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data
svelte-previous is a svelte store to remember previous values - helpful for transitions or a quick undo stack
Let’s Build a Confetti Cannon explains how to build a particle system and integrate a Canvas based animation into a larger application
svelte-micro is a one-component router
svelte-standalone-router is a standalone router with an API based on standalone-router
svelte-datepicker is a datepicker component with variations for time selection, date ranges and responsive themes
svelte-slimscroll is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
Svelte Zoomable is a custom transition with a nice zoom effect

Have a component you’d like to share? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources

Using Svelte to create a scroll video effect showcases how the bind command can be used to create a cool scroll video effect with very little code
How to make a flappybird game in svelte and typescript is a video tutorial including docs and code for reference
Accessible Svelte Transition walks through prefers-reduced-motion to make svelte transitions more accessible
Svelte’s module scripts explained is a great introduction to the module context, a common Sapper pattern
Awesome Svelte is a curated list of Svelte resources
.NET Core and Svelte explains how to get Svelte up and running with .NET Core
A la découverte de Svelte JS is a svelte tutorial series in French!
Svelte for React Developers explains Svelte’s core concepts to folks who are used to React
Building a Svelte Static Website with Smooth Page Transitions shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP.
Using Apollo Client in Sapper explains the “simplest” solutions to integrate the Apollo query client into Sapper
Reactive web apps with Crystal + Svelte explores how to build full-stack, server-rendered Svelte apps with a Crystal backend

Snowpack’s v3 release candidate is out now in preparation for a January 6 release date. Check out the Getting Started with Svelte for more info on how to use Snowpack.
Uppy, the open source file uploader, announced Svelte support in its new version 1.24

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!

What’s new in Svelte: December 2020

Dani Sandoval — Tue, 01 Dec 2020 00:00:00 GMT

It’s the last “What’s new in Svelte” of the year and there’s lots to celebrate! This month’s coverage includes updates from rollup-plugin-svelte, Sapper and SvelteKit and a bunch of showcases from the Svelte community!

New features & impactful bug fixes

$$props, $$restProps, and $$slots are all now supported in custom web components (3.29.5, Example) and slot components now support spread props: <slot {...foo} /> (3.30.0)
A new hasContext lifecycle function makes it easy to check whether a key has been set in the context of a parent component (3.30.0 & 3.30.1, Docs)
There is now a new SvelteComponentTyped class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC)
Transitions within {:else} blocks should now complete successfully (3.29.5, Example)
Svelte now includes an export map, which explicitly states which files can be imported from its npm package (3.29.5 with some fixes in 3.29.6, 3.29.7 and 3.30.0)
rollup-plugin-svelte had a new 7.0.0 release. The biggest change is that the css option was removed. Users who were using that option should add another plugin like rollup-plugin-css-only as demonstrated in the template

What’s going on in Sapper?

Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in client.js files. (Unreleased)

What’s the deal with SvelteKit?

We’re glad you asked! If you didn’t catch Rich’s blog post from early last month, you can find it here!

For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.

Community Showcase

Apps & Sites

narration.studio (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration.
Vippet is a video recording and editing tool for the browser.
Pattern Monster is a simple online pattern generator to create repeatable SVG patterns.
Plant-based diets is a website from the World Wildlife Foundation (WWF) built with Svelte.
johnells.se is a Swedish fashion e-commerce site, built with Crown - a Svelte-powered framework.
sentence-length is a learning and analysis tool to show how some authors play with different lengths, while others stick with one.
svelte-presenter lets you quickly make good looking presentations using Svelte and mdsvex.

Demos

u/loopcake got SSR working in Java Spring Boot for all the Java shops out there looking to render Svelte server-side.
svelte-liquid-swipe shows off a fancy interaction pattern using svg paths.
Crossfade Link Animation demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
Clip-Path Transitions showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)

Learning Resources

lihautan has been making easy-to-follow videos to share his in-depth knowledge of Svelte.
Lessons From Building a Static Site Generator shares the backstory and thinking behind Elder.js - and the design decision made along the way.
Svelte Tutorial and Projects Course is a udemy course by John Smilga where students learn Svelte.js by building interesting projects.
Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS explains how to make a distributed pastebin-like application.

Components, Libraries & Tools

svelte-crossword is a customizable crossword puzzle component for Svelte.
svelte-cloudinary makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
Svelte Nova extends the new Nova editor to support Svelte
saos is a small svelte component to animate your elements on scroll.
Svelte-nStore is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
svelte-slimscroll is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar.
svelte-typewriter is a simple and reusable typewriter effect for your Svelte applications
svelte-store-router is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state.
Routify just released version 2 of its Svelte router.
svelte-error-boundary provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets.
svelte2dts generates d.ts files from svelte files, creating truly shareable and well typed components.

See you next month!

Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We’re always looking for maintainers, contributors and fanatics... Check out the Svelte Society, Reddit and Discord to get involved!

That’s all for the year, folks! See you in January 😎

What’s the deal with SvelteKit?

Rich Harris — Thu, 05 Nov 2020 00:00:00 GMT

If you attended Svelte Summit last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?

The answer: never.

This was slightly tongue-in-cheek — as the talk explains, it’s really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it’s time we offered a bit more clarity on what you can expect from Sapper’s successor, SvelteKit.

'Futuristic Web Development' from Svelte Summit

What’s Sapper?

Sapper is an app framework (or ‘metaframework’) built on top of Svelte (which is a component framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses filesystem-based routing (as popularised by Next and adopted by many other frameworks, albeit with some enhancements) — your project’s file structure mirrors the structure of the app itself.

While the Svelte homepage and documentation encourages you to degit the sveltejs/template repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper.

Why are we migrating to something new?

Firstly, the distinction between sveltejs/template and sveltejs/sapper-template is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities are.)

Aside from all that, we’ve been tempted by the thought of rewriting Sapper for a while. This is partly because the codebase has become a little unkempt over the years (Sapper started in 2017), but mostly because the web has changed a lot recently, and it’s time to rethink some of our foundational assumptions.

How is this new thing different?

The first of those foundational assumptions is that you need to use a module bundler like webpack or Rollup to build apps. These tools trace the dependency graph of your application, analysing and transforming code along the way (turning Svelte components to JS modules, for example), in order to create bundles of code that can run anywhere. As the original creator of Rollup, I can attest that it is a surprisingly complex problem with fiendish edge cases.

You certainly needed a bundler several years ago, because browsers didn’t natively support the import keyword, but it’s much less true today. Right now, we’re seeing the rise of the unbundled development workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) on-demand, meaning startup is essentially instantaneous however large your app becomes.

Snowpack is at the vanguard of this movement, and it’s what powers SvelteKit. It’s astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we’ve been working closely with the Snowpack team on features like SSR. The hot module reloading is particularly revelatory if you’re used to using Sapper with Rollup (which has never had first-class HMR support owing to its architecture, which prioritises the most efficient output).

That’s not to say we’re abandoning bundlers altogether. It’s still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static .css files).

The other foundational assumption is that a server-rendered app needs, well, a server. Sapper effectively has two modes — sapper build, which creates a standalone app that has to run on a Node server, and sapper export which bakes your app out as a collection of static files suitable for hosting on services like GitHub Pages.

Static files can go pretty much anywhere, but running a Node server (and monitoring/scaling it etc) is less straightforward. Nowadays we’re witnessing a shift towards serverless platforms, in which you as the app author don’t need to think about the server your code is running on, with all the attendant complexity. You can get Sapper apps running on serverless platforms, thanks to things like vercel-sapper, but it’s certainly not what you’d call idiomatic.

SvelteKit fully embraces the serverless paradigm, and will launch with support for all the major serverless providers, with an ‘adapter’ API for targeting any platforms that we don’t officially cater to. In addition, we’ll be able to do partial pre-rendering, which means that static pages can be generated at build time but dynamic ones get rendered on-demand.

When can I start using it?

If you’re feeling brave, you can start right now:

npm init svelte@next

This will scaffold a new project and install the @sveltejs/kit CLI, which provides the tools for developing and building an app.

We don’t recommend it though! There are no docs, and we won’t be able to offer any form of support. It’s also likely to break often.

The work is being done in a private monorepo while we’re still in exploration mode. Our plan is to get a public beta ready and announce it here once we’ve closed a few issues — the repo itself will remain private at that time, but we’ll create a place to collect feedback from the YOLO crowd. After that, we’ll work towards a 1.0 release which will involve opening the repo up.

I’m not going to make any firm promises about timings, because I don’t like to break promises. But I think we’re talking about weeks rather than months.

What if I don’t want to use SvelteKit?

You won’t have to — it will always be possible to use Svelte as a standalone package or via a bundler integration like rollup-plugin-svelte. We think it’s essential that you can bend Svelte to fit your workflow, however esoteric, and use third-party app frameworks like Elder.js, Routify, Plenti, Crown, JungleJS and others.

TypeScript?

Don’t worry, we won’t launch without full TypeScript support.

How can I migrate my existing Sapper apps?

For the most part, it should be relatively straightforward to migrate a Sapper codebase.

There are some unavoidable changes (being able to run on serverless platforms means we need to replace custom server.js files and (req, res) => {...} functions with more portable equivalents), and we’re taking the opportunity to fix a few design flaws, but on the whole a SvelteKit app will feel very familiar to Sapper users.

Detailed migration guides will accompany the 1.0 launch.

How can I contribute?

Keep your eyes peeled for announcements about when we’ll launch the public beta and open up the repo. (Also, blog post TODO but I would be remiss if I didn’t mention that we now have an OpenCollective where you can contribute financially to the project if it’s been valuable to you. Many, many thanks to those of you who already have.)

Where can I learn more?

Follow svelte.dev and sveltesociety.dev on BlueSky, and visit svelte.dev/chat. You should also subscribe to Svelte Radio, where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, reply to this Twitter thread with your additional questions).

What’s new in Svelte: November 2020

Dani Sandoval — Sun, 01 Nov 2020 00:00:00 GMT

Welcome back to the “What’s new in Svelte” series! This month, we’re covering new features & bug fixes, last month’s Svelte Summit and some stand-out sites and libraries...

New features & impactful bug fixes

Destructuring Promises now works as expected by using the {#await} syntax (3.29.3, Example)
Slot forwarding (released in 3.29.0) should no longer hang during compilation (3.29.3, Example)
Better typings for the get function in svelte/store and on lifecycle hooks (3.29.1)

What’s going on in Sapper?

Sapper got some new types in its preload function, which will make typing easier if you are using TypeScript. See the Sapper docs on how to use them. There also were fixes to preload links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (0.28.10)

For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.

Svelte Summit was Svelte-tacular!

Rich Harris demoed the possible future of Svelte development in a talk titled “Futuristic Web Development”. The not-yet-public project is called SvelteKit (name may change) and will bring a first-class developer experience and more flexibility for build outputs. If you want to get the full sneak-peek, check out the video.
17 speakers made the best of the conference’s virtual format... From floating heads to seamless demos, Svelte developers from every skill level will find something of interest in this year’s YouTube playlist

Community Showcase

Svelte Lab showcases a variety of components, visualizations and interactions that can be achieved in Svelte. You can click into any component to see its source or edit it, using the site’s built-in REPL
svelte-electron-boilerplate is a fast way to get up and running with a Svelte app built in the desktop javascript framework, Electron
React Hooks in Svelte showcases examples of common React Hooks ported to Svelte.
gurlic is a social network and internet experiment that is super snappy thanks to Svelte
Interference 2020 visualizes reported foreign interference in the 2020 U.S. elections. You can learn more about how it was built in YYY’s talk at Svelte Summit
jitsi-svelte lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
Ellx is part spreadsheet, part notebook and part IDE. It’s super smooth thanks to Svelte 😎
This New Zealand news site breaks down the results of the 2020 Parliamentary elections using Svelte
Budibase is a no-code app builder, powered by Svelte
Svelt-yjs combines the collaborative, local-first technology of Yjs with the power of Svelte to enable multiple users across the internet to stay in sync.
tabler-icons-svelte is a Svelte wrapper for over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.

See you next month!

What’s new in Svelte: October 2020

Dani Sandoval — Thu, 01 Oct 2020 00:00:00 GMT

Welcome to the first edition of our “What’s new in Svelte” series! We’ll try to make this a monthly blog post in which you’ll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.

New features

use:obj.method allows functions defined within objects to be used within actions (Example, 3.26.0, warning removed in 3.27.0)
_ is now supported as a “numerical separator”, similar to a . or , (Example, 3.26.0)
import.meta now works in template expressions (Example, 3.26.0)
CSS Selectors with ~ and + combinators are now supported (Example, 3.27.0, with a compiler fix in 3.29.0)
The {#key} block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the {#key} block will be destroyed and recreated. For an in-depth explanation and to find out how it’s implemented, check out the new blog post of Svelte Team member Tan Li Hau. (More info, 3.29.0)
Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper <div>s (More info, 3.29.0)
When using TypeScript, you can now type the createEventDispatcher method:

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		/**
		 * you can also add docs
		 */
		checked: boolean; // Will translate to `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide strong typings for these events as well as autocompletion and hover information.

New from Sapper!

Sapper 0.28.9 just came out. The highlights from it include much better support for CSP nonces, asset preload support for exported pages, and error details are now available in the $page store on error pages.

In addition, Sapper’s CSS handling has been rewritten over the course of recent releases in order to fix existing CSS handling bugs, refactor the CSS handling to occur entirely within a Rollup plugin, and remove the need internally to register CSS in the routing system. Congrats and thank you to the folks working on Sapper for all their solid work!

Impactful bug fixes

CSS compilation will no longer remove rules for the open attribute on <details> elements (Example, 3.26.0)
prettier-plugin-svelte will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside <pre> tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.

Coming up

Svelte Summit, Svelte’s second global online conference, is taking place on October 18! Sign up for free to get reminders and talk updates!

For all the features and bugfixes see the CHANGELOG for Svelte and Sapper.

Svelte Showcase

This CustomMenu example demos how to replace the OS right-click menu
GitHub Tetris lets you play a Tetris-like game in a git commit history
Who are my representatives? is a website built with Svelte to help US residents get more info on their congressional representatives
Pick Palette is a color palette manager made with Svelte!

In-depth learning:

Svelte 3 Up and Running is a new book about building production-ready static web apps with Svelte 3
Sapper Tutorial (Crash Course) walks through the ins-and-outs of Sapper, the Svelte-powered application framework
Svelte Society Day France happened September 27th featuring a wide variety of topics all in French! You can find the full recording here.

Plug-and-play components:

svelte-zoom brings “nearly native” pan-and-zoom to images on desktop and mobile
svelte-materialify is a Material component library for Svelte with over 50 components
svelte-undoable makes it easy to introduce undo and redo functionality using bind:
This Tilt component implements a common UX pattern where the hovered element tilts to follow the mouse

Lots of examples of how use JS tech came out this month:

Reminder: There’s a Svelte integrations repo that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you’ve got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you’ve gotten something to work with Svelte, consider contributing!

For more amazing Svelte projects, check out the Svelte Society, Reddit and Discord… and be sure to post your own!

See you next month!

By the way, Svelte now has an OpenCollective! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where that money is going, submit expenses, get reimbursed and more!

Svelte <3 TypeScript

Orta Therox — Fri, 17 Jul 2020 00:00:00 GMT

It’s been by far the most requested feature for a while, and it’s finally here: Svelte officially supports TypeScript.

We think it’ll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.

Image of TypeScript + Svelte in VS Code (theme is Kary Pro.)

Try it now

You can start a new Svelte TypeScript project using Svelte’s official scaffolding CLI by running npm create svelte@latest and following the prompts. This sets up a new SvelteKit project for you.

Alternatively you can run npm create vite@latest myapp -- --template svelte-ts to scaffold a Vite project using Svelte and TypeScript.

If you’re a VS Code user, make sure you’re using the (new) official extension, which replaces the popular extension by James Birtles. Later in this blog post, we’ll detail the individual steps involved in using TypeScript in an existing Svelte project.

What does it mean to support TypeScript in Svelte?

TypeScript support in Svelte has been possible for a long time, but you had to mix a lot of disparate tools together and each project ran independently. Today, nearly all of these tools live under the Svelte organization and are maintained by a set of people who take responsibility over the whole pipeline and have common goals.

A week before COVID was declared a pandemic, I pitched a consolidation of the best Svelte tools and ideas from similar dev-ecosystems and provided a set of steps to get first class TypeScript support. Since then, many people have pitched in and written the code to get us there.

When we say that Svelte now supports TypeScript, we mean a few different things:

You can use TypeScript inside your <script> blocks — just add the lang="ts" attribute
Components with TypeScript can be type-checked with the svelte-check command
You get autocompletion hints and type-checking as you’re writing components, even in expressions inside markup
TypeScript files understand the Svelte component API — no more red squiggles when you import a .svelte file into a .ts module

How does it work?

To understand the two main parts of TypeScript support, we’ll compare it to the technique TypeScript uses to provide dev tools. There is a compiler tsc which you run on the command-line to convert *.ts to *.js, then there is a TSServer which is a node API that responds to requests from text editors. The TSServer is what provides all the JavaScript and TypeScript realtime introspection for editors while coding, and it has most of the compiler’s code inside it.

For Svelte, we have the Svelte compiler, and now we have the svelte-language-server which responds to text editor calls via the Language Server Protocol standard. First class TypeScript support means that both of these two systems do a good job of handling TypeScript code.

The Svelte compiler support for TypeScript is handled by Christian Kaisermann’s svelte-preprocess which is now an official Svelte project.

For the editor level, we took inspiration from Pine’s work in the Vue ecosystem via Vetur. Vetur provides an LSP, a VS Code extension and a CLI. Svelte now also has an LSP, a VS Code extension and a CLI.

*.svelte Introspection

For the official Svelte VS Code extension, we built off the foundations which James Birtles has created in UnwrittenFun/svelte-vscode and UnwrittenFun/svelte-language-server.

Simon Holthausen and Lyu, Wei-Da have done great work improving the JavaScript and TypeScript introspection, including integrating @halfnelson’s svelte2tsx which powers understanding the props on components in your codebase.

Adding TypeScript to an existing project

Before getting started, add the dependencies:

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1. Compiling TypeScript

You first need to set up svelte-preprocess, which passes the contents of your <script lang="ts"> blocks through the TypeScript compiler.

In a Rollup project, that would look like this — note that we also need to install @rollup/plugin-typescript so that Rollup can handle .ts files:

import const autoPreprocess: ({ aliases, markupTagName, sourceMap, ...rest }?: AutoPreprocessOptions) => AutoPreprocessGroup@deprecatedUse the named export instead: import { sveltePreprocess } from 'svelte-preprocess'autoPreprocess from 'svelte-preprocess';
import import typescripttypescript from '@rollup/plugin-typescript';

export default {
	// ...,
	plugins: any[]plugins: [
		svelte({
			preprocess: PreprocessorGrouppreprocess: function autoPreprocess({ aliases, markupTagName, sourceMap, ...rest }?: AutoPreprocessOptions): AutoPreprocessGroup@deprecatedUse the named export instead: import { sveltePreprocess } from 'svelte-preprocess'autoPreprocess()
		}),
		import typescripttypescript({ sourceMap: booleansourceMap: !production })
	]
}

Full instructions for other environments here.

To configure TypeScript, you will need to create a tsconfig.json in the root of your project:

{
	"extends": "@tsconfig/svelte/tsconfig.json",

	"include": ["src/**/*", "src/node_modules"],
	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

Your include / exclude may differ per project — these are defaults that should work across most Svelte projects.

2. Editor Support

Any editor using an LSP can be supported. The VS Code extension has been our primary focus, but there is work in progress on Atom, and Vim via coc-svelte has been updated with the latest LSP.

These editor extensions will improve your coding experience even if you only use JavaScript. The editor won’t offer errors, but it will offer inference and refactoring tools. You can add // @ts-check to the top of a <script> tag using JavaScript to get better error messages with no infra changes.

To switch a <script> to use TypeScript, use <script lang="ts"> and that should be it. Hopefully you won’t be seeing an ocean of red squiggles.

3. CI Checks

Having red squiggles is great, well, kinda. On the long run though, you want to be able to verify that there are no errors in your code. To verify your project is error free, you can use the CLI tool svelte-check. It acts like an editor asking for errors against all of your .svelte files.

You can add the dependency to your project and then add it to CI.

❯ npx svelte-check

Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
Getting Svelte diagnostics...
====================================

/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
Error: Type '123' is not assignable to type 'string'. (ts)

====================================
svelte-check found 1 error
error Command failed with exit code 1.

What about TypeScript in Sapper projects?

TypeScript support was added to Sapper in 0.28, so if you’re using an older version be sure to upgrade.

How can I contribute?

We’re so glad you asked. The work is happening in the sveltejs/language-tools repo and in the #language-tools channel in the Svelte Discord. If you’d like to report issues, submit fixes, or help out with extensions for new editors and so on, that’s where you can find us. See you there!

Svelte 3: Rethinking reactivity

Rich Harris — Mon, 22 Apr 2019 00:00:00 GMT

After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way.

We think you’re going to love it.

What is Svelte?

Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there’s a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector.

Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you’re able to write ambitious applications with excellent performance characteristics.

The first version of Svelte was all about testing a hypothesis — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.

Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding developer experience. It’s now possible to write components with significantly less boilerplate than you’ll find elsewhere. Try the brand new tutorial and see what we mean — if you’re familiar with other frameworks we think you’ll be pleasantly surprised.

To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.

'Rethinking Reactivity' from You Gotta Love Frontend Code Camp

Moving reactivity into the language

In old Svelte, you would tell the computer that some state had changed by calling the this.set method:

const { const count: anycount } = this.get();
this.set({
	count: anycount: const count: anycount + 1
});

That would cause the component to react. Speaking of which, this.set is almost identical to the this.setState method used in classical (pre-hooks) React:

const { const count: anycount } = this.state;
this.setState({
	count: anycount: const count: anycount + 1
});

There are some important technical differences (as I explain in the video above, React is not reactive) but conceptually it’s the same thing.

That all changed with the advent of hooks, which handle state in a very different fashion. Many frameworks started experimenting with their own implementations of hooks, but we quickly concluded it wasn’t a direction we wanted to go in. Hooks have some intriguing properties, but they also involve some unnatural code and create unnecessary work for the garbage collector. For a framework that’s used in embedded devices as well as animation-heavy interactives, that’s no good.

So we took a step back and asked ourselves what kind of API would work for us... and realised that the best API is no API at all. We can just use the language. Updating some count value — and all the things that depend on it — should be as simple as this:

let count: numbercount += 1;

Since we’re a compiler, we can do that by instrumenting assignments behind the scenes:

let count: numbercount += 1;
const $$invalidate: <number>(name: string, value: number) => undefined$$invalidate('count', let count: numbercount);

Importantly, we can do all this without the overhead and complexity of using proxies or accessors. It’s just a variable.

New look

Your components aren’t the only thing that’s getting a facelift. Svelte itself has a completely new look and feel, thanks to the amazing design work of Achim Vedam who created our new logo and website, which has moved from svelte.technology to svelte.dev.

We’ve also changed our tagline, from ‘The magical disappearing UI framework’ to ‘Cybernetically enhanced web apps’. Svelte has many aspects — outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it’s a compiler, etc — that focusing on any one of them feels like an injustice to the others. ‘Cybernetically enhanced’ is designed to instead evoke Svelte’s overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.

Upgrading from version 2

If you’re an existing Svelte 2 user, I’m afraid there is going to be some manual upgrading involved. In the coming days we’ll release a migration guide and an updated version of svelte-upgrade which will do the best it can to automate the process, but this is a significant change and not everything can be handled automatically.

We don’t take this lightly: hopefully once you’ve experienced Svelte 3 you’ll understand why we felt it was necessary to break with the past.

Still to come

As grueling as this release has been, we’re nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. Sapper, our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The Svelte Native community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don’t yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We really want to add first-class TypeScript support.

But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the tutorial and we hope to convince you of the same. Either way, we’d love to see you in our Discord chatroom and on GitHub — everyone is welcome, especially you.

Write less code

Rich Harris — Sat, 20 Apr 2019 00:00:00 GMT

All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.

Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.

In fact it’s widely acknowledged that project development time and bug count grow quadratically, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in more code. It’s a vicious cycle.

Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we’re writing.

Readability is important

I’m certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing lines of code is necessarily a worthwhile goal, since it encourages turning readable code like this...

for (let let i: numberi = 0; let i: numberi <= 100; let i: numberi += 1) {
	if (let i: numberi % 2 === 0) {
		var console: Consoleconsole.Console.log(...data: any[]): voidMDN Reference
log(`${let i: numberi} is even`);
	}
}

...into something much harder to parse:

for (let let i: numberi = 0; let i: numberi <= 100; let i: numberi += 1) if (let i: numberi % 2 === 0) var console: Consoleconsole.Console.log(...data: any[]): voidMDN Reference
log(`${let i: numberi} is even`);

Instead, I’m claiming that we should favour languages and patterns that allow us to naturally write less code.

Yes, I’m talking about Svelte

Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let’s look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version:

How would we build this in React? It would probably look something like this:

import import ReactReact, { import useStateuseState } from 'react';

export default () => {
	const [const a: anya, const setA: anysetA] = import useStateuseState(1);
	const [const b: anyb, const setB: anysetB] = import useStateuseState(2);

	function function (local function) handleChangeA(event: any): voidhandleChangeA(event: anyevent) {
		const setA: anysetA(+event: anyevent.target.value);
	}

	function function (local function) handleChangeB(event: any): voidhandleChangeB(event: anyevent) {
		const setB: anysetB(+event: anyevent.target.value);
	}

	return (
		<div>
			<input type: stringtype="number" value: anyvalue={const a: anya} onChange: (event: any) => voidonChange={function (local function) handleChangeA(event: any): voidhandleChangeA} />
			<input type: stringtype="number" value: anyvalue={const b: anyb} onChange: (event: any) => voidonChange={function (local function) handleChangeB(event: any): voidhandleChangeB} />

			<p>
				{const a: anya} + {const b: anyb} = {const a: anya + const b: anyb}
			</p>
		</div>
	);
};

Here’s an equivalent component in Vue:

<template>
	<div>
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">

		<p>{{a}} + {{b}} = {{a + b}}</p>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				a: 1,
				b: 2
			};
		}
	};
</script>

In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!

It’s unusual for the difference to be quite so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let’s look at the features of Svelte’s design that enable you to express ideas more concisely:

Top-level elements

In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React’s case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — <> — instead of a <div>, but it’s the same basic idea, and still results in an extra level of indentation).

In Vue, your markup must be wrapped in a <template> element, which I’d argue is redundant.

Bindings

In React, we have to respond to input events ourselves:

function function handleChangeA(event: any): voidhandleChangeA(event: anyevent) {
	setA(+event: anyevent.target.value);
}

This isn’t just boring plumbing that takes up extra space on the screen, it’s also extra surface area for bugs. Conceptually, the value of the input is bound to the value of a and vice versa, but that relationship isn’t cleanly expressed — instead we have two tightly-coupled but physically separate chunks of code (the event handler and the value={a} prop). Not only that, but we have to remember to coerce the string value with the + operator, otherwise 2 + 2 will equal 22 instead of 4.

Like Svelte, Vue does have a way of expressing the binding — the v-model attribute, though again we have to be careful to use v-model.number even though it’s a numeric input.

State

In Svelte, you update local component state with an assignment operator:

let let count: numbercount = 0;

function function increment(): voidincrement() {
	let count: numbercount += 1;
}

In React, we use the useState hook:

const [const count: anycount, const setCount: anysetCount] = useState(0);

function function increment(): voidincrement() {
	const setCount: anysetCount(const count: anycount + 1);
}

This is much noisier — it expresses the exact same concept but with over 60% more characters. As you’re reading the code, you have to do that much more work to understand the author’s intent.

In Vue, meanwhile, we have a default export with a data function that returns an object literal with properties corresponding to our local state. Things like helper functions and child components can’t simply be imported and used in the template, but must instead be ‘registered’ by attaching them to the correct part of the default export.

Death to boilerplate

These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, reactive declarations ($: statements) essentially do the work of React’s useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).

How? By choosing a different set of constraints. Because Svelte is a compiler, we’re not bound to the peculiarities of JavaScript: we can design a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in more idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.

Svelte for new developers

Rich Harris — Tue, 16 Apr 2019 00:00:00 GMT

This short guide is designed to help you — someone who has looked at the tutorial and wants to start creating Svelte apps, but doesn’t have a ton of experience using JavaScript build tooling — get up and running.

If there are things that don’t make sense, or that we’re glossing over, feel free to raise an issue or suggest edits to this page that will help us help more people.

If you get stuck at any point following this guide, the best place to ask for help is in the chatroom.

First things first

You’ll be using the command line, also known as the terminal. On Windows, you can access it by running Command Prompt from the Start menu; on a Mac, hit Cmd and Space together to bring up Spotlight, then start typing Terminal.app. On most Linux systems, Ctrl-Alt-T brings up the command line.

The command line is a way to interact with your computer (or another computer! but that’s a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day.

Once on the command line, you can navigate the filesystem using ls (dir on Windows) to list the contents of your current directory, and cd to change the current directory. For example, if you had a Development directory of your projects inside your home directory, you would type

cd Development

to go to it. From there, you could create a new project directory with the mkdir command:

mkdir svelte-projects
cd svelte-projects

A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands:

cd .. — navigates to the parent of the current directory
cat my-file.txt — on Mac/Linux (type my-file.txt on Windows), lists the contents of my-file.txt
open . (or start . on Windows) — opens the current directory in Finder or File Explorer

Installing Node.js

Node is a way to run JavaScript on the command line. It’s used by many tools, including Svelte. If you don’t yet have it installed, the easiest way is to download the latest version straight from the website.

Once installed, you’ll have access to three new commands:

node my-file.js — runs the JavaScript in my-file.js
npm [subcommand] — npm is a way to install ‘packages’ that your application depends on, such as the svelte package
npx [subcommand] — a convenient way to run programs available on npm without permanently installing them

Installing a text editor

To write code, you need a good editor. The most popular choice is Visual Studio Code or VSCode, and justifiably so — it’s well-designed and fully-featured, and has a wealth of extensions (including one for Svelte, which provides syntax highlighting and diagnostic messages when you’re writing components).

Creating a project

We’re going to use the Svelte + Vite template. You don’t have to use a project template, but it means you have to do a lot less setup work.

On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you’ll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

You can replace --template svelte with --template svelte-ts, if you prefer TypeScript.

This creates a new directory, my-svelte-project, adds files from the create-vite/template-svelte template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app’s ‘source code’ lives in the src directory, while the files your app can load are in public.

In the package.json file, there is a section called "scripts". These scripts define shortcuts for working with your application — dev, build and preview. To launch your app in development mode, type the following:

npm run dev

Running the dev script starts a program called Vite. Vite’s job is to take your application’s source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.

Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local web server (hence ‘localhost’) on port 5173.

Try changing src/App.svelte and saving it. The application will update with your changes.

Building your app

In the last step, we were running the app in ‘development mode’. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app’s JavaScript is compressed.

When you share your app with the world, you want to build it in ‘production mode’, so that it’s as small and efficient as possible for end users. To do that, use the build command:

npm run build

Your dist directory now contains an optimised version of your app. You can run it like so:

npm run preview

Svelte on The Changelog

Rich Harris — Thu, 31 Jan 2019 00:00:00 GMT

Earlier this month, I had the privilege of appearing on The Changelog, a podcast about software development. We had a fun (for me) and wide-ranging conversation:

life as a coder inside a newsroom
the big compilers-as-frameworks trend
scalability
the Great Divide

...and, most importantly, Svelte 3.

Unless you hang out in our Discord server or follow @sveltejs on BlueSky, you might not know that Svelte 3 is just around the corner, and it’s going to be a huge release. We’ve rethought the developer experience from the ground up, and while it will be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you’re going to love it.

On the podcast Adam, Jerod and I talk about some of the changes and why we’re making them. You can listen here or on the podcast page.

The Changelog 332: A UI framework without the framework – Listen on Changelog.com

Virtual DOM is pure overhead

Rich Harris — Thu, 27 Dec 2018 00:00:00 GMT

If you’ve used JavaScript frameworks in the last few years, you’ve probably heard the phrase ‘the virtual DOM is fast’, often said to mean that it’s faster than the real DOM. It’s a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn’t use a virtual DOM.

It’s time to take a closer look.

What is the virtual DOM?

In many frameworks, you build an app by creating render() functions, like this simple React component:

function function HelloMessage(props: any): divHelloMessage(props: anyprops) {
	return <type div = /*unresolved*/ anydiv className="greeting">Hello {props: anyprops.name}</div>;
}

You can do the same thing without JSX...

function function HelloMessage(props: any): anyHelloMessage(props: anyprops) {
	return React.createElement('div', { className: stringclassName: 'greeting' }, 'Hello ', props: anyprops.name);
}

...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app’s state updates (for example when the name prop changes), you create a new one. The framework’s job is to reconcile the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.

How did the meme start?

Misunderstood claims about virtual DOM performance date back to the launch of React. In Rethinking Best Practices, a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:

This is actually extremely fast, primarily because most DOM operations tend to be slow. There’s been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

Screenshot from Rethinking Best Practices at JSConfEU 2013

But hang on a minute! The virtual DOM operations are in addition to the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no one actually does:

onEveryStateChange(() => {
	var document: DocumentMDN Reference
document.Document.body: HTMLElementSpecifies the beginning and end of the document body.
MDN Reference
body.Element.innerHTML: stringMDN Reference
innerHTML = renderMyApp();
});

Pete clarifies soon after...

React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.

...but that’s not the part that stuck.

So... is the virtual DOM slow?

Not exactly. It’s more like ‘the virtual DOM is usually fast enough’, but with certain caveats.

The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don’t think that’s turned out to be accurate. If it was, there’d be no need for optimisations like shouldComponentUpdate (which is a way of telling React when it can safely skip a component).

Even with shouldComponentUpdate, updating your entire app’s virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don’t block the main thread for long periods of time, though it doesn’t reduce the total amount of work or the time an update takes.

Where does the overhead come from?

Most obviously, diffing isn’t free. You can’t apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier HelloMessage example, suppose the name prop changed from ‘world’ to ‘everybody’.

Both snapshots contain a single element. In both cases it’s a <div>, which means we can keep the same DOM node
We enumerate all the attributes on the old <div> and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a className with a value of "greeting"
Descending into the element, we see that the text has changed, so we’ll need to update the real DOM

Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:

if (changed.name) {
	text.data = const name: void@deprecatedname;
}

(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at build time how things could change in your app, rather than waiting to do the work at run time.)

It’s not just the diffing though

The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn’t write code like this...

function function StrawManComponent(props: any): anyStrawManComponent(props: anyprops) {
	const const value: anyvalue = expensivelyCalculateValue(props: anyprops.foo);

	return <p>the value is {const value: anyvalue}</p>;
}

...because you’d be carelessly recalculating value on every update, regardless of whether props.foo had changed. But it’s extremely common to do unnecessary computation and allocation in ways that seem much more benign:

function function MoreRealisticComponent(props: any): anyMoreRealisticComponent(props: anyprops) {
	const [const selected: anyselected, const setSelected: anysetSelected] = useState(null);

	return (
		<div>
			<p>Selected {const selected: anyselected ? const selected: anyselected.name : 'nothing'}</p>

			<ul>
				{props: anyprops.items.map((item: anyitem) => (
					<li>
						<button onClick: () => anyonClick={() => const setSelected: anysetSelected(item: anyitem)}>{item: anyitem.name}</button>
					</li>
				))}
			</ul>
		</div>
	);
}

Here, we’re generating a new array of virtual <li> elements — each with their own inline event handler — on every state change, regardless of whether props.items has changed. Unless you’re unhealthily obsessed with performance, you’re not going to optimise that. There’s no point. It’s plenty fast enough. But you know what would be even faster? Not doing that.

The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to ‘death by a thousand cuts’ with no clear bottleneck to aim at once it’s time to optimise.

Svelte is explicitly designed to prevent you from ending up in that situation.

Why do frameworks use the virtual DOM then?

It’s important to understand that virtual DOM isn’t a feature. It’s a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones.

But it turns out that we can achieve a similar programming model without using virtual DOM — and that’s where Svelte comes in.

Using CSS-in-JS with Svelte

Rich Harris — Wed, 26 Dec 2018 00:00:00 GMT

CSS is a core part of any web app. By extension, a UI framework that doesn’t have a built-in way to add styles to your components is unfinished.

That’s why Svelte allows you to add CSS in a component’s <style> tag. Co-locating your CSS with your markup means we can solve the biggest problems developers face when writing CSS without introducing new ones, all while providing a rather nice development experience.

But Svelte’s style handling does have some limitations. It’s too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.

For example

Here, we’re using Emotion to generate scoped class names that can be used across multiple components:

It’s important to note that most CSS-in-JS libraries have a runtime library, and many don’t support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it’s necessary for your application!

Note that you can mix-and-match — you can still use Svelte’s built-in CSS handling alongside a CSS-in-JS library.

Svelte v2 is out!

Rich Harris — Wed, 18 Apr 2018 00:00:00 GMT

Almost a year after we first started talking about version 2 on the Svelte issue tracker, it’s finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.

tl;dr

Each of these items is described in more depth below. If you get stuck, ask for help in our friendly Discord chatroom.

Install Svelte v2 from npm
Upgrade your templates with svelte-upgrade
Remove calls to component.observe, or add the observe method from svelte-extras
Rewrite calls to component.get('foo') as component.get().foo
Return destroy from your custom event handlers, rather than teardown
Make sure you’re not passing numeric string props to components

New template syntax

The most visible change: we’ve made some improvements to the template syntax.

A common piece of feedback we heard was ‘ewww, Mustache’ or ‘ewww, Handlebars’. A lot of people who used string-based templating systems in a previous era of web development really dislike them. Because Svelte adopted the {{curlies}} from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.

Beyond that, JSX proved that double curlies are unnecessary. So we’ve made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:

<h1>Hello {name}!</h1>

There are a few other updates. But you don’t need to make them manually — just run svelte-upgrade on your codebase:

npx svelte-upgrade v2 src

This assumes any .html files in src are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you’d do npx svelte-upgrade v2 routes to update a Sapper app.

To see the full set of changes, consult the svelte-upgrade README.

Computed properties

Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...

export default {
	computed: {
    d: (a: any, b: any, c: any) => any;
}computed: {
		d: (a: any, b: any, c: any) => anyd: (a: anya, b: anyb, c: anyc) => (a: anya = b: anyb + c: anyc)
	}
};

...then Svelte would first look at the function arguments to see which values d depended on, and then it would write code that updated d whenever those values changed, by injecting them into the function. That’s cool, because it allows you to derive complex values from your component’s inputs without worrying about when they need to recomputed, but it’s also... weird. JavaScript doesn’t work that way!

In v2, we use destructuring instead:

export default {
	computed: {
    d: ({ a, b, c }: {
        a: any;
        b: any;
        c: any;
    }) => any;
}computed: {
		d: ({ a, b, c }: {
    a: any;
    b: any;
    c: any;
}) => anyd: ({ a: anya, b: anyb, c: anyc }) => (a: anya = b: anyb + c: anyc)
	}
};

The Svelte compiler can still see which values d depends on, but it’s no longer injecting values — it just passes the component state object into each computed property.

Again, you don’t need to make this change manually — just run svelte-upgrade on your components, as shown above.

Sorry, IE11. It’s not you, it’s... well actually, yeah. It’s you

Svelte v1 was careful to only emit ES5 code, so that you wouldn’t be forced to faff around with transpilers in order to use it. But it’s 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.

If you need to support IE11 and friends, you will need to use a transpiler like Babel or Bublé.

New lifecycle hooks

In addition to oncreate and ondestroy, Svelte v2 adds two more lifecycle hooks for responding to state changes:

export default {
	function onstate({ changed, current, previous }: {
    changed: any;
    current: any;
    previous: any;
}): voidonstate({ changed: anychanged, current: anycurrent, previous: anyprevious }) {
		// this fires before oncreate, and
		// whenever state changes
	},

	function onupdate({ changed, current, previous }: {
    changed: any;
    current: any;
    previous: any;
}): voidonupdate({ changed: anychanged, current: anycurrent, previous: anyprevious }) {
		// this fires after oncreate, and
		// whenever the DOM has been updated
		// following a state change
	}
};

You can also listen to those events programmatically:

component.on('state', ({ changed: anychanged, current: anycurrent, previous: anyprevious }) => {
	// ...
});

component.observe

With the new lifecycle hooks, we no longer need the component.observe(...) method:

// before
export default {
	function oncreate(): voidoncreate() {
		this.observe('foo', foo: anyfoo => {
			var console: Consoleconsole.Console.log(...data: any[]): voidMDN Reference
log(`foo is now ${foo: anyfoo}`);
		});
	}
};

// after
export default {
	function onstate({ changed, current }: {
    changed: any;
    current: any;
}): voidonstate({ changed: anychanged, current: anycurrent }) {
		if (changed: anychanged.foo) {
			var console: Consoleconsole.Console.log(...data: any[]): voidMDN Reference
log(`foo is now ${current: anycurrent.foo}`);
		}
	}
};

This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it’s now very easy to take action when any one of several properties have changed, such as redrawing a canvas without debouncing several observers.

However, if you prefer to use component.observe(...), then you can install it from svelte-extras:

import { import observeobserve } from 'svelte-extras';

export default {
	methods: {
    observe: any;
}methods: {
		observe: anyobserve
	}
};

component.get

This method no longer takes an optional key argument — instead, it always returns the entire state object:

// before
const const foo: anyfoo = this.get('foo');
const const bar: anybar = this.get('bar');

// after
const { const foo: anyfoo, const bar: anybar } = this.get();

This change might seem annoying initially, but it’s the right move: among other things, it’s likely to play better with type systems as we explore that space more fully in future.

event_handler.destroy

If your app has custom event handlers, they must return an object with a destroy method, not a teardown method (this aligns event handlers with the component API).

No more type coercion

Previously, numeric values passed to components were treated as numbers:

<Counter start="1" />

That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:

<Counter start={1} />

Compiler changes

In most cases you’ll never need to deal with the compiler directly, so this shouldn’t require any action on your part. It’s worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns js, css, ast and stats:

const { const js: anyjs, const css: anycss, const ast: anyast, const stats: anystats } = svelte.compile(source, options);

js and css are both { code, map } objects, where code is a string and map is a sourcemap. The ast is an abstract syntax tree of your component, and the stats object contains metadata about the component, and information about the compilation.

Before, there was a svelte.validate method which checked your component was valid. That’s been removed — if you want to check a component without actually compiling it, just pass the generate: false option.

My app is broken! Help!

Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren’t mentioned here, swing by Discord chatroom or raise an issue on the tracker.

Sapper: Towards the ideal web app framework

Rich Harris — Sun, 31 Dec 2017 00:00:00 GMT

Quickstart for the impatient: the Sapper docs, and the starter template

If you had to list the characteristics of the perfect Node.js web application framework, you’d probably come up with something like this:

It should do server-side rendering, for fast initial loads and no caveats around SEO
As a corollary, your app’s codebase should be universal — write once for server and client
The client-side app should hydrate the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering them
Navigating to subsequent pages should be instantaneous
Offline, and other Progressive Web App characteristics, must be supported out of the box
Only the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic import(...) for more granular manual control
No compromise on performance
First-rate developer experience, with hot module reloading and all the trimmings
The resulting codebase should be easy to grok and maintain
It should be possible to understand and customise every aspect of the system — no webpack configs locked up in the framework, and as little hidden ‘plumbing’ as possible
Learning the entire framework in under an hour should be easy, and not just for experienced developers

Next.js is close to this ideal. If you haven’t encountered it yet, I strongly recommend going through the tutorials at learnnextjs.com. Next introduced a brilliant idea: all the pages of your app are files in a your-project/pages directory, and each of those files is just a React component.

Everything else flows from that breakthrough design decision. Finding the code responsible for a given page is easy, because you can just look at the filesystem rather than playing ‘guess the component name’. Project structure bikeshedding is a thing of the past. And the combination of SSR (server-side rendering) and code-splitting — something the React Router team gave up on, declaring ‘Godspeed those who attempt the server-rendered, code-split apps’ — is trivial.

But it’s not perfect. As churlish as it might be to list the flaws in something so, so good, there are some:

Next uses something called ‘route masking’ to create nice URLs (e.g. /blog/hello-world instead of /post?slug=hello-world). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
All your routes are assumed to be universal ‘pages’. But it’s very common to need routes that only render on the server, such as a 301 redirect or an API endpoint that serves the data for your pages, and Next doesn’t have a great solution for this. You can add logic to your server.js file to handle these cases, but it feels at odds with the declarative approach taken for pages
To use the client-side router, links can’t be standard <a> tags. Instead, you have to use framework-specific <Link> components, which is impossible in the markdown content for a blog post such as this one, for example

The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single ‘hello world’ page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it’s 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that’s the baseline.

We can do better!

The compiler-as-framework paradigm shift

Svelte introduced a radical idea: what if your UI framework wasn’t a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.

The JavaScript world is moving towards this model. Stencil, a Svelte-inspired framework from the Ionic team, compiles to web components. Glimmer doesn’t compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is getting in on the action, though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)

What happens if we use the new model as a starting point?

Introducing Sapper

Sapper is the answer to that question. Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser. It’s implemented as Express-compatible middleware, meaning it’s easy to understand and customise.

The same ‘hello world’ app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript at all for pages that aren’t interactive, beyond the tiny Sapper runtime that handles client-side routing.

What about a more ‘real world’ example? Conveniently, the RealWorld project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The Sapper implementation takes 39.6kb (11.8kb zipped) to render an interactive homepage.

The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if it was as large it would feel faster because of code-splitting. And that’s a crucial point. We’re told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there’s a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that’s no longer the case.

But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a ‘minimal’ or ‘simple’ UI library.

Trade-offs

The biggest drawback for many developers evaluating Sapper would be ‘but I like React, and I already know how to use it’, which is fair.

If you’re in that camp, I’d invite you to at least try alternative frameworks. You might be pleasantly surprised! The Sapper RealWorld implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you’re able to express concepts very concisely using Svelte’s template syntax (which takes all of five minutes to master). You get scoped CSS, with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it’s just string concatenation. And we recently introduced svelte/store, a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you’ll end up feeling vindicated!

But there are trade-offs nonetheless. Some people have a pathological aversion to any form of ‘template language’, and maybe that applies to you. JSX proponents will clobber you with the ‘it’s just JavaScript’ mantra, and therein lies React’s greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we’re not here to discuss those.

And then there’s ecosystem. The universe around React in particular — the devtools, editor integrations, ancillary libraries, tutorials, StackOverflow answers, hell, even job opportunities — is unrivalled. While it’s true that citing ‘ecosystem’ as the main reason to choose a tool is a sign that you’re stuck on a local maximum, apt to be marooned by the rising waters of progress, it’s still a major point in favour of incumbents.

Roadmap

We’re not at version 1.0.0 yet, and a few things may change before we get there. Once we do (soon!), there are a lot of exciting possibilities.

I believe the next frontier of web performance is ‘whole-app optimisation’. Currently, Svelte’s compiler operates at the component level, but a compiler that understood the boundaries between those components could generate even more efficient code. The React team’s Prepack research is predicated on a similar idea, and the Glimmer team is doing some interesting work in this space. Svelte and Sapper are well positioned to take advantage of these ideas.

Speaking of Glimmer, the idea of compiling components to bytecode is one that we’ll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.

Mostly, though, we want the direction of Sapper to be determined by its users. If you’re the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on GitHub and Discord.

The zen of Just Writing CSS

Rich Harris — Wed, 06 Sep 2017 00:00:00 GMT

It’s fashionable to dislike CSS. There are lots of reasons why that’s the case, but it boils down to this: CSS is unpredictable. If you’ve never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you’re trying to ship — then you’re either new at this or you’re a much better programmer than the rest of us.

So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there’s been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as CSS-in-JS.

What you might not realise is that the biggest problems with CSS can be solved without CSS-in-JS. Without those problems, writing CSS isn’t just tolerable — it’s enjoyable. And you don’t have to find solutions to the additional problems that CSS-in-JS introduces.

This article isn’t in any way intended as criticism of the hard work the CSS-in-JS community has done. It’s one of the most active corners of the JS ecosystem, and new ideas are springing up every week. Instead, my purpose is to illustrate why an alternative approach — based on Single File Components with real CSS — is so damn delightful.

The biggest problem with CSS

Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of that, developers often resort to wild namespacing conventions (not ‘rules’, since they’re very difficult to enforce) that mostly just increase your risk of RSI.

It gets worse when you’re working on a team. No one dares touch styles authored by someone else, because it’s often unclear what they’re doing, what markup they apply to, and what disasters will unfold if you remove them.

The consequence of all this is the append-only stylesheet. There’s no way of knowing which code can safely be removed, so it’s common to undo some existing style with another, more specific style — even on relatively small projects.

Single File Components change all that

The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a <style> and <script> attribute describing the component’s styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.

(For the rest of this article we’ll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that’s a topic for another day — then just use Vue which lets you use JSX in your SFCs.)

Several wonderful things happen as a result:

Your styles are scoped to the component. No more leakage, no more unpredictable cascade. And no more sesquipedalian classnames designed to prevent conflicts.
You don’t need to go spelunking through your folder structure to find the rules that are breaking your stuff.
The compiler (in Svelte’s case) can identify and remove unused styles. No more append-only stylesheets!

Let’s see what that looks like in practice.

Is this what they mean by 'use the platform'?

Every code editor already knows about CSS, so there’s a good chance that you’ll get autocomplete, linting, syntax highlighting and so on — all without additional JS-fatigue-inducing tools.

And because it’s real CSS, rather than some camelCased quotes-everywhere impostor, we can take advantage of the ‘tweak in devtools, paste back into our source code’ workflow, which I personally couldn’t live without. Notice that we get CSS sourcemaps out of the box, so you can instantly pinpoint the lines in question. It’s hard to overstate the importance of this: when you’re in WYSIWYG mode, you’re not thinking in terms of your component tree, so having a robust way to figure out where these damn styles came from is essential. Doubly so if someone else originally wrote the component. (I promise you, this is the single biggest productivity boost to your CSS workflow. If you’re writing styles without sourcemaps, you are almost certainly wasting a lot of time. I know I was.)

Svelte transforms your selectors (using an attribute that’s also applied to affected elements, though the exact mechanism is unimportant and subject to change) to achieve the scoping. It warns on and removes any unused rules, then it minifies the result and lets you write it out to a .css file. There’s also an experimental new option to compile to web components, using shadow DOM to encapsulate the styles, if that’s your jam.

This is all possible because your CSS is parsed (with css-tree) and statically analysed in the context of your markup. Static analysis opens the doors to all kinds of exciting future possibilities — smarter optimisations, a11y hints — that are much harder if your styles are computed dynamically at runtime. We’re just getting started.

But we can add tools to do [x]!

If your reaction to the video was ‘fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff’ — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!

We don’t have all the answers — yet

Having said all that, CSS-in-JS does point to answers to some lingering questions:

How can we install styles from npm?
How can we reuse constants that are defined in a single place?
How can we compose declarations?

Personally, I haven’t found these issues to outweigh the benefits of the approach outlined above. You may well have a different set of priorities, and they may be reason enough for you to abandon CSS.

But at the end of the day, you have to know CSS anyway. Love it or loathe it, you must at least learn it. As custodians of the web, we have a choice: create abstractions that steepen the web dev learning curve yet further, or work together to fix the bad parts of CSS. I know which I choose.

Frameworks without the framework: why didn’t we think of this sooner?

Rich Harris — Sat, 26 Nov 2016 00:00:00 GMT

Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass. – front end developers in 2018

We’re shipping too much code to our users. Like a lot of front end developers, I’ve been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use one less .jpg! – and that what really mattered was performance once your app was already interactive.

But I was wrong. 100kb of .js isn’t equivalent to 100kb of .jpg. It’s not just the network time that’ll kill your app’s startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.

If you’re not convinced that this is a problem, follow Alex Russell on BlueSky. Alex hasn’t been making many friends in the framework community lately, but he’s not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – Polymer – hasn’t yet gained traction in the front end world, and it’s certainly not for a lack of marketing.

Perhaps we need to rethink the whole thing.

What problem do frameworks really solve?

The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that’s not really true. At best, frameworks move the complexity around, away from code that you had to write and into code you didn’t.

Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your concepts. Frameworks are primarily a tool for structuring your thoughts, not your code.

Given that, what if the framework didn’t actually run in the browser? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You’d pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there’d be no layers of abstraction between your app and the browser.

Introducing Svelte

Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can learn in under 5 minutes), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.

The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.

And once your app is up and running, according to js-framework-benchmark Svelte is fast as heck. It’s faster than React. It’s faster than Vue. It’s faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It’s competitive with Inferno, which is probably the fastest UI framework in the world, for now, because Dominic Gannaway is a wizard. (Svelte is slower at removing elements. We’re working on it.)

It’s basically as fast as vanilla JS, which makes sense because it is vanilla JS – just vanilla JS that you didn’t have to write.

But that’s not the important thing

Well, it is important – performance matters a great deal. What’s really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development.

Consider interoperability. Want to npm install cool-calendar-widget and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if cool-calendar-widget was built in React and you’re using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)

Or code splitting. It’s a great idea (only load the code the user needs for the initial view, then get the rest later), but there’s a problem – even if you only initially serve one React component instead of 100, you still have to serve React itself. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny.

Finally, something I’ve wrestled with a great deal as an open source maintainer: your users always want their features prioritised, and underestimate the cost of those features to people who don’t need them. A framework author must always balance the long-term health of the project with the desire to meet their users’ needs. That’s incredibly difficult, because it’s hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn’t important enough. But with an approach like Svelte’s, many features can be added with absolutely no cost to people who don’t use them, because the code that implements those features just doesn’t get generated by the compiler if it’s unnecessary.

We’re just getting started

Svelte is very new. There’s a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on.

But you can already build rich components with it, which is why we’ve gone straight to a stable 1.0.0 release. Read the guide, try it out in the REPL, and head over to GitHub to help kickstart the next era of front end development.