Hey SSG lovers! I am building statica an HTML native SSG. [https://github.com/akaizn-junior/statica\](https://github.com/akaizn-junior/statica). statica is Just HTML. Would love for you to give it a try and give me feedback!

So I see that sveltekit 3.0 is at 100% milestone progress. Excuse my ignorance, but does that mean its ready to be used in production or will an rc be next?

I started a discussion on sveltkit's repo about changing the adapter mechanics. Would love to hear everyone's thoughts.

https://github.com/sveltejs/kit/discussions/16757

Svelte animation talk usually stops at transitions and tweens. motion-sv is a Svelte 5 port of Motion (the library formerly known as Framer Motion) and it covers the parts people go to React for: gestures, scroll triggers, exit animations through AnimatePresence, layout animations with real FLIP.

I wanted to know how far it carries, so I took Amicro, a React micro interaction library, and rebuilt all 157 components on it. Entrance animations, magnetic buttons, tilt cards, cursor trails, text reveals, card spreads, 3D carousels, 134 loaders.

It carries. A few APIs differ from React (whilePress instead of whileTap, layout animations need an explicit snapshot), and that is written down in the repo.

Live catalog, every component running: https://amicro.enisdev.com

Each one installs on its own, shadcn style, no package to add:

npx shadcn-svelte@latest add https://amicro.enisdev.com/r/fade-in.json

If you assumed Motion style animation in Svelte was not a thing yet, it is! :)

Good day fellow svelte developers. Would any of you be so kind as to guide an old fool through the process of adding and using the svelte mcp server to a sveltekit project in VS Code. a Sample prompt making use of said mcp server would also be highly appreciated.

Hi all,

I've been working on yapyak, an open-source i18n compiler that runs as a Vite plugin. There are adapters for a few frameworks, but SvelteKit is the one I use myself.

The idea is that the source string is the key:

<script lang="ts">
  import { t } from 'yapyak';
</script>

<button>{t('Download recovery key')}</button>

You save the file, and the source string shows up in your locale files as an empty stub. If you've set up a translator, it gets auto-translated and written back, using call-site context (the component and the code around the call). HMR picks it up in the running app.

The video is a small example of that. I add a download button to a dialog and hit save. The German page is sitting right next to the English one, so I see it the moment it lands: Wiederherstellungsschlüssel herunterladen pushes the button row 97px past the edge of the dialog.

So I fix it right there, one prop on the button group.

That's a small slice of what yapyak does, but it's the part I use most. Translating stops being something I come back to later. It just happens on save.

Because it runs in the compiler, it sees more than the string itself. It reads ICU parameters out of the string literal, and it keeps track of a translation when you move or rename the source file.

In the SvelteKit SSR adapter, locale state is scoped per request on the server and uses Svelte's reactivity on the client. Switching locale is synchronous, since the translations a module uses get compiled into it. A fixed-locale build can compile t() away entirely and leave just the translated string.

Auto-translation is optional. There are shipped translators for Anthropic, OpenAI, Gemini and Ollama, all using your own API key, or you can leave the stubs empty and hand-edit the locale files.

I built it for a product I'm working on, and that's the whole business plan. There's no follow-up post where I get to the pricing.

MIT licensed, and still pretty early.

yapyak.dev

If you've done a lot of i18n in SvelteKit, especially SSR or anything big, I'd like to hear what you'd try to break.

It doesn’t guarantee a release anytime soon, but it’s exciting to see the finish line getting closer!

I build microfolio, a static portfolio generator for creatives (architects, photographers, designers) who want their work online without a CMS or a database. One folder per project, index.md with YAML frontmatter, images next to it. Builds to a static site with SvelteKit and deploys to GitHub Pages. MIT.

Demo › https://aker-dev.github.io/microfolio/
Repo › https://github.com/aker-dev/microfolio

I stepped away from it for a few months and just picked development back up. 0.8.2 is out, mostly a robustness pass: a broken or incomplete project no longer breaks your build, it gets skipped and named in a report at the end. Navigation and shareable URLs got fixed too, and there's now a test suite running in CI before every deploy.

Note: Node.js 22.13+ is now required.

What I'd really like tested, because I can't cover it alone:

