create-web-loom

create-web-loom scaffolds a Vite project, installs Web Loom packages, and applies framework-specific starter overlays so your app boots into a Web Loom MVVM counter immediately. It supports npm, pnpm, yarn, and bun.

npm create web-loom@latest

Flow

1. Vite scaffold: Runs create-vite interactively.
2. Scaffold detection: Detects framework + JS/TS variant.
3. Package install: Installs published @web-loom/* packages.
4. Starter overlay: Copies templates from src/templates/shared and src/templates/<framework>/<variant> into the generated project.

The overlay intentionally replaces Vite's runnable starter entry files. create-vite is invoked with --no-immediate so Web Loom install + overlay steps always complete before any dev-server flow.

If a generated scaffold cannot be mapped to a supported template target, the CLI fails fast with an unsupported-scaffold error instead of writing incorrect files.

Supported frameworks

• React (TS, JS): src/App.tsx / src/App.jsx
• Preact (TS, JS): src/app.tsx / src/app.jsx
• Vue (TS, JS): src/App.vue
• Solid (TS, JS): src/App.tsx / src/App.jsx
• Svelte (TS, JS): src/App.svelte
• Lit (TS, JS): src/my-element.ts / src/my-element.js
• Vanilla (TS, JS): src/main.ts / src/main.js
• Qwik (TS, JS): src/app.tsx / src/app.jsx (and src/routes/index.tsx for route-based setups)

Shared starter files are copied for every framework (for example src/viewmodels/CounterViewModel.ts).

Template source of truth

Templates are file-based:

• packages/create-web-loom/src/templates/shared/**
• packages/create-web-loom/src/templates/<framework>/<variant>/**

During package build, these are copied to dist/templates/**. Runtime injection uses dist/templates so published binaries remain self-contained.

Framework and variant detection

Framework detection checks generated dependencies in this priority order:

1. @builder.io/qwik
2. solid-js
3. preact
4. react
5. vue
6. lit
7. svelte
8. fallback: vanilla

Variant detection resolves ts | js from:

• typescript dependency/devDependency, and
• scaffold entry file extensions (.ts/.tsx vs .js/.jsx).

Usage

# npm
npm create web-loom@latest my-app

# pnpm
pnpm create web-loom@latest my-app

# yarn
yarn create web-loom my-app

# bun
bun create web-loom@latest my-app

After generation:

cd my-app

# npm
npm install
npm run dev

# pnpm
pnpm install
pnpm dev

# yarn
yarn
yarn dev

# bun
bun install
bun run dev

Installed packages

• @web-loom/mvvm-core
• @web-loom/store-core
• @web-loom/query-core
• @web-loom/event-bus-core
• @web-loom/event-emitter-core
• @web-loom/signals-core
• @web-loom/design-core
• @web-loom/ui-core
• @web-loom/ui-patterns

If a package is temporarily unavailable on npm, the installer retries one package at a time and skips only unavailable package(s) rather than failing scaffolding entirely.