IDE Autocomplete (web-types)

reactolith includes a CLI tool to generate web-types for your custom components. This enables autocomplete and validation in IDEs like WebStorm, PhpStorm, and VS Code (with appropriate plugins).

Generate web-types.json

npx generate-web-types -c src/components/ui -o web-types.json -n my-app

The generator recursively scans the components directory, so both flat and nested structures are supported:

src/components/ui/ button.tsx # flat card.tsx # flat accordion/ accordion.tsx # nested accordion-item.tsx # nested

All components are discovered automatically — no extra configuration needed.

Options

Option	Short	Description	Default
`--components`	`-c`	Components directory. Repeatable / comma-separated (see “Multiple folders” below).	`components/ui`
`--tsconfig`	`-t`	TypeScript config file (one shared project for all groups)	`tsconfig.app.json` (else `tsconfig.json`)
`--out`	`-o`	Output file. Repeat to emit one file per group.	`web-types.json`
`--name`	`-n`	Library name. Repeat to set per-group.	`reactolith-components`
`--version`	`-v`	Library version. Repeat to set per-group.	`1.0.0`
`--prefix`	`-p`	Element name prefix (must be empty or end with `-`). Repeat to set per-group.	`""`
`--exclude`		Glob to skip (e.g. `*/.stories.tsx`). Repeatable.
`--help`	`-h`	Show help

All flags accept both --name value and --name=value.

Examples

# Minimal — uses defaults for everything else npx generate-web-types -c src/components/ui # With prefix — all elements get a "ui-" prefix (e.g. <ui-button>, <ui-card>) npx generate-web-types -c src/components -p ui- -o web-types.json # Full example with all options npx generate-web-types \ -c src/components/ui \ -o web-types.json \ -n my-app \ -v 2.0.0 \ -p app- \ -t tsconfig.app.json # Custom tsconfig (e.g. monorepo or library setup) npx generate-web-types -c packages/ui/src -t packages/ui/tsconfig.json -o packages/ui/web-types.json

Multiple folders, multiple prefixes

The web-types spec lets package.json point to an array of files, so you can ship one file per folder and give each its own prefix. Repeat -o to define more than one output, then pair the i-th -c and -p with it positionally:

npx generate-web-types \ -n my-app -v 1.0.0 \ -c src/components/ui -p ui- -o web-types/ui.json \ -c src/components/charts -p chart- -o web-types/charts.json \ -c src/components/forms -p form- -o web-types/forms.json

The CLI prints the snippet you should drop into package.json after each run, so you don't have to remember the array form:

{ "name": "my-app", "web-types": [ "./web-types/ui.json", "./web-types/charts.json", "./web-types/forms.json" ] }

Pairing rules. When -o appears N times, the rest line up like this:

-c must appear N times — one source folder per output. (Comma-separated values inside one -c still merge multiple folders into the same output.)
-p may appear 0 times (no prefix), 1 time (same prefix for every output), or N times (one per output).
-n and -v follow the same 0/1/N rule.
--exclude is shared across every group; -t uses one TypeScript project for all of them.

Configure your project

Add the generated file (or files) to your package.json:

{ "name": "my-app", "web-types": "./web-types.json" }

Result

After restarting your IDE, you'll get:

Autocomplete for custom element names (e.g. <ui-button>)
Prop suggestions with types and descriptions
Slot hints for components with children/slots
Validation for required props and valid values

Tip: Add npx generate-web-types ... to your build script to keep web-types in sync:

{ "scripts": { "build": "vite build && npx generate-web-types -c src/components/ui -o web-types.json" } }