# Htm 3 1 0
> 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.
- Skill: `tangledgroup/htm-3-1-0` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add tangledgroup/htm-3-1-0`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tangledgroup/htm-3-1-0/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: tangledgroup (https://skillmd.com/u/tangledgroup)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tangledgroup/htm-3-1-0
---
# 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](https://github.com/developit/vhtml) (string HTML output), [jsxobj](https://github.com/developit/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:**
```js
npm i htm
```
**Via CDN (no build tool needed):**
```js
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(React.createElement);
```
**htm + Preact in a single import:**
```js
import { html, render } from 'https://unpkg.com/htm/preact/standalone.module.js';
```
### Framework Bindings
htm ships with pre-bound integrations for Preact and React that also share a template cache across modules:
**Preact:**
```js
import { render } from 'preact';
import { html } from 'htm/preact';
render(html`Hello!`, document.body);
```
**React:**
```js
import ReactDOM from 'react-dom';
import { html } from 'htm/react';
ReactDOM.render(html`Hello!`, document.body);
```
### Custom Hyperscript Binding
Bind htm to any `h(type, props, ...children)` function:
```js
import htm from 'htm';
function h(type, props, ...children) {
return { type, props, children };
}
const html = htm.bind(h);
console.log(html`
`;
```
### Components
Components are referenced with `<${ComponentName}>` syntax (dollar sign before the variable):
```js
const Header = ({ title }) => html`