Syn

The AI-native web framework. Syn is a hard fork of Svelte 5 and SvelteKit, built to compete with React, Next, Svelte, and Nuxt on their own turf — and to win the territory none of them were designed for: a world where most code is written by agents and read by humans.

<script>
  // All three of these in ONE component. Stock Svelte 5 refuses to
  // compile this file. Syn doesn't blink.
  export let title = 'hello';        // Svelte 4 props
  let count = $state(0);             // Svelte 5 runes
  $: doubled = count * 2;            // Svelte 4 reactive statements
</script>

<script>
  // React components & libraries, mounted like any Syn component
  import { fromReact } from '@syn/react';
  import { HexColorPicker } from 'react-colorful';

  const Picker = fromReact(HexColorPicker);
  let color = $state('#ff3e00');
</script>

<Picker {color} onChange={(c) => (color = c)} />

The pillars

1. The yumminess is back. Svelte 3/4's classic syntax (export let, $:, stores, let reactivity) is a first-class, permanently supported dialect — not a deprecation target. Runes are fully available and fully optional. Mixing both in one file is a Syn exclusive.
2. AI-native. The terseness that made Svelte pleasant for humans makes it cheap for agents: fewer tokens from intent to working UI, no hook/dependency-array boilerplate, no virtual DOM tax. Syn ships machine-readable docs (llms.txt), agent guidance (AGENTS.md), and a roadmap of compiler errors that carry machine-applicable fixes. See VISION.md for the full strategy.
3. The React ecosystem is an on-ramp, not an enemy. fromReact() mounts React components and libraries with reactive props and cross-boundary children. If a model or a teammate only knows the React way, that code still runs — and can be ported to native Syn incrementally (eventually automatically; see roadmap).
4. Every platform from one codebase. SvelteKit's SSR/routing today; first-class Tauri integration on the roadmap for desktop and mobile from the same repo.
5. Compiled, not interpreted. Svelte's compiler model — no VDOM, surgical DOM updates, tiny bundles — is the foundation. Syn inherits it and extends the compiler itself.

Fork architecture

Syn is structured as three repositories:

Repo	Role
Syn (this repo)	The framework: packages, pipeline, docs, examples
syn-svelte	Hard fork of sveltejs/svelte — compiler & runtime delta lives here
syn-kit	Hard fork of sveltejs/kit — app-framework delta lives here

Alongside the forks, pnpm upstreams maintains local read-only mirrors of the frameworks Syn forks, competes with, and learns from — svelte, kit, react, next, and vue — so agents and humans reference real upstream source instead of guessing (upstreams.json: gitignored shallow clones, tarball fallback). How the mirrors, the forks, and the agent fleet interact — including the self-improvement loops and the rules for contributing back upstream — is defined in LOOPS.md.

The survival rule for the forks: keep the delta small, isolated, and continuously merged. Upstream Svelte ships roughly weekly; forks die when their diff grows unbounded and merges become archaeology. Ours stays alive by policy: every Syn-specific change is a tagged, self-contained patch series; upstream is merged on a schedule; upstream's own test suite runs in our CI. Today the compiler delta is implemented as a pre-compile transform in @syn/core (which is why it works against stock Svelte); as native syntax work begins (custom template tags, mixed-mode in the parser), it moves into syn-svelte proper. See ROADMAP.md §0.3.

Packages

Package	What it is
@syn/core	Runtime front door, the mixed-mode sugar transform, SynMap/SynSet/SynDate/SynURL collections, stores with extras (persisted)
@syn/kit	App framework: defineSynConfig(), synKit() Vite preset (React JSX + dedupe preconfigured)
@syn/react	The React bridge: fromReact() / toReact(), reactive props, snippet children inside React trees
create-syn	npm create syn my-app scaffolder
@syn/migrate	Importers for Svelte 4 / SvelteKit / Next.js projects (paused — resumes in 0.6)

The three dialects

Classic (Svelte 3/4) — components with no runes compile in legacy mode, untouched. Runes (Svelte 5) — full fine-grained reactivity, snippets, reactive collections. Mixed (Syn exclusive) — both in one file; classic constructs are rewritten to rune equivalents at compile time:

You write	Syn compiles
export let a = 1 (in a runes file)	let { a = 1 } = $props()
$: doubled = count * 2	let doubled = $derived(count * 2)
$: { sideEffect(x); }	$effect.pre(() => { sideEffect(x); })
$: y = f(x) where y is reassigned elsewhere	let y = $state() + $effect.pre(...)

Quick start

pnpm install
pnpm test                  # unit suites across all packages
pnpm dev                   # all three example apps in parallel (playground · marketing · docs)
pnpm dev:playground        # just the framework demo (classic + mixed + runes + React)
pnpm dev:marketing         # just the marketing site
pnpm dev:docs              # just the docs site

VS Code extension — install .syn language support locally:

pnpm ext:install           # vsce package + code --install-extension in one step

Requires the Svelte for VS Code extension for full LSP support (completions, diagnostics, go-to-definition on .syn files).

Scaffold a fresh app: node packages/create-syn/src/cli.js my-app.

Project docs

• VISION.md — market positioning and strategy
• ROADMAP.md — staged plan, 0.1 → 1.0
• TESTING.md — test strategy and the example-app fleet
• VERSIONING.md — semver policy, upstream pins, release flow
• llms.txt — token-dense framework reference for agents
• AGENTS.md — working in this repo as an agent

Status

0.1.0 ships the full pipeline working end-to-end and verified in a browser: classic, mixed, and runes components plus a third-party React library, all in one SSR'd app, with 19 unit tests and a CI workflow. The compiler delta currently rides on top of pinned stock Svelte (5.56.3) — the migration of that delta into syn-svelte is the 0.3 milestone.

License

MIT. Syn is a fork of Svelte and SvelteKit, © the Svelte contributors, also MIT.