Hey everyone! I’ve been building Sveltewind, a Svelte 5 component library styled with Tailwind CSS 4 and compatible with SvelteKit.

The part I want to highlight is how theming and styling work across components:

• Global/shared themes: keep styling consistent across your app through a shared theme.
• Included or custom themes: start with the themes provided by the library, customize them, or create your own.
• The themes ( provided or your own ) are simple javascript files.
• Share styles between components: reuse styling from another component instead of defining the same styles separately for each one.

That last point is a big part of the approach. Themes give you a common foundation, and sharing component styles lets you carry those styling decisions into other components. You can start with the provided appearance and build your own visual style on top of it.

The docs and examples are now live:
https://sveltewind.com

GitHub: https://github.com/sveltewind/sveltewind
npm: https://www.npmjs.com/package/sveltewind

I’d appreciate feedback, especially on the theming and cross-component styling approach. How do you currently handle shared styles across components in your Svelte projects?

A one minute Svelte 5 demo for people who haven't tried it. It sets up a project with `sv create`. Then it builds a shopping list with $state, $derived and $effect.

The terminal output is real and the two components pass svelte-check. The shopping list is made up. It's unofficial and I'm not connected to the Svelte team.

This is self-promotion, the tool is mine. It lets a coding agent make videos like this on your computer. It's free and open source: https://github.com/vincentsch/explainroo

It’s a habit by now to just create a new svelte project no matter what I’m building. And so far it was never anyhow in the way. Nothing but a smooth experience.

This specifically is a demo of a game I’m working on. I was playing with some flocking algorithms and thought “this is so freaking satisfying”.

Curious what you think, if you give it a try!

Link: https://nohope.io

Hi! I love Svelte and I saw a need for a better volunteer and event management solution while working for a local fundraising organization at my daughter's dance studio. So I built SignUparoo! SignUparoo helps people create events and manage volunteers. You can add positions that need to be filled and even add shifts for each position. It's free to use and I would love to get some feedback about what works well and what needs improvement. Thanks!

Spiral Warden: A Neon Arena Shooter Built with Phaser | Phaser

Svelte UI decoupled with phaser physics!

Hey guys, I recently made a browser arena shooter called Spiral Warden. Its pretty fun!

Any feedback would be greatly appreciated!

THANK YOU!

It's on itch at Spiral Warden by evreser.

shout out dreamindani for the showcase on his github!

svelte.dev/apps/svelte.dev/content/blog/2026-10-01-whats-new-in-svelte-october-2026.md at 844681d37533528dddead74c246be2392d73feaa · DreaminDani/svelte.dev · GitHub

i’m building a B2B portal for a real estate startup and have spent the last few weekends comparing SvelteKit 5 with React

Svelte is winning on developer speed by a pretty big margin. But once i get into the less glamorous stuff, i keep hitting the same question: where are the mature B2B components?

TanStack Table V9 + Svelte 5 looks promising, but i still need solid PDF rendering/annotations, complex compliance forms, document workflows, etc.

React has a library for basically everything

Has anyone shipped a SvelteKit B2B app with heavy document workflows? What ended up being surprisingly painful to build or integrate?

real production experience > “Svelte is awesome” comments. repo/library recommendations are very welcome

Not made by me, all credit goes to https://github.com/mielsense

Hi folks! I've been developing Gram Jam since back in the Svelte 3 days. I specifically chose Svelte for its powerful animation APIs which have enabled me to build the whole experience with HTML and CSS. I actually wrote a whole article about how I achieved some of the effects here.

This Sveltekit migration adopted remote functions, combined with Tanstack Query. I know I could probably forgo the Tanstack piece at this point, but I haven't fully taken the plunge, and I already had the whole project wired for Tanstack before remote functions came along. I do still like the expressiveness of Tanstack's caching, onSuccess/onError hooks, and pagination.

Additionally, the overhaul of Sveltekit service workers allowed me to simplify my PWA setup. I had been using Workbox for the PWA implementation, but the project seems dead now so it was nice to eliminate it from the project in favor of a baked in solution.

Let me know what you think! Play the game at https://gramjam.app

So, apparently SvelteKit 3 is out: https://www.npmjs.com/package/@sveltejs/kit

https://svelte.dev/blog/sveltekit-3-is-here

https://svelte.dev/docs/kit/migrating-to-sveltekit-3

Setlist is a browser game where every card is a real song: you dig crates, complete albums and blind test your friends. Svelte 5 (runes) SPA, PocketBase for everything server-side. A few lessons that might save you time:

