Login

r/sveltejs

▲ 5 r/sveltejs

Lightweight alternative to better-auth for simple OIDC authentication + access tokens + sessions?

Typically, our apps look like this: SvelteKit as bff, .net backend that does the heavy lifting (Bearer token auth), Keycloak or Entra ID handling users and issuing ID/access/refresh tokens. The SvelteKit app authenticates users with Keycloak/Entra, creates a db backed session (session id in cookie) and stores encrypted access/refresh tokens that are used to access the .net API from the SK server side only.

Our implementation uses oidc-client for the critical OIDC stuff and hand rolls session management and race condition free token refresh. Maybe 400 lines of user land code including the Drizzle db schema.

While I don't mind the free hundred LOCs we basically copy over to the next project, I'm always looking to reduce boiler plate code.

So I had a look at better-auth, as it's a "blessed" lib in SvelteKit land. But man is it bloated for my use case. I don't need a client side lib and I certainly don't want all those API endpoint exposed without a simple way to disable them. I don't need user management, we have Keycloak for that. It does session management but is not able to refresh tokens in a way that handles race conditions when refresh tokens are single use. And instead you get dependencies to a lot of libraries of dubious necessity.

Arctic doesn't add much to what we can easily do with oidc-client. It does not add session management.

So is there something you people use that does this:

- implement OIDC login

- securely store access/refresh tokens

- implement sessions (db storage + cookie)

- handle token refresh with single use refresh tokens

Or am I better off rolling our own solution, which hands down works flawlessly and only adds oidc-client as a dependency?

reddit.com
u/pico2000 — 11 hours ago
▲ 96 r/sveltejs+1 crossposts

LayerChart 2.0 Released

Sean Lynch

This includes the Svelte 5 rewrite, CSS framework agnostic, improved API and state, numerous new components and chart types, and so much more!

u/thebreadmanrises — 2 days ago
▲ 55 r/sveltejs

Motioner — a Figma-style design tool where every frame is also an animation timeline (built with SvelteKit + Svelte 5)

My cofounder Chike (@zellzoi) and I have been building Motioner (motioner.app) with SvelteKit + Svelte 5, and it just hit public beta! Figured this sub might like to see it.

It's a browser-based design + motion tool. You get a real vector editor — pen, booleans, components, auto-layout, proper typesetting — the stuff you'd expect from a Figma-class canvas. The core function is the animation. Open any frame and it becomes a timeline. Add layers, keyframe any property, tune the easing, hit play. Design and animation live in the same file instead of exporting between two apps.

It's multiplayer (real-time, shared cursors, autosave) and runs entirely in the browser — nothing to install. Free to start with unlimited files; there's a $10/mo Pro tier for 4K/ProRes export.

We're a small team and still early, so we'd love feedback — on the app itself or how it feels to use. Happy to answer anything about how it's built, too.

u/Asleep_Struggle4443 — 2 days ago
▲ 13 r/sveltejs+1 crossposts

viteenv.nvim — see your Vite env values inline, per mode

When reading React/Vite code, I could never tell at a glance what import.meta.env.VITE_... actually resolves to — and it's different per mode (development, production, staging, etc.).

So I built viteenv.nvim: it shows the effective value inline, right at the end of the line.

The idea: instead of re-implementing env parsing, it delegates to your project's own Vite (resolveConfig + loadEnv) via a small Node sidecar. So the cascade (.env → .env.local→ .env.[mode]), dotenv-expand, custom envPrefix, and define all match exactly what Vite actually produces — and it stays correct across Vite versions.

What it does:

  • Shows every mode at once. If all modes agree it collapses to one value.
  • Modes are auto-discovered from your package.json scripts (--mode) and .env.* files.
  • Treesitter-based, so it ignores references inside comments/strings.
  • Live: a filesystem watcher refreshes the moment you edit a .env.

It's brand new, so feedback / bug reports very welcome.

u/Difficult-Apricot-79 — 3 days ago
▲ 2 r/sveltejs+2 crossposts

Meet Dotient - Your local, private, semantic search app. [SELF-PROMO]

App will be available for $5 in a few days. Made with sveltekit, typescript, rust, and a little bit of love.

u/CuriousClump — 3 days ago
▲ 32 r/sveltejs+39 crossposts

Made a free iOS app to open and read raw Markdown (.md) files on iPhone/iPad — handy for peeking at Logseq pages outside the app

Logseq stores everything as plain .md files, but if you ever open one of those files directly on iOS (from Files, iCloud, Dropbox, a backup, etc.) you just get raw text. I built a small viewer to read them rendered on a phone.

Md Preview:

• Renders GitHub-Flavored Markdown — headings, tables, task lists, footnotes

