@t1ep1l0t/create-fsd is a powerful CLI tool that helps you quickly bootstrap production-ready frontend applications following the Feature-Sliced Design (FSD) architectural methodology. Create fully configured projects with JavaScript or TypeScript in seconds, and generate FSD-compliant structures for features, entities, widgets, and pages on-demand!

🎯 Supports both JavaScript and TypeScript with automatic project type detection

• Feature-Sliced Design (FSD) - Scalable and maintainable project structure
• FSD Structure Generator - Quickly generate features, entities, widgets, and pages
• Auto-detection - Automatically detects TypeScript/JavaScript and creates appropriate files
• Clear separation of concerns across layers
• Ready-to-use folder structure with automated scaffolding

• JavaScript & TypeScript - Full support for both languages
• Smart Detection - Automatically detects project type when generating structures
• Type Safety - TypeScript templates with proper typing for all libraries
• Zero Config - Works out of the box with optimal settings

• React 18 - Latest React with concurrent features
• Vite - Lightning-fast build tool and dev server
• TailwindCSS v4 - Utility-first CSS framework
• React Router DOM - Declarative routing
• Zustand - Lightweight state management
• Axios - HTTP client with interceptors configured
• React Query - Powerful server state management
• i18next - Internationalization (i18n) support
• ESLint & Prettier - Code quality and consistency

• Path aliases configured (@app, @pages, @widgets, @features, @entities, @shared)
• Example code demonstrating best practices
• Full TypeScript support with type definitions
• Zero configuration needed - start coding immediately

npx @t1ep1l0t/create-fsd app my-app
cd my-app
npm run dev

npx @t1ep1l0t/create-fsd app my-app --typescript
cd my-app
npm run dev

npm create @t1ep1l0t/fsd app my-app
cd my-app
npm run dev

After creating your project, you can use the arch command to quickly generate FSD-compliant directory structures for features, entities, widgets, and pages. The command automatically detects whether your project uses TypeScript or JavaScript and creates the appropriate files.

create-fsd arch [options]

# The CLI detects tsconfig.json and creates .ts files automatically
create-fsd arch -f user-auth -s ui model api -i

# Result in TypeScript project:
# src/features/user-auth/
# ├── ui/
# │   └── index.ts
# ├── model/
# │   └── index.ts
# ├── api/
# │   └── index.ts
# └── index.ts (exports all segments)

# The CLI detects no tsconfig.json and creates .js files automatically
create-fsd arch -e product -s model ui -i

# Result in JavaScript project:
# src/entities/product/
# ├── model/
# │   └── index.js
# ├── ui/
# │   └── index.js
# └── index.js (exports all segments)

# Create a widget without index files (uses .gitkeep)
create-fsd arch -w header -s ui model

# Create a page
create-fsd arch -p home -s ui api -i

# Add more segments to existing structure
create-fsd arch -f user-auth -s config types -i
# This will add new folders and update the root index file

The generated project follows the FSD architecture with clear layer separation:

src/
├── 📱 app/              # Application initialization layer
│   ├── providers/       # App providers (Router, i18n, Query Client)
│   ├── styles/          # Global styles
│   └── App.tsx/jsx      # Root component
│
├── 📄 pages/            # Pages layer - route components
│   ├── home/            # Home page
│   └── about/           # About page
│
├── 🧩 widgets/          # Widgets layer - composite UI blocks
│   ├── Header/          # Header widget
│   └── layouts/         # Layout components
│
├── ⚙️ features/         # Features layer - user scenarios
│   └── .gitkeep         # (Ready for your features)
│
├── 🗂️ entities/         # Entities layer - business entities
│   └── .gitkeep         # (Ready for your entities)
│
└── 🔧 shared/           # Shared layer - reusable code
    ├── api/             # API client configuration
    ├── store/           # State management stores
    └── ui/              # UI kit components

Note: TypeScript projects include .tsx/.ts files, while JavaScript projects use .jsx/.js

The generated project includes working examples for all included libraries:

• ✅ Routing - Multi-page setup with React Router
• ✅ State Management - Counter example with Zustand
• ✅ API Integration - Axios client with interceptors
• ✅ Data Fetching - React Query setup and usage
• ✅ Internationalization - i18n configuration with language switching
• ✅ Styling - TailwindCSS components and utilities
• ✅ Code Quality - ESLint rules configured

create-fsd                    # Show help
create-fsd app <name> [opts]  # Create new project
create-fsd arch [opts]        # Generate FSD structure

Create a new project from template

create-fsd app <project-name> [options]

# Create JavaScript project (default)
npx @t1ep1l0t/create-fsd app my-app

# Create TypeScript project
npx @t1ep1l0t/create-fsd app my-app --typescript
npx @t1ep1l0t/create-fsd app my-app -ts

# Specify template explicitly
npx @t1ep1l0t/create-fsd app my-app -t react -ts

Generate FSD-compliant architecture structures. Automatically detects project type (TS/JS) and creates appropriate files.

create-fsd arch [options]

# Create feature with index files
create-fsd arch -f authentication -s ui model api -i

# Create entity without index files
create-fsd arch -e user -s model api

# Create widget
create-fsd arch -w sidebar -s ui lib -i

# Create page
create-fsd arch -p dashboard -s ui model -i

# Add more segments to existing structure
create-fsd arch -f authentication -s config types -i

The arch command automatically detects your project type:

• TypeScript projects (with tsconfig.json) → creates .ts/.tsx files
• JavaScript projects (without tsconfig.json) → creates .js/.jsx files

• Feature-Sliced Design Documentation
• FSD Best Practices

• React Documentation
• TypeScript Documentation
• Vite Documentation
• TailwindCSS Documentation

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests
• Add new framework templates

MIT © t1ep1l0t