In-project generation

Generate FSD slices

Generate typed FSD slices directly inside an existing project. The CLI reads fsd.config.json, resolves the framework's source directory, and writes framework-aware files to the matching layer.

Syntax

bash

npx create-fsd-architecture --generate <type> <name>

bash

npx create-fsd-architecture -g <type> <name>

Command examples

bash

npx create-fsd-architecture --generate feature auth
npx create-fsd-architecture -g feature checkout-flow
npx create-fsd-architecture --generate feature product-filters
npx create-fsd-architecture --generate entity product
npx create-fsd-architecture -g entity order
npx create-fsd-architecture --generate widget navbar
npx create-fsd-architecture -g widget dashboard-sidebar
npx create-fsd-architecture --generate page checkout

Examples by slice type

Feature example

feature

Use this for user actions and business interactions such as auth, checkout, filters, search, or forms.

bash

npx create-fsd-architecture --generate feature auth

text

src/features/auth/
├── ui/
├── model/
└── index.ts

Entity example

entity

Use this for business objects such as product, user, order, brand, category, or cart item.

bash

npx create-fsd-architecture --generate entity product

text

src/entities/product/
├── ui/
├── model/
└── index.ts

Widget example

widget

Use this for composed UI blocks such as navbar, sidebar, header, product grid, or checkout summary.

bash

npx create-fsd-architecture --generate widget navbar

text

src/widgets/navbar/
├── ui/
└── index.ts

Page example

page

Use this for route-level page compositions such as checkout, profile, catalog, or dashboard.

bash

npx create-fsd-architecture --generate page checkout

text

src/pages/checkout/
├── ui/
└── index.ts

Overwrite examples

The generator protects existing slices unless you explicitly pass `--force`.

bash

npx create-fsd-architecture --generate feature auth --force
npx create-fsd-architecture -g widget navbar --force

Supported types

featureentitywidgetpage

Overwrite behavior

Existing slices are protected by default. Pass `--force` when you intentionally want to overwrite a generated slice.

Generator behavior

Writes to src/* layers for React, Next.js, Vue + Vite, and SvelteKit projects.

Writes to app/* layers for Nuxt projects.

Uses kebab-case for folders and files.

Uses PascalCase for React components and Vue or Svelte component names.

Uses camelCase for variables and hooks.

Generates TypeScript boilerplate and a public index.ts API.

Prints a success message with the created files list.

Shows clear validation errors for invalid usage.

Generated paths

Project with src/

text

src/features/auth/
src/entities/product/
src/widgets/navbar/
src/pages/checkout/

Nuxt project

text

app/features/auth/
app/entities/product/
app/widgets/navbar/
app/pages/checkout/
app/app/routes/checkout.vue

SvelteKit project

text

src/features/auth/
src/entities/product/
src/widgets/navbar/
src/pages/checkout/
src/routes/checkout/+page.svelte

Project without src/

text

features/auth/
entities/product/
widgets/navbar/
pages/checkout/

Feature presets

Generic features use the API, server-state, client-state, and forms choices already stored in fsd.config.json.

React: React Query + Zustand or Redux Toolkit

Vue: Vue Query + Pinia

Nuxt: Vue Query SSR + Pinia modules

SvelteKit: Svelte Query + Svelte stores

Forms: React Hook Form, VeeValidate, or Superforms + Zod

UI only

Feature preset examples

text

apiClient: axios
serverState: react-query

Creates API helpers, React Query hooks, typed request files, UI entry points,
and a public index.ts export.

text

framework: vue-vite
serverState: vue-query
clientState: pinia
forms: vee-validate-zod

Creates Vue single-file components, composables, a Pinia store,
typed API helpers, validation schemas, and a public index.ts export.

text

framework: sveltekit
apiClient: fetch
serverState: svelte-query
clientState: svelte-store
forms: sveltekit-superforms-zod

Creates Svelte 5 components, Svelte Query accessors, a Svelte store,
Superforms + Zod validation, and a public index.ts export. Page slices also
receive a src/routes/<name>/+page.svelte route wrapper.

text

clientState: zustand

Creates a local store, typed actions/state, UI entry points,
and a public index.ts export.

text

clientState: redux

Creates a slice, actions/selectors, UI entry points,
and a public index.ts export.

text

apiClient: fetch
serverState: none
clientState: none
forms: none

Creates a typed framework-native component, styles-ready structure,
and a public index.ts export.