@blockquote/create-wc

create-wc

create-wc extends @open-wc/create and scaffolds Lit web components with a batteries-included setup for linting, formatting, testing, Sass, Vite, and Custom Elements Manifest generation.

Example output:

Tutorial

Use this section if you want the shortest path from zero to a working component.

Create a project

npm init @blockquote/wc

The generator will ask for:

• The custom element tag name
• An optional namespace
• Whether the project should use TypeScript

Start development

After the project is generated:

cd your-project-name
npm install
npm start

npm start runs the Vite workflow together with the Sass watcher.

How-to Guides

Use these commands once you already have a generated project.

Format the generated project

npm run format

This runs ESLint, Prettier, and Stylelint fixes.

Run tests

npm run test

For interactive browser testing:

npm run test:watch

Preview the demo output

Build the demo assets:

npm run dev:vite

Preview the built output:

npm run preview:vite

Build the TypeScript variant

In TypeScript projects:

npm run build

This runs Vite for bundling and tsc for declarations.

Regenerate Custom Elements documentation

npm run analyze

Enable Husky hooks

After git init, run:

npm run prepare

Reference

What the generator includes

• Lit for component authoring
• Vite for local development and preview builds
• Vitest in browser mode plus chai-a11y-axe for testing
• ESLint, Prettier, and Stylelint for code quality
• Sass via sass-style-template
• Custom Elements Manifest generation and README tooling

Generated project scripts

These scripts are available in generated projects.

Script	Purpose
npm start	Run Vite and the Sass watcher together
npm run vite	Start the Vite dev server
npm run dev:vite	Build the demo assets
npm run preview:vite	Preview the built demo
npm run test	Run Vitest
npm run test:watch	Run Vitest in browser mode without headless mode
npm run analyze	Generate the Custom Elements Manifest
npm run prepare	Install Husky hooks
npm run format	Run ESLint, Prettier, and Stylelint fixes
npm run sass:watch	Run the Sass watcher

Variant-specific scripts

JavaScript projects:

• npm run build prints a message because there is no TypeScript build step.

TypeScript projects:

• npm run build runs the library build and TypeScript declaration output.

Maintainer scripts for this repository

These scripts belong to this generator repository itself, not to generated projects.

Script	Purpose
npm start	Run the generator locally
npm run format	Format this repository

Explanation

This project exists to provide a more opinionated starting point than raw @open-wc/create, while still building on its generator model instead of replacing it.

The generated scaffold is aimed at teams building Lit-based web components that want:

• A ready-to-run development setup
• Sass support out of the box
• Test tooling for browser-oriented component work
• Linting and formatting defaults across JavaScript, TypeScript, HTML, and styles
• Custom Elements Manifest generation as part of the workflow

The repository itself is intentionally small: it assembles mixins and templates that define the generated project structure and scripts.

Related Links

• rollup-plugin-total-bundlesize
• vite-plugin-prevent-rewrite-imports-type-module
• Create TypeScript Declarations from JavaScript JSDoc