Stable in CLI 2.5.0

SvelteKit-native FSD with the complete structure

The SvelteKit edition combines Svelte 5 runes, SSR-ready routing, and a complete Feature-Sliced Design source tree. Its generators write native.svelte components and keep route files as thin wrappers around FSD page slices.

Create a SvelteKit project

bash

npx create-fsd-architecture@latest my-app --framework sveltekit --yes

bash

npm create fsd-architecture@latest

Interactive setup lets you keep the defaults—native Fetch, Svelte Query, Svelte stores, and Superforms + Zod—or disable optional tools.

Default stack

FrameworkSvelte 5 + SvelteKit 2

API clientNative Fetch by default, Axios optional

Server stateTanStack Svelte Query v6

Client stateSvelte stores

FormsSvelteKit Superforms + Zod 4

QualityTypeScript, ESLint, Steiger, Husky, Commitlint

SvelteKit and FSD directory contract

text

src/
├── app/          # FSD application providers and global setup
├── pages/        # FSD page slices, not SvelteKit route files
├── widgets/      # Composed interface blocks
├── features/     # User interactions
├── entities/     # Business models
├── shared/       # Reusable UI, API, config, and utilities
└── routes/       # SvelteKit file-based route wrappers

SvelteKit reserves $app, so the FSD app layer uses the$fsd-app alias. Other aliases include $pages, $widgets, $features, $entities, and $shared.

Native generators and routes

bash

npx create-fsd-architecture -g feature auth
npx create-fsd-architecture -g entity product
npx create-fsd-architecture -g widget navbar
npx create-fsd-architecture -g page account

text

src/pages/account/
├── ui/AccountPage.svelte
└── index.ts

src/routes/account/+page.svelte

The route wrapper imports the public page-slice API, so SvelteKit owns URL matching while FSD owns the page composition.

Runtime config

Set PUBLIC_API_BASE for generated API helpers. The default Fetch client works in both server and browser code.

Node.js

Generated projects require Node.js 22.22.2 or later. The starter pins Node 22.23.0 for repeatable local and CI checks.

Quality workflow

bash

npm run lint
npm run typecheck
npm run fsd:check
npm run build
npm run ci

View the SvelteKit starter on GitHub