{"id":25731,"library":"htm","title":"htm","description":"HTM (Hyperscript Tagged Markup) is a small JSX-like syntax for virtual DOM using standard JavaScript tagged templates, eliminating the need for a transpiler. Current stable version is 3.1.1, released with TypeScript module support improvements and package exports for Node 12+. It is actively maintained by the Preact team with a regular release cadence. HTM works in all modern browsers and is <600 bytes min+gzip. Key differentiators: no build step required, optional HTML-style quotes, component end-tags, HTML comments, and static subtree caching in v3. It provides off-the-shelf bindings for React and Preact, and can be customized with any hyperscript function. The package ships TypeScript type definitions, supports ESM and CJS, and can be compiled away with babel-plugin-htm for zero runtime cost in production.","status":"active","version":"3.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/developit/htm","tags":["javascript","Hyperscript Tagged Markup","tagged template","template literals","html","htm","jsx","virtual dom","hyperscript","typescript"],"install":[{"cmd":"npm install htm","lang":"bash","label":"npm"},{"cmd":"yarn add htm","lang":"bash","label":"yarn"},{"cmd":"pnpm add htm","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required when using htm/preact or htm/preact/standalone bindings","package":"preact","optional":true},{"reason":"Required when using htm/react bindings","package":"react","optional":true}],"imports":[{"note":"ESM-only since v3. CommonJS require() may work with bundlers but is not officially supported. The default export is the htm factory function, not the html tag.","wrong":"const htm = require('htm')","symbol":"default (htm function)","correct":"import htm from 'htm'"},{"note":"Default export from htm/preact is not html; it is the bind() function. Always use named import for the Preact binding.","wrong":"import html from 'htm/preact'","symbol":"html (Preact binding)","correct":"import { html } from 'htm/preact'"},{"note":"While the manual bind() works, it does not share the template cache across modules. Use the pre-built htm/react binding for proper caching.","wrong":"import React from 'react'; import htm from 'htm'; const html = htm.bind(React.createElement)","symbol":"html (React binding)","correct":"import { html } from 'htm/react'"},{"note":"The standalone bundle is only available under htm/preact/standalone. It bundles both htm and Preact's core, including render, Component, and createContext.","wrong":"import { html, render } from 'htm/standalone'","symbol":"html + render (standalone)","correct":"import { html, render } from 'htm/preact/standalone'"},{"note":"The mini version (~450 bytes) supports only lowercase HTML tags. It is importable directly from 'htm/mini' since v3.","wrong":"import htm from 'htm/dist/mini'","symbol":"Mini version","correct":"import htm from 'htm/mini'"}],"quickstart":{"code":"import { render } from 'https://unpkg.com/preact@latest?module';\nimport htm from 'https://unpkg.com/htm@latest?module';\n\nconst html = htm.bind(render);\n\nconst App = () => html`\n  <div class=\"app\">\n    <h1>Hello, world!</h1>\n    <p>This is completely ${'dynamic'}.</p>\n  </div>\n`;\n\nrender(html`<${App} />`, document.body);","lang":"javascript","description":"Shows how to use htm via CDN with Preact to create and render a component with dynamic content."},"warnings":[{"fix":"Ensure static subtrees (no dynamic values) have no side effects in render functions. If side effects are needed, add a dynamic value (e.g., a prop) to force re-evaluation.","message":"In v3.0.0, static subtree caching was introduced, which may cause components with side effects in static children not to be re-rendered.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use ES module import syntax (import) instead of require(). If a CommonJS environment is required, use a bundler like Webpack or Rollup, or downgrade to v2.","message":"HTM v3 dropped support for CommonJS require() in favor of ESM-only exports.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use import { html, render } from 'htm/preact/standalone' instead of the .module.js path.","message":"The htm/preact/standalone.module.js file is deprecated in favor of htm/preact/standalone (ESM) since v3.1.0.","severity":"deprecated","affected_versions":">=3.1.0"},{"fix":"Use ...${props} for spreading props. For boolean attributes, just include the attribute name: <div hidden>.","message":"Spread operators for props must use triple dots: <div ...${props}>, not <div {...props}> which is JSX-only.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to htm >=2.2.0 or use a transpiler like babel-plugin-htm for consistent behavior.","message":"HTM v2 removed support for mixed static and dynamic property values that was later re-added in v2.2.0. If upgrading from v1, ensure property concatenation works as expected.","severity":"breaking","affected_versions":">=2.0.0 <2.2.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"const html = htm.bind(React.createElement);","cause":"Using default import from 'htm' but htm returns a factory function that must be bound to a hyperscript function.","error":"TypeError: htm is not a function"},{"fix":"Use import htm from 'https://unpkg.com/htm?module' and then const html = htm.bind(React.createElement); or import { html } from 'https://unpkg.com/htm/preact?module'.","cause":"Trying to import { html } from the base 'htm' package, but 'html' is only available from 'htm/preact' or 'htm/react'.","error":"Uncaught SyntaxError: The requested module 'https://unpkg.com/htm?module' does not provide an export named 'html'"},{"fix":"Install preact: npm install preact","cause":"Using htm/preact without preact installed or available in the module graph.","error":"Error: [htm] Could not find module 'preact'"},{"fix":"Add a key attribute to list items: <li key=${item.id}>${item.name}</li>","cause":"HTM does not automatically add key props when rendering arrays. JSX-style key attribute is required.","error":"Warning: Each child in a list should have a unique 'key' prop."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}