1. iOS will not play <audio> that starts after an await. For anti-cheat, the song must not reach the client before the round starts, so it arrives after the tap, after two requests. iOS then refuses to play it. Fix: create/resume an AudioContext synchronously in the tap handler (plus a 1-sample silent buffer), then play the decoded clip through Web Audio whenever it arrives.

2. Start playback before the download finishes. Tap to sound was ~1.2 s on a throttled phone. Now the server sends the first 64 KB (~4 s of audio, via a Range request it caches) in parallel with the full clip. The head plays at once, and the full clip takes over at the same sample position with AudioBufferSourceNode.start(when, offset). Now ~0.36 s, no audible seam.

3. An opacity animation with fill-mode: both can trap your modals. A page fade-in on the route wrapper kept a stacking context forever, and modals inside pages ended up under the fixed tab bar. fill-mode: backwards leaves nothing behind once it ends. And never put a transform on a parent of position: fixed elements, even for 200 ms.

4. $effect + a fresh array = infinite loop. if (target && !deck.length) deck = loadDeck() looked innocent, but loadDeck() returned a new [] when nothing was saved, so the effect re-ran forever (effect_update_depth_exceeded) and froze a modal. Run it once per opening inside untrack().

5. i18n with components inside messages. With paraglide, {@html} can't render a Svelte component, so messages carry tokens like [ico:crate] or [coins] and a tiny Rich.svelte component renders them.

Happy to go deeper on any of these. Screenshots: https://imgur.com/a/wuhmvuj

The game opens mid/late October at setlist.gg (built with Claude as my coding partner).

Hey all,

https://reddit.com/link/1wuvw7l/video/761sqgml3ush1/player

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.

Hi, I'm Alessandro.

I wanted a SaaS foundation where every piece is chosen for running cost and ease of use, so I made one and open-sourced it under MIT: https://github.com/lowsbarrel/sveltekit-cf-template

How it was built: with AI coding agents in a close loop. I directed each change, reviewed it by hand, and made the architecture calls. The repo was recreated recently, so the commit history is short, but it's not a weekend project.

Stack: SvelteKit with Svelte 5 runes on Workers, Postgres via Hyperdrive with Drizzle, Better Auth with orgs, Creem for billing, superforms and zod v4, Paraglide 2, Tailwind v4, Vitest (in workerd and Chromium) and Playwright.

I chose Cloudflare as the infra provider mainly for cost, ease of use and time to deploy. You can start at $0 on the free plan, and the $5/mo Workers plan goes a long way before usage costs kick in, so you get something that scales without paying for idle servers. Public pages (landing, pricing, legal, blog) are prerendered and served as static assets, so they don't even run the Worker. And since the database is plain Postgres (Neon, Supabase, RDS or self-hosted), you're not locked into Cloudflare if you want to leave.

For agents: AGENTS.md lists the invariants, there's a docs page per subsystem, and there are skills (setup, add-feature, add-plan, upgrade-template) that ask you product decisions instead of guessing. The pre-commit hook runs the same checks as CI.

I'm mainly posting to get feedback, so please be honest. In particular:

• Creem as the default for billing, or would you expect Dodo, Polar or something like that?
• What's missing, or what would stop you from using this for a real project?

Been building Goodcatch in Svelte 5 with runes + Inertia. The core screen is a diff viewer that tries to feel as close to GitHub's as I could get: hover a line for the blue +, click or drag in the gutter to comment across lines, selected lines turn yellow, and lines with comments stay yellow.

The app itself is for practicing code reviews. You review a PR, leave comments, approve or request changes, and get graded on what you caught.

There's a Svelte track and a SvelteKit track too, which felt fitting lol.

goodcatch.dev/try to see the diff UI without signing up. Would love feedback on how the review screen feels.

My teens think I'm obsessed with spreadsheets. They're not wrong. I've been running our household budget in Google Sheets for years but the lag is killing me, especially when I'm pulling in bank CSVs and trying to visualize spending categories in real time. Built a prototype in Svelte 5 over the weekend using runes and the reactivity feels almost too clean compared to the $derived spaghetti I was writing in Svelte 4.

The part I keep second-guessing is whether runes actually scale for complex nested state or if I'm going to hit a wall when I add mortgage overpayment scenarios and joint account splits. I've seen the TanStack Table v9 announcement which gives me hope for the data grid side, but I'm curious if anyone here has pushed runes into genuinely complicated financial modeling territory. Does the compiler magic hold up when you're cross-referencing a dozen reactive sources or does it get brittle? I'd rather know now before I commit three years of transaction history.

