HTML Next

Universal components. Built with HTML.

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

Open source · MIT licensed

Use Vite Use the converter Use C#

Build with Vite, generate framework source, or render with C#.

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 this reactive component, built without scripting.

Download the HTML source ↓

Conversion is tested against Looma’s complete catalog and shared interaction tests in Chromium. Parity checks also compare behavior and rendering in Chromium, Firefox, and WebKit.

Choose your tools

You want to…	Start here
Build browser components with Vite	Vite and browser covers native DOM and framework imports through the Vite plugin.
Generate framework source with the converter	Converter generates Vue, React, Preact, Svelte or Angular files for your framework's build.
Render request data with C#	C# quick start installs the NuGet package and renders an ASP.NET response. Continue with C# browser hydration for interactive pages.

New to the component language? Build your first component. To distribute components, publish HTML sources for Vite or publish generated framework packages.

Full-stack Node and C# examples demonstrate the same component dataflow in both server hosts.

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 provides JavaScript tooling and a native .NET initial renderer 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 implementations.

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.