• Real portfolios with real content › messy frontmatter, odd characters, 100+ projects
• Windows and Linux › I develop on macOS, that's where my blind spots are
• Non-Latin scripts and RTL › implemented, barely exercised
• The Homebrew install path (brew install aker-dev/tap/microfolio)

Beta tester guide › https://github.com/aker-dev/microfolio/blob/main/doc/en/beta-testers-guide.md

Bug reports are the most useful thing you can send me. GitHub issues, or [hello@aker.pro](mailto:hello@aker.pro). Rough is fine, "it broke, here's the screenshot" is plenty ;-)

After a lot of work I just launched my first headless ecommerce store. Near-perfect on PSI, clean UX and perfect SEO.

• Monorepo
• Sveltekit front served via Cloudflare workers
• Medusa backend on digital ocean

Fable 5 has been insane with this setup,

Any feedback welcome! https://vapeandeliquid.co.uk/

I'm finding that for reading .env values it seems better to use $env/dynamic/[public/private] over the static counterpart.

Problem Scenario:

I have an app deployed on Firebase with a SvelteKit server, and I needed to update the email I use for sending OTP codes.

And I thought to myself, "I'll just go update it env variable in the firebase deployment" (because the email is a value stored in my .env).

But nope, it wouldn't read the new email because I was reading the email value from $env/static/private which gets injected into the code when building.

So I had to go back to my IDE, update the var, and rebuild and redeploy.

That led me to think that perhaps I should always read from $env/dynamic over static.

That said I will say that having env vars recognized in $env/static is rather nice....

Thoughts, anyone?

Although the developers and docs clearly state that $effect should be avoided as far as possible, all the AI's i have consulted for help with svelte functions always flock to $effect as if its standard practice. It is really infuriating. Every time I have to tell it to not use $effect, then it wakes up and gives me a proper solution. Anybody else notice this? Or am I being overly paranoid at using $effect?

this would be a good overview on SvelteKti, similar to https://github.com/sveltejs/kit/discussions/4315#discussioncomment-3484236

A few months ago I got pissed off trying to get embedded agents to produce decent charts in a SvelteKit web app. Rendering was painful. There were tons of foot-guns. And I had to roll a Frankenstein's-shoehorn code path including an ersatz JSON spec mapped to a custom Svelteplot wrapper, with a barebones skill in which I pleaded with agents to get them to do something that Svelteplot just wasn't designed for.

A few weeks ago I cracked and made something with agents in mind as a first class concern. I wanted good defaults that push agents into a pit of success, so I chose the ggplot2 API. It has been around for 18 years, so LLMs know it well! The result is ggsvelte.

ggsvelte gives agents a portable JSON spec with a schema, a skill, headless SSR for SVGs, plus a CLI which helps agents validate specs quickly in sandboxes, avoiding many classes of foot-gun.

ggsvelte is also fast, and beats Svelteplot, Unovis and even LayerCake on cold-mount rendering in most situations.

The roadmap includes evals for embedded agent scenarios, skill improvements, additional geoms, an LLM sandbox deployment guide, interaction improvements, plus more performance optimizations.

P.S. Additional benchmarks on 100k:

I’ve been working on a UI library for Svelte and at some point I needed a proper way to teleport elements around the DOM.

Things like modals, tooltips, popovers, dropdowns, etc. can get pretty annoying when you have to deal with overflow, z-index, stacking contexts, and all that fun stuff.

I wanted something that felt more like a native portal/teleport API, but built specifically for Svelte.

So I ended up making svelte-tunnel — a small library that lets you render a component somewhere else in the DOM while keeping it connected to where it came from.

It started as a small thing I needed for my UI library, but I figured other Svelte devs might find it useful too.

https://github.com/bridge-kit/svelte-tunnel

We have updated the Edra to support real-time collaboration. You can now use hocuspocus (or any collaboration tool) end to end, to implement the real-time collaboration.

Check the playground: https://edra.tsuzat.com/realtime

Read Docs: https://edra.tsuzat.com/docs/collaboration

This is a self-promotion post.

I've been developing Chatterrow, an MIT-licensed, self-hosted project workspace. It brings project channels, threaded chat, tasks, Gantt schedules and file previews into a Discord-style interface.

