htm-3-1-0

name	htm-3-1-0
description	A skill for using htm 3.1, a tagged template syntax library that provides JSX-like markup in plain JavaScript without requiring a transpiler. Use when building browser-compatible React/Preact applications with native ES modules, implementing server-side rendering, or creating lightweight UI components without build tooling.
version	0.1.0
author	Tangled <[e-mail]>
license	MIT
tags	["jsx-alternative","tagged-templates","preact","react","virtual-dom","es-modules","server-side-rendering","hyperscript"]
category	development
external_references	["https://github.com/developit/htm"]

htm 3.1 — Hyperscript Tagged Markup

Overview

htm is a library that provides JSX-like syntax using standard JavaScript tagged template literals. It compiles HTML-style markup into hyperscript calls at runtime, eliminating the need for a transpiler. At under 600 bytes gzipped (under 500 with Preact), it enables Virtual DOM development directly in the browser with native ES modules.

htm is framework-agnostic — it works with any function that follows the hyperscript pattern h(type, props, ...children). Official integrations are provided for Preact and React, but it can be bound to custom renderers like vhtml (string HTML output), jsxobj (object configuration), or any custom h() function.

When to Use

• Building React or Preact applications without a build step or transpiler
• Prototyping UI components directly in the browser with native ES modules
• Server-side rendering where JSX compilation is undesirable
• Creating lightweight standalone HTML files with no tooling
• Any scenario where you want JSX-like syntax but cannot use Babel, TypeScript, or similar compilers
• Embedding Virtual DOM in environments that only support standard JavaScript

Core Concepts

Tagged Template Literals

htm uses JavaScript's built-in tagged template literal feature. A tagged template like html\

Hello

` passes the static string parts and interpolated values to a tag function (html`), which htm provides by binding itself to a hyperscript function.

The Hyperscript Pattern

htm translates markup into calls to an h(type, props, ...children) function. This is the same pattern used by React's createElement, Preact's h, and many other Virtual DOM libraries. You tell htm which h function to use via .bind().

No Transpilation Required

Unlike JSX, which requires Babel or TypeScript compilation, tagged templates are standard JavaScript supported in all modern browsers. This means you can write component markup directly in .js files with zero build configuration.

Installation and Setup

htm is published to npm and available via CDN:

Via npm:

npm i htm

Via CDN (no build tool needed):

 htm  ;
 html = htm.(.);