zenncode

zenncode is a frontend scaffolding CLI that creates a clean project structure with optional starter files and smart defaults.

Generated projects also include project-root folders:

• docs/ — product notes, architecture, and onboarding
• tests/ — unit, integration, and end-to-end tests

Framework install commands

Create the app with the official CLI first, cd into it, then run zenncode init.

React

npm create vite@latest my-app -- --template react
cd my-app
npm install
npx zenncode init --framework react

TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npx zenncode init --framework react --ts

React Router

npx create-react-router@latest my-app
cd my-app
npm install
npx zenncode init --framework react-router --ts

React Router v7

Library-mode starter using the modern createBrowserRouter and RouterProvider APIs:

npx create-react-router@latest my-app
cd my-app
npm install
npx zenncode init --framework react-router-v7 --ts

Projects with react-router 7.x in package.json are auto-detected as React Router v7.

React Expo

npx create-expo-app@latest my-app
cd my-app
npm install
npx zenncode init --framework expo --ts

Vue

npm create vue@latest my-app
cd my-app
npm install
npx zenncode init --framework vue

Nuxt

npx nuxi@latest init my-app
cd my-app
npm install
npx zenncode init --framework nuxt

Next.js

npx create-next-app@latest my-app
cd my-app
npx zenncode init --framework next --ts --yes

Angular

npx @angular/cli@latest new my-app
cd my-app
npm install
npx zenncode init --framework angular --install

Vite

npm create vite@latest my-app
cd my-app
npm install
npx zenncode init --framework vite

TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npx zenncode init --framework vite --ts

Install zenncode

npm i zenncode

Run without install

npx zenncode init

zenncode init

zenncode init
zenncode init --framework react-router --ts
zenncode init --framework react-router-v7 --ts
zenncode init --framework expo --ts
zenncode init --framework vue --router
zenncode init --framework nuxt
zenncode init --framework next --yes
zenncode init --framework angular --install
zenncode init --interactive

Interactive mode uses a radio-style template selector with green highlight for the active option. Use arrow keys, then press Enter.

Architecture picker

Choose the folder architecture generated by zenncode init. Pick it from the interactive setup, or pass a flag:

zenncode init --architecture modular --framework vite --ts
zenncode init --arch fsd --framework next
zenncode init --atomic

Available architectures:

• monolithic — Monolithic (Traditional) Architecture: flat, classic layout
• type-based — Type-Based / Technical Folder Structure (default)
• layer-based — Layer-Based Architecture (Separation of Concerns): presentation/, application/, domain/, data/
• modular — Modular Architecture (Feature-Based): features/<name>/, shared/
• atomic-design — Atomic Design (UI Hierarchy): atoms/, molecules/, organisms/, templates/
• fsd — Feature-Sliced Design (FSD): app/, pages/, widgets/, features/, entities/, shared/
• micro-frontend — Micro-Frontend Architecture: container/, remotes/, shared/
• clean-architecture — Clean Architecture (Uncle Bob): domain/, application/, presentation/, infrastructure/
• hexagonal — Hexagonal Architecture (Ports & Adapters): core/, adapters/in/, adapters/out/
• n-tier — N-Tier / Multi-Tier Architecture: presentation/, business/, data-access/, common/
• jamstack — Jamstack Architecture (JavaScript, APIs, Markup): pages/, content/, lib/api
• headless — Headless Architecture (decoupled frontend and backend): typed API client layer in api/

Shorthand flags: --monolithic, --type-based, --layer-based, --modular, --atomic, --fsd, --micro-frontend, --clean, --hexagonal, --n-tier, --jamstack, --headless

The chosen architecture is recorded in the generated zenncode.md guide. Framework conventions are respected where they exist (Nuxt keeps layouts/default.vue + pages/index.vue; Expo uses screens/; Vue uses composables/ and stores/).

Available options

• --framework <react-router|react-router-v7|expo|vue|nuxt|next|angular|react|vite>
• --react-router, --react-router-v7, --expo, --vue, --nuxt, --next, --angular, --react, --vite
• --architecture <monolithic|type-based|layer-based|modular|atomic-design|fsd|micro-frontend|clean-architecture|hexagonal|n-tier|jamstack|headless>
• --arch <name> plus the shorthand flags listed above
• --tailwind / --no-tailwind
• --ts / --no-ts
• --router / --no-router
• --install / --no-install
• --interactive
• --yes
• --help