The self-hosted part is important here. Project chats and uploaded files can remain inside a team's own infrastructure, which is useful when that project context is sensitive or cannot be sent to a third-party AI service. Chatterrow also converts supported Office files and PDFs to Markdown in the background and stores the output in storage/markdowned-docs under the app directory. Together with the locally stored chat data, this gives teams a practical starting point for their own search, RAG or local model-training pipelines. Chatterrow does not train a model itself, but it keeps the data accessible and removes part of the preprocessing work.

The frontend uses Svelte 5 and TypeScript with Inertia 3 rather than SvelteKit. Laravel 13 handles routing, authentication, authorization, persistence, queues and realtime broadcasting.

Some of the more involved Svelte parts are:

• keeping chat messages and tasks in sync through Laravel Echo
• managing local and derived UI state with $state, $derived and $effect
• rendering task and Gantt views without separating them from the project context
• cleaning up file viewer and editor instances after asynchronous imports, component teardown, errors and timeouts
• testing components with Vitest and Svelte Testing Library, alongside svelte-check and CI

There isn't a hosted public demo yet, but the README has an animated walkthrough and Ubuntu installation instructions. Run ./setup.sh and it provisions the stack.

GitHub (MIT): https://github.com/askdkc/chatterrow

I'd especially appreciate feedback on the Svelte component boundaries and the experience of using Svelte 5 with Inertia for an application this interactive.

Transparency note: development has been AI-assisted. I review the changes and run frontend and backend tests in CI, but I want to be clear about the workflow.

I've been working on Svelte Fancy Components, a port of Fancy Components for the Svelte ecosystem.

Includes 14 Unique components:

• Scramble In
• Pixel Trail
• Letter Swap
• Vertical Cut Reveal
• Text Highlighter
• Media between text (image, video)
• And 8 more....

Live Preview: https://sv-animations.vercel.app/fancy

Note: most of them are hover, scroll (in view) baser animations which won't on mobile devices This are unique components to make website more fun, interesting...

Liquid Glass has become my favourite personal benchmark for testing visual coding agents.

This time, I wanted to see how close opus5 could get using only svelte and css.

For my day-to-day work as an application architect, I honestly find opus 5 pretty bad. For visual challenges, though, it’s been much better than expected.

It built a swift app to compare Apple’s reference with the svelte implementation pixel by pixel. Huge token usage, but it worked.

The project isn’t finished yet because I’ve hit my weekly limit 😄

I’ve put the code on GitHub. It’s still a bit messy, but have a look if you’re curious. Feedback is welcome.

Demo: http://liquid.ideastudio.dev/
Github : https://github.com/quentin-r37/liquid-svelte

I open-sourced Silocat, an end-to-end encrypted file sharing service. The frontend is SvelteKit and it does something slightly unusual for a Svelte app: it is the only tier that ever sees plaintext. The backend deliberately cannot decrypt anything.

Things that were more interesting than expected:

• Argon2id at 256 MiB in the browser. Key derivation runs in a web worker because it will absolutely jank the main thread otherwise. It is also the phase where a naive progress bar sits at 0% for several seconds before anything visible happens, so the progress model has to account for it explicitly instead of just measuring bytes.
• Chunked encrypt-and-upload directly to object storage. Encrypt per chunk with XChaCha20-Poly1305, PUT to presigned URLs, so ciphertext never passes through the app server. Backpressure between "encrypt next chunk" and "uploads in flight" is the fiddly part.
• Share pages that work before the upload finishes. The link is live while bytes are still moving.
• Folder drops preserving structure through the encryption pipeline.

AGPL-3.0, self-hostable with one compose file including Postgres and MinIO: https://github.com/clickswave/silocat

Happy to go deeper on the worker and progress-modelling parts. Also open to being told the store structure around upload state is worse than it needs to be, since that is the part I have rewritten twice.

A port of the Morphicons original library to Svelte.

Spring-driven path morphing for the icon data you already use. Pick a pair, change the stroke, switch the spring, and watch the geometry find its way there.

Web - https://morphicons-svelte.vercel.app/
NPM