HTML Next

Universal components. Built with HTML.

Build reactive components in HTML. Keep markup, state, and styles together, then use the same component natively, in Vue, in React, or in Svelte.

Open source · MIT licensed

Build a component Use components

One source. Native DOM, Vue, React, or Svelte.

One HTML definition counter.html

<template component="x-counter">
  <defs>
    <state name="count" type="number" value="0"></state>
    <handler name="increment">
      <set name="count" expr:value="$count + 1"></set>
    </handler>
    <handler name="reset">
      <set name="count" expr:value="0"></set>
    </handler>
  </defs>
  <div>
    <button type="button" on:click="increment">
      Count: {$count}
    </button>
    <button type="button" on:click="reset">Reset</button>
  </div>
</template>

Live output

Try the component.

Download the HTML source ↓

Get started

You want to…	Start here
Learn to author HTML Next components	Build your first component, then use it natively.
Use components in an existing app	Usage starts with HTML Next and has Vue and React setup in its switcher.
Publish a component library	Publish your HTML files with instructions for the consuming app’s Vite plugin.
Generate framework source files	The separate Converter covers conversion commands and their output.

HTML Forms has its own installation and usage guide.

See Performance and size for benchmark results and bundle measurements.

Built on a public proposal

HTML Next is JavaScript tooling for the Declarative HTML Components and HTML Forms proposals. The component language has one reference: the public proposal. These guides cover installing and using its implementation.

The tools are in early development and the proposals are at Stage 0. Syntax and generated output may change. Browsers do not support this component syntax on their own; HTML Next runs or builds the definitions for your project.

Looma is a UI library authored with this component language. Explore the tools source, try a component, and report what you find.