Migrate to Svelte 5 — An Interactive Reference for Framework Refugees

Do you feel the same? You've been working in React (or Vue, or Angular) for years, shipping production code, wrestling with dependency arrays, wrapping vanilla JS libraries in framework-specific adapters, and wondering why your node_modules weighs more than your actual appl. Then you hear about Svelte 5 and its runes — $state, $derived, $effect — and something clicks. You want to try it, but the migration path feels pretty rocky.

That's the gap my new site is designed to fill.

What's svelte.cogley.jp

It's an interactive, side-by-side reference that maps concepts — not just syntax — from React, Vue, and Angular to Svelte 5 and SvelteKit. It's kind of a "Rosetta Stone" for frontend frameworks: you pick your source language (React, Vue, or Angular), choose a category (overview, syntax, architecture, or ecosystem), and see exactly how each concept translates. I've been using Svelte so it assumes you do, too.

Every mapping includes code examples on both sides, with explanatory notes that capture the why, not just the what. The site also tries to flag ecosystem gaps honestly — places where Svelte doesn't have a mature equivalent yet, like native mobile — so you're making informed decisions rather than discovering surprises mid-migration.

The four lenses

The reference is organized into four categories, each designed around a different kind of question a migrating developer asks:

Overview covers philosophy, migration strategy, and the fundamental architectural differences. This is where you learn that Svelte is a compiler (not a runtime), that SvelteKit is to Svelte what Next.js is to React, and that incremental migration is perfectly viable — you don't need a Big Rewrite.

Syntax is the phrasebook. useState becomes $state. useMemo becomes $derived. Vue's ref() and .value unwrapping disappears entirely. Angular's @Input() decorators become plain destructured $props(). Each card shows the before and after, with some notes explaining the conceptual difference.

Architecture maps the structural patterns: file-based routing, server data loading, form handling, middleware, environment variables. SvelteKit's +page.server.ts / +page.svelte convention is explained relative to Next.js pages, Nuxt's useFetch, and Angular's route guards and services.

Ecosystem is the library mapping table. State management, data fetching, UI components, auth, animation, i18n, testing, charts — each row tells you the Svelte equivalent and assesses maturity. Gaps are flagged visually with badge counts, so you can see at a glance how many holes exist for a given framework. Some answers are satisfying (shadcn-svelte is a near 1:1 port of shadcn/ui), and some are frank (there is no React Native equivalent for Svelte, at least yet).

Bilingual

The entire site works in English and Japanese. Language is auto-detected from your browser's Accept-Language header on first visit, and you can toggle between EN/JA at any time. All concept names, explanatory notes, and UI chrome are fully translated. The site also supports dark and light themes, persisted across visits. My personal site is mostly English but here's a brief intro in Japanese:

日本語の概要: svelte.cogley.jp は、React・Vue・AngularからSvelte 5とSvelteKitへの移行を支援するインタラクティブリファレンスサイトです。構文だけでなく、アーキテクチャやエコシステムの概念を並べて比較でき、日本語と英語の両方で利用可能です。ブラウザの言語設定を自動検出し、ダーク/ライトテーマにも対応。SvelteKit + Cloudflare Workersで構築されており、ターゲットフレームワーク自体で作られた「ドッグフーディング」サイトでもあります。

Dogfooding all the way down

The site itself is built with SvelteKit, deployed as a Cloudflare Worker. It uses Svelte 5 runes ($state, $derived, $effect), scoped CSS (no Tailwind), server-side language detection via hooks.server.ts, and Phosphor icons. There's no database and no tracking — all content lives in a single TypeScript data file. It's a working example of the patterns it teaches.

The font pairing is Murecho for body text (a bilingual-friendly Google Font) and Monaspace Krypton for code blocks (self-hosted). Both choices are intentional: Murecho handles Japanese and Latin text gracefully at the same weight, and Monaspace's texture healing makes code comparisons easier to scan.

Why not just read the Svelte docs?

The official Svelte docs are excellent — for Svelte. But if you're coming from React, you don't think in Svelte terms yet. You think in useEffect and useContext and JSX ternaries. You need a translator that speaks your source language, maps it to the destination, and explains the differences in context. That's what this site tries to do.

Migration docs also tend to go stale fast. Because all the content in this reference lives in one data file (src/lib/data.ts), updates are a single-file edit, and the deployment is automated via GitHub Actions. It's designed to stay current as Svelte 5 evolves.

Try it

Visit svelte.cogley.jp, pick your framework, and start exploring. If you find a mapping that's missing or wrong, please make a comment on this article.

Latest: Auto-Updated Project Showcase

The site now exposes a public changelog API at /api/changelog.json, which returns the latest update date and change summary in a machine-readable format. This powers a new "Projects" section on
cogley.jp/now and a "Side Projects" card on rick.cogley.jp, both of which automatically display the most recent update without any manual edits. The changelog data is fetched server-side at render time, so the latest update date stays current as I push changes to the migration reference.

Built by Rick Cogley in Tokyo. SvelteKit + Cloudflare Workers. No tracking, no ads, just framework translation, yes.

Originally published at cogley.jp

Rick Cogley is CEO of eSolia Inc., providing bilingual IT outsourcing and infrastructure services in Tokyo, Japan.