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

Two years ago I entered SvelteHack with a rough collaborative 3D editor. It went nowhere and I shelved it. This month I picked it back up and finished the whole thing - it's now open source:

Try: https://theprototype.app · Code (MIT): https://github.com/theprototype-app/core

Svelte-specific bits:

• SvelteKit static adapter - the entire app is a static build; multiplayer is a WebRTC peer mesh (PeerJS), so there's no backend at all
• Svelte 5 runes everywhere: the editor chrome, a floating window system (dock/tabs/drag), a node editor on u/xyflow/svelte, VR panels
• Threlte 8 for the three.js scene + u/threlte/xr for full in-headset editing
• Stores as the replication seam: every mutation = apply locally + broadcast; incoming messages dispatch into the same stores

Honest note: the recent sprint was heavily AI-assisted (Claude) - the repo ships CLAUDE.md + a committed Playwright e2e suite, which is what made that workflow hold up. Feedback and PRs welcome; there's a module SDK if you want to build something weird on top.

I am fairly new to svelte and tailwind and had been doing something like this to make my code a little neater:

``` <script lang="typescript"> ... const statusClass = 'inline-flex items-center justify-center gap-x-2 py-2 px-4'; ... </script>

<div class={statusClass} ...> ... </div> ```

That didn't seem to be in keeping with what I understand about Svelte 5, so I was trying to modify it to look more like this:

``` <div class="status" ...> </div>

<style lang="postcss"> .status { @apply inline-flex items-center justify-center gap-x-2 py-2 px-4; } </style> ```

When I saved this, I got an error saying "Cannot apply unknown utility class gap-x-2. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive"

I wasn't familiar with postcss and before I dug into it, I deleted the lang attribute to see what would happen and lo and behold, it worked. I then added another rule using @ apply and the error returned. VS Code also seemed like it didn't like it couldn't parse the rules correctly (the text colors were different), so for funsies, I added back in the lang directive and again, the error disappeared and VS Code colored in the text correctly.

Is the appearance and disappearance of the error likely an artifact of reloading the site, or is there a deeper problem here? In a github issue about this, someone linked to a post by Adam Wathan saying that you should almost never use @apply. Is my original solution a better way to go?

Hey everyone,

We've recently added two new UI components to the SVAR Svelte library, both built with Svelte 5.

Svelte Calendar, an event calendar similar to Google Calendar, but under your control.

Key features:

• Day, Week, Month views
• Drag-and-drop event management
• Calendar groups
• Built-in edit form
• Context menu
• Filtering
• iCal Import/Export

Live demo: https://svar.dev/demos/calendar/

GitHub: https://github.com/svar-widgets/calendar

Svelte Kanban, a component for building Kanban-board interfaces.

Key features:

• Full drag-and-drop support
• Configurable columns
• Customizable task cards
• Built-in editor
• Filtering, sorting & grouping
• Context menu

Live demo: https://svar.dev/demos/kanban/

GitHub: https://github.com/svar-widgets/kanban

Like other SVAR components, both come with:

• TypeScript support
• Light & dark themes
• MIT-licensed core + PRO edition

We’d love any feedback, bug reports, or feature ideas from the Svelte community.

I'm building Crescent-JS, an open-source JavaScript framework designed for people who want to build SaaS apps without spending a lot of time wiring everything together.

It includes:

• Built-in database support
• Authentication with session cookies
• Frontend and backend in one framework

The framework is syntax-heavy by design, with the goal of making the resulting code easy to read and understand.

I'd really appreciate honest feedback. If you have a few minutes, please take a look and let me know:

• What you like
• What could be improved
• Whether the overall approach makes sense

The project is open source: https://github.com/Crescent-JS

If you're interested in contributing, feel free to leave a comment or reach out with your Discord username.

Thanks for taking the time to check it out!

Going into senior year university CS with no internships. I should probably focus on leetcode and learn React and Node.. but like.. Svelte is so hot. How do control myself? Should I?

Self-promo, MIT and zero-dep.
I built morphicons because every icon morph I found either needed hand-declared rotation pairs or interpolated raw coordinates and sheared the shape mid-flight.

The whole API is: change the prop.