• Code blocks with syntax highlighting, plus LaTeX math and Mermaid diagrams

• Opens .md / .markdown / .mdx / .rmd / .qmd from Files or the Share Sheet

• 100% on-device — no account, no uploads, no ads, no subscriptions

Free on the App Store: https://apps.apple.com/app/id6760341080

Details: https://markdown.cybergame.ai/

Not a Logseq replacement at all — just a quick way to read loose .md files when you're away from the desktop app. Curious how you all read your graph on the go.

u/Fujima4Kenji — 5 days ago
▲ 34 r/sveltejs+1 crossposts

AMUS – A modern desktop music player built with SvelteKit and Tauri

I've been building AMUS, a fast, privacy-focused desktop music player for people who own their music library.

The idea was to make something that seemed modern without relying on streaming services or transferring data online. Everything works totally offline, and the software is intended to remain lightweight and responsive even with enormous libraries.

Highlights

  • 🎵 Supports MP3, FLAC, WAV, OGG, M4A, AAC and OPUS
  • ⚡ Fast incremental library scanning with automatic metadata extraction
  • 👀 Real-time file watching for added, modified and deleted tracks
  • 📊 View listening statistics, including play counts, trends, heatmaps, streaks, and library growth.
  • 📂 Playlists, favorites and queue management
  • 🖼️ Automatically fetch artist images
  • 🖥️ System tray support and background playback
  • 🎧 Mini player
  • ⌨️ Fully customizable local and global keyboard shortcuts

Tech Stack

Layer Technology
Desktop Tauri v2
Frontend SvelteKit 5
UI shadcn-svelte, Tailwind CSS v4
Backend Rust (rodio, rusqlite, r2d2, lofty, rayon, notify)

Github - AMUS

u/Top-Forever2017 — 4 days ago
▲ 228 r/sveltejs

Rich Harris on AI & Svelte: Hype vs Reality in Framework Development

