create-wcb

[!Note] Work in progress CLI for wcb development. Currently, it scaffolds a new web component project with our CEM Analyzer Plugin already configured

Scaffold a publishable web-component-base (wcb) custom element:

npm create wcb@latest
# or: npm create wcb@latest my-button
# or: pnpm create wcb / yarn create wcb / bun create wcb

What you get

• A custom element built on wcb's static props convention, written in TypeScript — the class, tag, and file names are stamped from your project name (my-button → MyButton / <my-button>), so there are no rename-me TODOs
• A Vite setup patterned on the ayo-run/web-component template: npm run dev serves the demo page, npm run build:lib produces ESM + UMD bundles and .d.ts types in dist/, with web-component-base external as a peerDependency
• custom-elements.json generation set up end to end:
  • custom-elements-manifest.config.mjs configured with web-component-base/cem-plugin, so every static props key becomes a typed attribute + field in the manifest
  • an analyze script (npm run analyze) running @custom-elements-manifest/analyzer
  • the customElements field set in package.json, which is how Storybook, editors, and other tooling discover the manifest
  • the manifest ships inside the published package: prepack rebuilds dist/ and regenerates custom-elements.json, and both are in files

The manifest is one shared custom-elements.json per package — the file every tool expects — regenerated on demand and gitignored in the repo.

Options

npm create wcb@latest [directory]

Prompts for a directory when omitted; . scaffolds into the current (empty) directory. Refuses to write into a non-empty directory. A hyphen-less name gets an -element suffix on the tag (button → <button-element>), since custom element tag names require a hyphen.

Prefer starting from GitHub instead of the terminal? The ayo-run/web-component template repository serves the same purpose via "Use this template".

Part of the wcb project · MIT · Ayo Ayco