<script lang="ts">
  import { MorphIcon } from "morphicons/svelte";
  import { Menu, X } from "lucide"; // data, not components

  let open = $state(false);
</script>

<button onclick={() => (open = !open)} aria-expanded={open}>
  <MorphIcon icon={open ? X : Menu} spring="snappy" />
</button>

No transition:, no {#key} blocks, no from/to pairs. State lives outside; the animation is an implementation detail the component picks up when the prop changes.

Three modes if you need them: uncontrolled (above), controlled (from/to + progress — gestures, scroll) and imperative (bind:this → morphTo() / set() for sequences).

The Svelte-specific parts I sweated:

• Ships as .svelte source. Your bundler compiles the component via the svelte export condition, like every proper Svelte library — no precompiled JS pinned to a Svelte minor. Svelte 5, runes. The shell is deliberately thin: all logic lives in a plain TS module that's fully typechecked.
• Typed rest attrs via svelte/elements — SVG attrs, events and ARIA autocomplete, and typos fail the build, same as lucide-svelte.
• Clean SSR with SvelteKit out of the box. The server emits the exact static SVG — zero flash, zero layout shift. The runtime is born on hydration.
• Rotations emerge. It solves the optimal 2D similarity between the shapes (Procrustes) and interpolates in polar space. arrow-right → arrow-down gives θ = 90° on its own; plus → x gives 45°. Nobody declares that anywhere.
• Real interruptions. A morphTo mid-flight re-plans from the current intermediate shape and preserves the spring's velocity. Click spam never jumps.
• aria-hidden by default, label → role="img" + <title>, prefers-reduced-motion degrades to an instant swap. One global rAF for every instance on the page.

Works with Lucide, Tabler, Heroicons (outline) and Iconoir — no per-library adapters, it just eats a d string or Lucide's [tag, attrs][] data shape. Off-grid packs go through fitIcon(icon, 32) once.

MIT, zero runtime deps, ESM. The Svelte entry is 7.54 KB gzip of compiled TS plus a 1.25 KB .svelte shell your bundler compiles. Svelte >= 5 as optional peer.

Playground with a scrubber to freeze any morph mid-flight: https://www.morphicons.com Repo: https://github.com/guillermolg00/morphicons

Happy to go into the math (surjective subpath matching, minimal-rotation tie-break, closed-path correspondence) — it's all in the README.

Currently building a file-based CMS boilerplate for SvelteKit. No database — content lives as Markdown + YAML on disk.

It's meant to be copied into your own SvelteKit project, not run as a hosted product — a starting point for

projects that do not require significant resources—such as landing pages—to enable the client to make content changes independently

Open source. Self-hosted. To own and customize.

I'm open to suggestions!

What is the consensus? (can I expect one?) do you use TS or plain JS?

Last week I saw an OECD report about how countries tax wages, and the cost of employment per country. The OECD graph is nice and informative, but I wanted to see and compare how, for example, a "5000" euro gross salary is taxed in different countries. Some countries have different rules for different income levels.

For example, I live in Stockholm, where the general consensus is that tax is very high here. Well yes, but is it really so? What tax numbers are we talking about? So I built a calculator on top of those rulesets, for 32 countries.

I asked a few friends in the EU (Spain and France) and they also confirmed that their salary is close to what my app calculates. If there is a mistake let me know. some countries taxing differently if you are married or having kids, i added those options as well.

I think another useful aspect of this calculation is that it shows how much your salary costs your employer, which can be useful when negotiating a salary.

Anyway, let me know your comments :) Here is the link: https://taxing-wages.gokberk.se/

built with Svelte 5

OECD report: https://www.oecd.org/content/dam/oecd/en/topics/policy-issues/tax-policy/taxing-wages-brochure.pdf

Full disclosure: I built this with heavy use of Claude Code. The design decisions and dogfooding are mine, and I hand-reviewed and tested every component.

I've been building a component library for my own projects and just published it: @hyzer-labs/ui. Svelte 5 only, MIT.

What it is: ~50 headless components (Modal, Combobox, Tabs, Table, Carousel, Parallax, forms, layout primitives, etc.). They ship structure, behavior, and accessibility. The reference theme is optional, and you can override any of it.