Rich Harris shares his honest take on how AI has (and hasn't) changed his workflow building Svelte. From using AI as a code reviewer rather than a code generator, to setting up the official Svelte MCP server for better AI agent performance, he breaks down what actually works — and what doesn't. He also raises bigger-picture concerns: are companies underinvesting in junior developers? Are we handing too much autonomy to a handful of Silicon Valley AI providers? Harris makes the case for local models and a more democratized AI ecosystem.

youtu.be
u/SnooChipmunks2539 — 8 days ago
▲ 6 r/sveltejs

building a Gantt chart in Svelte, have some questions

Working on a small project management tool in Svelte and I got pretty far with a basic timeline component, but dynamic task updates are where things started falling apart. Dragging to reschedule, updating dependent tasks, that kind of thing.

I spent a while looking at different options and im now testing a javascript gantt chart library, wrapped in a Svelte component using onMount. It actually works, but I'm not 100% sure I'm handling the destroy/cleanup correctly when the component unmounts, and reactive updates feel a little clunky right now.

So practically speaking: are you binding the gantt instance to a store, or just keeping it local to the component? And when task data changes from a parent, are you calling clearAll and reparsing, or is there a cleaner pattern people are using here? fwiw I'm on Svelte 4, not 5 yet.

u/mushroomsoup20 — 7 days ago
▲ 89 r/sveltejs

Svelte... is a little too easy to build

Im so used to have friction when doing software development

I first started programming on a DSi on this app called petite computer coding in BASIC. Typing each character with my stylus to make simple calculator apps or snake clones.

Then I migrated to learning how to program Arduino, took a hiatus then in college got to leverage ESP32s and eventually designed an esp32 based macropad "timer", pcb and all, and still the most tedious part was programming the thing.

Developing software for hardware was so tedious, whole days dedicated to debugging 1 issue, ofc when I finally got that rotary encoder working or display working how it should it was great but my goodness it took a minute.

Now getting into web dev especially in the Coding Agent Era bro its actually crazy. I didn't learn react or any other framework, I just went straight from learning HTML CSS and JS right to Svelte and TS and 1 year later i've probably started 20 half baked projects !

Shoutout to svelte, going from embedded software to web dev has been such a seamless transition due to the straightforward nature of the framework.

reddit.com
u/Public_Tomorrow_1115 — 10 days ago
▲ 9 r/sveltejs

Struggling to undestand how to use boundaries and update state in UI

I've been learning Svelte lately and I'm playing around with remote functions and the new way to handle async Svelte, but now I'm facing a problem that makes me not understand how svelte:boundarys work with async code and how to state is updated.

The simplest version of what I have is something like this:

{#each await getCatedras(materia.codigo) as catedra (catedra.codigo)}
  <button class="block" onclick={() => (codigoCatedraSeleccionada = catedra.codigo)}>
    {catedra.nombre}
  </button>
{/each}

{#if codigoCatedraSeleccionada}
  {codigoCatedraSeleccionada}
{/if}

Where codigoCatedraSeleccionada is defined with $state in the script tag above this template. This works well. The UI reflects the state changes properly as I click the buttons to change its value using the catedra.codigo values returned from the awaited remote function.

However, as soon as I wrap everything in a boundary to try to render a pending snippet, the if block that print to state stops getting updated:

<svelte:boundary>
  {#snippet pending()}
    Loading...
  {/snippet}

  {#each await getCatedras(materia.codigo) as catedra (catedra.codigo)}
    <button class="block" onclick={() => (codigoCatedraSeleccionada = catedra.codigo)}>
      {catedra.nombre}
    </button>
  {/each}

  {#if codigoCatedraSeleccionada}
    {codigoCatedraSeleccionada}
  {/if}
</svelte:boundary>

I $inspected the state to see whether it was still changing or not, and indeed it is still changing as shown in the console, so I guess it makes no sense for it to not be updated in the UI.

I even tried to destroy and remount the part of the component that outputs the state with #key but it doesn't work either:

  {#key codigoCatedraSeleccionada}
    {#if codigoCatedraSeleccionada}
      {codigoCatedraSeleccionada}
    {/if}
  {/key}

I also tried wrapping everything within the scope of the key block in another boundary.

What's the issue here? Seems like I'm misunderstanding what boundaries are all about.

reddit.com
u/regexPattern — 8 days ago
▲ 8 r/sveltejs

Update: Product Plate v0.1 - open-source SvelteKit starter + AI agent kickstart prompt [Self-Promotion]

I posted an earlier version of Product Plate a few days ago. I've since tightened it into a proper v0.1!

Product Plate is an open-source SvelteKit starter for hackathons, product apps, and early SaaS ideas.

The main change is that I'm trying to make it more than "a starter with a lot of integrations".

The workflow is now:

  1. clone the repo
  2. try the hosted disposable demo
  3. run the START_HERE.md prompt with an AI coding agent
  4. answer what product you're building
  5. let the agent recommend what to keep/remove
  6. end up with a first version of your actual product, not a renamed starter with random demo routes (or just the main theme/idea/landing page well set up if you don't want the agent to actually build you the product and make business decisions)

What changed since the first post:

  • shorter, clearer README
  • better v0.1 release docs
  • stronger START_HERE.md kickstart prompt
  • productization rules for logo/assets, routes, copy, tests, demo cleanup, and provider cleanup
  • hosted disposable demo account
  • clearer roadmap issues

Stack:

SvelteKit 2, Svelte 5, Convex, Better Auth, Autumn, Superforms/Zod, Tailwind v4, shadcn-svelte, AI SDK, Bun, Cloudflare Pages, Vitest, Playwright.

Repo: https://github.com/rodrgds/productplate

Demo: https://productplate.pages.dev/auth/demo

Reference landing page components you can use: Demo: https://productplate.pages.dev/components

I'd especially like feedback on:

  1. Is the "starter + AI kickstart prompt" idea clear/what are your thoughts on it?
  2. Is the default stack too opinionated, or useful?
  3. What would make you actually fork this for a weekend product?
u/Kraktoos — 9 days ago
▲ 18 r/sveltejs

Ever want to just group similar looking things together? Well now you can, completely local and offline. [Self-Promotion]

My app, has a lot of features. This is just one of the many. But besides using my vision and text models for searching purposes, why not also use it for grouping purposes. Here I showcase exactly that!

https://dotient.com

u/CuriousClump — 10 days ago
▲ 68 r/sveltejs+3 crossposts

jscpd v4.2.0 just landed with Svelte support — thought this community might find it useful! 🧹

Hi everyone! 👋

I'm fairly new here, so I hope this kind of post is welcome — please let me know if there's a better place to share it!

I just wanted to give a heads-up that jscpd v4.2.0 has landed with official Svelte support, and I thought the community might find it genuinely useful.

What is jscpd?

If you haven't come across it before, jscpd is a copy/paste detector for source code. It scans your project, finds duplicated blocks across files, and reports them — a really handy tool for spotting technical debt before it piles up. It supports 150+ languages and formats, and now .svelte is officially one of them.

Why does this matter for us?

Svelte's component model makes it wonderfully easy to build UIs quickly — but in larger projects it's easy to accidentally duplicate logic across components: repeated event handlers, similar reactive declarations, copy-pasted template sections. Having a tool that understands .svelte file structure (rather than just treating them as plain text) means you can actually catch those patterns automatically.

Getting started is pretty simple:

npm install -g jscpd
jscpd --format svelte ./src

You can also add it to your CI pipeline with a threshold to fail the build if duplication gets too high:

jscpd --format svelte --threshold 5 ./src

I've been wanting this for a while in my own Svelte projects, so I was really happy to see it land. Huge thanks to the maintainers for making it happen! 🙏

Full changelog here if you're curious: https://github.com/kucherenko/jscpd/blob/master/CHANGELOG.md

Hope this is helpful to someone — happy to answer any questions if I can! 😊

u/Affectionate-Blood92 — 14 days ago
▲ 2 r/sveltejs

Thoughts on VisuallyJs for Svelte flow builder?

I've just been tasked with making a flow builder with Svelte 5. I need to be able to draw out the main flow and let users select groups of nodes and show them in a separate view. I'm wondering if anyone has any experience with https://visuallyjs.com/svelte for this kind of thing? Looks pretty new and I don't see a lot of people talking about it but there's a bunch of good demos.

u/andremiller-ag — 12 days ago
▲ 14 r/sveltejs

I built a dynamic SVG generator for GitHub READMEs using Svelte 5 and SvelteKit SSR

https://reddit.com/link/1ue452p/video/cjtn01xbx59h1/player

Hey Svelters!

I wanted an animated Star History chart for my GitHub READMEs. Existing tools mostly generate static PNGs or rely on JS (which gets stripped out by GitHub's image proxy).

So I decided to build one myself using Svelte 5 and SvelteKit!

How it works:

  • It uses a +server.ts endpoint to fetch the GitHub API and renders a StarGraphSVG.svelte component on the server using Svelte 5's render function from svelte/server.
  • To bypass the JS limitation on GitHub, all the line drawing and "pop" animations are done entirely via Pure CSS -@keyframes embedded directly inside the SVG component's <style> block.

It works perfectly natively inside any markdown file!

Source Code: https://github.com/YusufCeng1z/star-history

 Live Web App: https://starhistory.link

I had a blast using Svelte 5 runes ($state, $derived) and SSR for this project. Would love to hear your feedback on the architecture or the code!

reddit.com
u/soyluhaliyikama — 12 days ago
▲ 44 r/sveltejs

ProductPlate -- an open-source SvelteKit SaaS starter with Convex, Better Auth, billing and AI [self-promotion]

Hey, I've been working on a SvelteKit "SaaS" starter because I kept rebuilding the same setup for basically every project: auth, billing, dashboard, settings, onboarding, deployment, etc.

It's called Product Plate. It's MIT licensed and fully open source.

Stack:

  • SvelteKit 2 + Svelte 5
  • Convex
  • Superforms + Zod
  • Better Auth
  • Autumn billing
  • Tailwind v4 + shadcn-svelte
  • Vercel AI SDK
  • Bun
  • Cloudflare Pages
  • Vitest + Playwright

It includes actual product routes: landing page, auth, onboarding, dashboard, AI assistant with tools, billing, settings, profile upload with camera/crop, WYSIWYG editor, 2D node graph, Threlte 3D demo, and PWA setup. The editor, node graph and 3D stuff are easily removable, I just added them mostly because this was a hackathon starter project and I wanted to have most of these things ready to use, responsive, and theme-respecting (looking great with the rest of the app).

Repo: https://github.com/rodrgds/productplate
Demo: https://productplate.pages.dev

It's still pre-v1. I'm sharing it early because I usually ask for feedback way too late.

A lot of it was built with coding agents (the "vibe coding" as they call it), but reviewed and shaped manually. Agent docs/skills are also set up, including Svelte MCP usage.

Next things I’m thinking about:

  • better landing page components
  • better SEO defaults
  • easier project initialization (maybe a CLI that asks for name/description/path/assets and rewrites the boilerplate starter cleanly? Or some sort of PROMPT.md for starting out with a coding agent?)

I built this mostly because most of the SvelteKit SaaS templates are Supabase-based, and I'd rather use Convex for a more server-side, code-declarative setup. I worked on a pretty large-scale project with Supabase and doing rules on the database is pretty much only fun on the start haha

Question for Svelte people: what would make you not use this for a real project? What’s missing? What would you change?

u/Kraktoos — 14 days ago
▲ 0 r/sveltejs

SvelteKit vs. Remix v3

Has anyone checked out the beta for https://remix.run re-launch.

The thing these have in common which attracted me to it is a react-free world.

Would you make the switch if Remix v3 starts to gain momentum or are there any fundamental flaws?

u/DoubleGravyHQ — 12 days ago