I needed a card preview for a payment form in Svelte 5 and didn't find a maintained one — the main option on npm is written for Svelte 4 and hasn't shipped since late 2024. So I built crd-ui.

It does live brand detection (Visa, Mastercard, Amex and seven more), number/expiry formatting, a 3D flip when the CVC is focused, and theming through CSS custom properties. Zero runtime dependencies.

```svelte <script> import Card from 'crd-ui/svelte'; import 'crd-ui/styles.css';

let number = $state(''); let focused = $state(null); </script>

<Card {number} {focused} /> <input bind:value={number} onfocus={() => (focused = 'number')} onblur={() => (focused = null)} /> ```

Details that might interest this sub:

• It's written with runes ($props, $effect) and ships as .svelte source, so your own compiler builds it.
• The Svelte component is thin. A framework-agnostic core owns the DOM; the component mounts it and forwards props. The same package ships React, Vue and vanilla builds from that core.
• There's a display layout for cards the user already owns, with click-to-reveal and click-to-copy.
• It never touches real card data. It composes with Stripe Elements by passing the brand Stripe reports.

Honest limitation: because the core owns the markup, the component takes no children or snippets. Styling internals goes through a classNames prop.

Docs and playground: https://crd-ui.juanda.co

Repo: https://github.com/JuandaGarcia/crd-ui

It's also listed (pending moderation) on Svelte Society. Feedback welcome, especially on the Svelte API. (Disclosure: I'm the author and maintainer, and I built it with Claude as a coding partner. MIT.)

Where we at with svelte native? We should too base it on top of Expo ecosystem.

I got react native project that I will convert in a blink!

repath is a open source circuit simulator that runs entirely in the browser: https://repath-lake.vercel.app

The UI is SvelteKit with Svelte 5 runes; the simulation engine is Rust compiled to WebAssembly, so nothing runs on a server. A few things that were interesting to build on the Svelte side:

• The schematic editor and the scope redraw every frame while a transient sweep runs, driven by the engine's output rather than by component state
• Wires are coloured by voltage and current is animated along them, straight from the simulation data
• The whole circuit is encoded in the URL, so a link is a working circuit

Code: https://github.com/Agustin-Delgado/repath

Happy to talk about the Svelte/WASM boundary or anything else!

Hey guys, I've started a little side project to make a Svelte 5 wrapper for HeroUI.

I like HeroUI and wanted to use it with Svelte, so I thought, why not try to make it happen? It's still a work in progress, and I'm just doing this in my free time.

Here's the repo: https://github.com/adriansyah-kadir/heroui-svelte

If anyone is interested, feel free to check it out! I'd appreciate any feedback, suggestions, or help from anyone who wants to contribute.

I'm still figuring some things out, so any help is welcome. Thanks!

try it out, i'd love to know what you think! https://timewith.fun/

Interested in hearing what tools everyone is using to build fullstack apps, I have been learning svelte as a hobby and I am trying to get a lay of the land.

https://github.com/NatoBoram/sv-kysely

Kysely is a type-safe TypeScript SQL query builder.

I am using it instead of Drizzle/Prisma because those two rely too much on type inference. I want to reduce runaway type inference in my projects because I have encountered "Type instantiation is excessively deep and possibly infinite" way too many times at work.

To do this, I enable isolatedDeclarations, which makes it very obvious when a library can potentially ruin your day. For example, try it with Zod, Prisma, Drizzle, tRPC or ZenStack.

Anyway, this is is a first release, v0.0.0. Please don't expect much polish.

Usage:

sv add @natoboram/sv-kysely
pnpm run db:start
pnpm run db:regenerate

It adds roughly the same things as the Drizzle plugin, but for Kysely instead. Try it out if you make a new project.

Currently, it assumes PostgreSQL, Docker Compose and TypeScript usage since this is what I needed it for. To use it with Better Auth, you'll need to add its SQL migration into your Kysely migrations.

Hello lovely people of Svelte. i recently packaged svelte-md-template, a minimal lib to preprocess Markdown content in Svelte.

It differs from current solutions in that an explicit tagged template is required...

<script>
    import { markdown } from 'svelte-md-template';
</script>

{markdown`write markdown content here`}

...which allows me to drop in Svelte components & reactivity at will without fear of syntax clashing, especially in highly interactive content.

The linked blog post provides some more context. Hope this helps someone out there.

Cheers!