HTM (Hyperscript Tagged Markup)

HTM provides JSX-like syntax using tagged template literals for Virtual DOM creation, eliminating the need for transpilation. It's a lightweight library (under 600 bytes) that enables component-based user interfaces with any hyperscript-compatible renderer like React, Preact, or custom rendering functions.

Package Information

• Package Name: htm
• Package Type: npm
• Language: JavaScript/TypeScript
• Version: 3.1.1
• Installation: npm install htm
• Repository: https://github.com/developit/htm
• License: Apache-2.0

Core Imports

ESM (preferred):

import htm from "htm";
// Create bound template function
const html = htm.bind(h); // where h is your hyperscript function

CommonJS:

const htm = require("htm");
const html = htm.bind(h);

UMD (browser):

<script src="https://unpkg.com/htm/dist/htm.umd.js"></script>
<script>
  const html = htm.bind(h);
</script>

Basic Usage

import htm from "htm";

// Your hyperscript function (h)
const h = (tag, props, ...children) => ({ tag, props, children });

// Bind HTM to your hyperscript function
const html = htm.bind(h);

// Use tagged template syntax
const vdom = html`
  <div class="container">
    <h1>Hello, ${name}!</h1>
    <button onclick=${handleClick}>Click me</button>
  </div>
`;

// Works with components
const MyComponent = ({ title }) => html`<h2>${title}</h2>`;
const app = html`<${MyComponent} title="Welcome" />`;

// Multiple root elements
const items = html`
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
`;

Architecture

HTM consists of several key components:

• Core Parser: Tagged template literal parser that converts HTML-like syntax to hyperscript calls
• Template Caching: Performance optimization through template compilation caching
• Framework Integrations: Pre-configured variants for popular frameworks (Preact, React)
• Build Variants: Regular and mini versions for different bundle size requirements
• Type System: Full TypeScript support with generic type preservation

Capabilities

Core HTM Engine

The primary HTM function factory that creates tagged template functions bound to any hyperscript-compatible renderer.

const htm: {
  bind<HResult>(
    h: (type: any, props: Record<string, any>, ...children: any[]) => HResult
  ): (strings: TemplateStringsArray, ...values: any[]) => HResult | HResult[];
};

Key Features:

• Template caching for performance
• Support for any hyperscript function pattern: h(type, props, ...children)
• Returns single elements or arrays for multiple root elements
• Full TypeScript generic support for type preservation

Core HTM API

Preact Integration

Pre-configured HTM integration for Preact applications with optimized imports and type definitions.

// From htm/preact
declare const html: (strings: TemplateStringsArray, ...values: any[]) => VNode;
declare function render(tree: VNode, parent: HTMLElement): void;
declare class Component { /* Preact Component class */ }

Features:

• Pre-bound html template function for Preact
• Direct re-exports of Preact's core functions
• Full hook integration via preact/hooks re-exports
• Standalone variant with all hooks included

Preact Integration

React Integration

Streamlined HTM integration for React applications with createElement binding.

// From htm/react
declare const html: (strings: TemplateStringsArray, ...values: any[]) => React.ReactElement;

Features:

• Pre-bound html template function for React
• Automatic createElement binding
• Full React TypeScript support

React Integration

Advanced Usage & Utilities

Advanced customization through custom hyperscript functions and build-time integrations.

Use Cases:

• Custom rendering backends (HTML strings, JSON structures, etc.)
• Build-time optimization with Babel plugins
• Framework integrations and adapters
• Performance profiling and analysis

Advanced Usage

Template Syntax Features

HTM supports extensive HTML-like syntax features:

• Standard HTML: <div class="foo">content</div>
• Self-closing tags: <img src="photo.jpg" /> or <Component />
• Dynamic values: <div class=${className}>${content}</div>
• Boolean attributes: <input disabled /> (becomes disabled: true)
• Component interpolation: <${Component} prop="value" />
• Prop spreading: <div ...${props} additional="value" />
• Multiple root elements: <div>1</div><div>2</div> (returns array)
• Fragment syntax: <><child1/><child2/></>
• Implicit closing: <div>content</> (infers closing tag)
• HTML comments: <!-- This is a comment -->
• Mixed quotes: Both single and double quotes supported
• Component end tags: <${Component}>children</${Component}>

Export Variants

HTM provides multiple export configurations for different use cases:

All variants support multiple module formats (ESM, CommonJS, UMD) and include TypeScript definitions.

Types

// Core HTM type
interface HTM {
  bind<HResult>(
    h: (type: any, props: Record<string, any>, ...children: any[]) => HResult
  ): (strings: TemplateStringsArray, ...values: any[]) => HResult | HResult[];
}

// Template function signature
type TemplateFunction<T> = (
  strings: TemplateStringsArray,
  ...values: any[]
) => T | T[];

// Hyperscript function signature
type HyperscriptFunction<T> = (
  type: any,
  props: Record<string, any> | null,
  ...children: any[]
) => T;