{"id":19068,"library":"babel-plugin-htm","title":"babel-plugin-htm","description":"A Babel plugin that compiles htm's tagged template literal syntax (html`...`) into hyperscript calls, React.createElement, Preact h, or plain VNode objects. Version 3.1.1 is current, with a slower release cadence after the major 3.0.0 rework. Unlike JSX, htm uses standard template literals, requiring no build-time syntax changes beyond this plugin. The plugin offers flexible pragma configuration, auto-import options, and experimental outputs like plain objects or monomorphic structures. It integrates with React, Preact, and any hyperscript library and supports features like static subtree caching since v3.","status":"active","version":"3.0.0","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"],"install":[{"cmd":"npm install babel-plugin-htm","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-htm","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-htm","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the runtime tagged template function (e.g., html) that babel-plugin-htm compiles; not required if only using the plugin for static compilation.","package":"htm","optional":true}],"imports":[{"note":"Babel plugins are loaded as CommonJS modules. In .babelrc or babel.config.js, use require or module.exports.","wrong":"Cannot import as ES module; babel plugins are CommonJS.","symbol":"default (plugin)","correct":"module.exports = { plugins: [['htm', { pragma: 'h' }]] }"},{"note":"htm exports a named 'html' function, not default. For Preact, use 'htm/preact'.","wrong":"import html from 'htm'","symbol":"html","correct":"import { html } from 'htm'"},{"note":"htm/preact provides a preconfigured html function using Preact's h. For standalone, use 'htm/preact/standalone'.","wrong":"import { html } from 'htm' (works but no Preact runtime)","symbol":"html from htm/preact","correct":"import { html } from 'htm/preact'"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['htm', {\n      pragma: 'React.createElement',\n      tag: 'html',\n      useBuiltIns: true,\n      variableArity: false\n    }]\n  ]\n};\n\n// src/App.jsx\nimport { html } from 'htm/react';\n\nfunction App(props) {\n  return html`<div class=\"app\"><h1>Hello, ${props.name}!</h1></div>`;\n}\n\n// Compiled output:\n// import React from 'react';\n// import { html as _html } from 'htm/react';\n// function App(props) {\n//   return React.createElement(\"div\", { class: \"app\" }, React.createElement(\"h1\", null, \"Hello, \", props.name, \"!\"));\n// }","lang":"javascript","description":"Shows how to configure babel-plugin-htm with React pragma, use built-ins, fixed arity, and compile a tagged template component."},"warnings":[{"fix":"Add 'import' option to plugin config or manually import htm in your source files.","message":"In v3.0.0, the plugin no longer automatically injects the htm import. You must use the 'import' option to auto-import, or manually import htm.","severity":"breaking","affected_versions":">=3.0.0 <3.0.0"},{"fix":"Set 'pragma' option explicitly to avoid confusion: e.g., `pragma: 'h'` for Preact.","message":"The 'pragma' option default changed from 'h' to 'React.createElement'? No, default remains 'h' but it's recommended to set it explicitly.","severity":"deprecated","affected_versions":"all"},{"fix":"Always ensure your code uses the tagged template with the specified tag, or manually import the pragma function.","message":"When using 'import' option with a string, the import is added only if the tag is used. If not used, no import is added, which can cause runtime errors if you expected it.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure your hyperscript function can handle both rest args and array children. With false, always pass children as array.","message":"The 'variableArity' option (default true) produces calls like h('div', null, 'text') . Setting to false produces h('div', null, ['text']). This changes children parameter type from rest args to array.","severity":"gotcha","affected_versions":"all"},{"fix":"Enable @babel/plugin-proposal-object-rest-spread or use preset-env with targets supporting object spread.","message":"Setting 'useNativeSpread' to true uses object spread syntax in output, which requires Babel's object spread plugin or preset-env with appropriate targets.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install htm: npm install htm","cause":"The plugin expects the 'htm' package to be installed as a peer dependency.","error":"Error: Babel plugin 'htm' threw an error: Cannot find module 'htm'"},{"fix":"Either import a hyperscript lib (e.g., import { h } from 'preact') and set pragma: 'h', or use 'import' option to auto-import.","cause":"The compiled output calls h() but no hyperscript function is imported or defined.","error":"Uncaught ReferenceError: h is not defined"},{"fix":"Ensure babel-plugin-htm is configured and Babel is transpiling the code, or use htm at runtime without compilation.","cause":"The browser or Node does not natively understand tagged template literal usage for HTML generation.","error":"SyntaxError: Unexpected template string (at ...) when using html`...` without plugin"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}