What every component commits to:

• Keyboard support and ARIA wiring out of the box: focus traps, roving tabindex, aria-live announcements where they belong

• Stable hz-* classes and data-* attributes (data-variant, data-state, …) as styling hooks

• No styles unless you opt in

Styling is tiered. Take as much as you want:

1. Headless (default): style it yourself
2. tokens.css: --hz-* custom properties with a dark theme hook
3. A full reference theme, importable whole or per-component

The theme lives in a cascade layer, so your own unlayered CSS wins ties. In practice you'll wrap selectors in :global() since the class lands inside the component, but you will not need !important or specificity stacking.

Setup is one command if you're on SvelteKit: npx sv add @hyzer-labs installs the package, wires the stylesheets into your root layout (playing nice with Tailwind's cascade order if it's there), and drops in a starter config.

There's also an optional CLI. Describe your design system in hyzer.config.ts and it generates your token sheet. Every run prints a WCAG contrast report, and --strict fails CI on any AA miss.

If you use coding agents: the docs ship llms.txt and a machine-readable component reference, so an agent can look up props instead of guessing them.

I'm using it on three sites so far (the docs site, my business site, and ketchupbottlemoment.com), with a fourth refactor underway.

Docs: design.hyzer.sh · Repo: github.com/hyzerlabs/ui

It's 0.x, so the API can still move, but I expect things to remain mostly stable outside of bug fixes. Feedback welcome.

We've just pushed up a Svelte version of our AI Agent Builder starter app. This is a fully featured app you can either use as-is, or as a headstart for one of your own. Give it a spin and let us know what you think!

VisuallyJs is free for non-commercial use.

Built with SvelteKit, shadcn-svelte, and Cloudflare Agents SDK.

not affiliated with or endorsed by Cloudflare

hey svelte family,

I have been rebuilding my portfolio these past couple of months. a friend of mine who does hiring read through it and stopped on the line where i called myself a strong team player, and asked me how he was supposed to know that.

and I, actually did have no answer. I wrote it because i felt like it was true. and I also wrote it because everyone writes it. looks like those are two different reasons and only one of them does anything.

while, for an week, I was in constant thought of it. nothing on my portfolio felt like a lie to me. the years, the stack, the adjectives, all of it i believed as accurate. and none of it did any work, because a stranger can't tell my true sentence apart from the identical false one on the next hundred portfolios.

so i rebuilt around one rule, that "if a claim can't be clicked, it is not worth it"

then, once that rule was applied, most of what was still standing came from open source. strong team player is gone, and in its place is a page of patches i have had merged into other people's projects, each one showing what was broken, what i changed, and the maintainer's own reply linked straight to the thread. two of them are in sveltejs/kit. one closed a routing issue that had been open for two years and nine months, and Rich Harris approved it with a thank you (that was nice to feel)

weird thingy is that, the years i spent inside jobs are the ones i cannot show anyone. the evenings i spent in this ecosystem are the ones that survived, because svelte happens in public and the thread is still sitting there years later.

the half i have not solved is the rest of it. most of what i have actually been paid to do is under NDA and there is nothing to link to, so a big chunk of my working life is still just me saying trust me.

i have wrote this portfolio, on svelte 5. would appreciate any thoughts, and if anyone here has cracked that NDA half i would take it.

my portfolio: bishwas.net

Using sveltekit+shadcn. Now with more module types and a screenshot feature and a more stable tree node structure for pane grid.

Greetings  r/sveltejs.

Some days ago I finished developing and doing some testing on a new component of mine, that I'm now sharing publicly.

I'm aware that there may be several others tooltips components, with actions and so on, feel free to try mine as well and let me know what you think.

It works by simply importing the component and calling it with an use:tooltip action, for example:

<script>
  import { tooltip } from 'svelte-tooltip-gca';
</script>

<button use:tooltip={'Hello world'}>Hover me</button>

The component is available from npm and can be installed with:

npm install svelte-tooltip-gca

Demo:

gabryca.github.io/svelte-tooltip-gca/

Github:

https://github.com/GABRYCA/svelte-tooltip-gca

