Convert once. Build with your framework.

Install the converter

npm install --save-dev @nextwebwg/html-next-converter

The CLI is html-next-convert. The examples below use npx to run the installed command. Targets are Vue 3.5, React 19.3, and Svelte 5.57.1.

Convert a library

Run the command for your target from your project root. Quote the glob so the converter expands it, and use separate output directories to preserve each inventory.

npx html-next-convert vue 'components/**' --mode library --out-dir generated/vue-target
npx html-next-convert react 'components/**' --mode library --out-dir generated/react-target
npx html-next-convert svelte 'components/**' --mode library --out-dir generated/svelte-target

A directory such as components/ is also accepted, as are explicit .html files. Definitions keep their source-directory layout beneath the target folder. Export names use PascalCase derived from component tags; each definition in a multi-component HTML file gets its own export.

The generated files use their target framework directly and have no HTML Next runtime dependency. The converter also copies controllers and writes the small helper files each component needs.

Svelte conversion is available and uses the standard, unpatched framework. A known upstream limitation affects focused inputs when keyed rows reorder: the edited value and selection remain, but focus can be lost and Chromium fires blur and focusout. Svelte moves rows with ordinary DOM insertion, which can clear focus. This affects mount and hydration; see Svelte issue #3973 and its editable Playground reproduction.

If a component uses $html to render an HTML string, its generated code needs the parse5 package. Install the dependencies listed under package.dependencies in html-next.conversion.json; components without $html do not need parse5.

Choose the output shape

Both modes write html-next.conversion.json with the inputs, entry, artifacts, target version, and required package dependencies and peers. Merge its package fields into your published manifest. Entries export components for the consumer to mount or hydrate with its framework. If a <data src> URL is component-relative, pass --public-root-url /app/ when the conversion root is served at /app/.

Package the results

Ship for Vue and React shows a complete library build: convert both targets automatically, compile their JavaScript and types, publish their CSS, and expose Vue and React entries from one package.

Svelte libraries can publish the generated components, CSS, controllers, and helpers as source, or compile them with @sveltejs/vite-plugin-svelte, svelte-check, and svelte2tsx. Give each target its own package subpath; framework peers can be optional when those entries are independently consumable.

Prefer conversion during the app build?

Use the Usage guide. It converts local imports and installed source libraries on demand and prepares their types.

Publish HTML instead

For most component libraries, publish your HTML files and give consumers the Vite-plugin instructions. Each app builds the same package for native HTML Next, Vue, React, or Svelte. You do not need a library build script.

Diagnostics

Unsupported constructs fail explicitly. The proposal defines the component language; the converter documentation describes the implementation's current coverage.