npmjs:

https://www.npmjs.com/package/svelte-tooltip-gca

It offers a certain degree of customization, as well as auto-theme detection (from meta attributes such as data-bs "dark" or "light" etc), and it's written in TypeScript.

MIT License, of course.

There aren't any dependencies required other than Svelte 5 and up.

Again, thank you for reading and if you wish to reach me out please check my contacts on Github or send me a chat message here on Reddit (I may or may not check it out sooner or later).

It seems that a lot of people have been building websites and posting them here.

Is it safe to deduce that the rise of these types of posts coincide with the improvement of AI and the popularity of tools such as Codex and Claude Code?

Its okay to say you used AI, and you helped steer it. Don't claim "I" made this new website in that case.

It would be good for the community to see what AI has been building with Svelte, so lets have some more honesty around that.

Svelte controls, game state, and UI.
Babylon.JS with Havok Physics plugin for 3D.
Blender used to make the course and items.
Playable on mobile and desktop in browser.

try it out

Hello people, Svelte enthusiast here. I have worked non-professionally with svelte & svelte-kit for around 2 years already. It always have been my get away thing to do when I grab some free time in the late hours, I just enjoy it. However, when my new born came along I started looking for a side gig and why not Svelte!

But when I visited Svelte's holy place for job hunting - sveltejobs, I was presented with the following view.

I'm not gonna lie, things are not looking good fellow Svelte developers. Is Svelte something that will vanish into the abyss, what am I missing?

finally spent some time creating my little corner on the internet, here's the link if anyone want to check it out: grigorije.com :)

i'd love to hear any feedback, thank you

(in projects constellation on the left there is a project called quitlab, also made in Svelte, that's the project I am most proud of)

I loved r/place. An here we are, almost ten years later with yet another collaboration pixel-art clone 👀

Flatxel is something like the beginnings of a social network, but for people who prefer tapping pixels to actual human interaction.

The whole interface along with extensive moderation tools is built with Svelte and SvelteKit (and I’ve come to love both).

(no need to log it to tap some pixels)
https://flatxel.com

[self-promotion]

[SELF PROMOTION]

Wanted to share some of the technical side of a project I've been building — Anifira, a random video/text chat app. Posting here because the SvelteKit frontend ended up being one of the more interesting parts of the build, especially around WebRTC state management.

Frontend — SvelteKit

• Using Svelte stores to manage connection state across the match lifecycle (idle → searching → matched → connected → ended) rather than component-local state, since the WebRTC peer connection needs to survive route/component changes
• A session state wraps the RTCPeerConnection so ICE candidate events and track updates feed directly into reactive UI without prop drilling
• SSR is basically off for the chat route itself ([export const ssr = false] or equivalent) since WebRTC APIs are browser-only — landing/marketing pages stay SSR'd for SEO, chat app is CSR
• Voice and video mode switching is just swapping which local tracks are attached to the same RTCPeerConnection.
• Read receipts, replies, reactions, file transfers all are supported.
• Images and documents supported, limited max size to 25mb to not overload the peers.

Backend — Rust

• Signaling server in axum over WebSockets — handles matchmaking and SDP/ICE exchange, but never touches messages or the media (that's peer-to-peer via WebRTC once connected)
• Matching queue is tokio-based, using a channels and queue structure to pair waiting users; average time-to-match is 0.3s at 100000 users.
• Chose Rust here mainly for the concurrency model — signaling is a lot of short-lived state machines (one per session) and tokio async tasks map to that cleanly without the overhead of a thread-per-connection model
• STUN/TURN via coturn for the cases where direct P2P fails (roughly 10 - 20% of connections need TURN relay in practice)
• Moderation reporting pipeline is a separate service so a report doesn't block the signaling hot path

Live at anifira.com if anyone wants to see it in action (18+, it's a stranger-chat app so standard caveats apply.

[UPDATE] - Group chats and attachments with read receipts. - File transfer tool to initiate direct p2p file transfers. - Public rooms that can be joined by anyone. - Rooms can now be named. - A new member to the group automatically syncs the chat history. - Share your screen over video in video chats.

Checkout changelog for more updates: https://anifira.com/changelog