{"id":19202,"library":"babel-plugin-transform-jsx-to-htm","title":"babel-plugin-transform-jsx-to-htm","description":"A Babel plugin that compiles JSX into tagged template literals compatible with the htm library. Current stable version is 2.2.0. This plugin enables developers to use JSX syntax without a full Virtual DOM library or React, producing lightweight template literals instead of React.createElement calls. It supports custom tag functions, automatic imports of the htm tag, and namespaced JSX elements. Compared to similar tools like babel-plugin-jsx-to-html, this plugin specifically targets htm's syntax and ecosystem, offering tight integration with Preact and other htm-based libraries. Release cadence is irregular; last major feature release was v2.2.0 in 2020. Not actively maintained, but functional for existing projects.","status":"maintenance","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/developit/htm","tags":["javascript","tagged template","template literals","html","htm","jsx","virtual dom","hyperscript","babel"],"install":[{"cmd":"npm install babel-plugin-transform-jsx-to-htm","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-jsx-to-htm","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-jsx-to-htm","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a Babel plugin, used in Babel config via CommonJS require or as a string in plugins array. ESM import may fail in Node.js environments.","wrong":"import plugin from 'babel-plugin-transform-jsx-to-htm'","symbol":"default (plugin)","correct":"module.exports = require('babel-plugin-transform-jsx-to-htm')"},{"note":"Options must be passed as a nested array: [['babel-plugin-transform-jsx-to-htm', { options }]].","wrong":"plugins: ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]","symbol":"plugin (string usage)","correct":"plugins: ['babel-plugin-transform-jsx-to-htm']"},{"note":"The plugin auto-generates the import statement; the developer does not manually import htm. The export key refers to a named export from the module.","wrong":"import html from 'htm'","symbol":"htm import (via plugin's import option)","correct":"plugins: [['babel-plugin-transform-jsx-to-htm', { import: { module: 'htm', export: 'html' } }]]"}],"quickstart":{"code":"// .babelrc or babel.config.js\nmodule.exports = {\n  plugins: [\n    ['babel-plugin-transform-jsx-to-htm', {\n      tag: 'html',\n      import: {\n        module: 'htm/preact',\n        export: 'html'\n      }\n    }]\n  ]\n};\n\n// Input (source.jsx):\nconst App = () => <div>Hello World</div>;\n\n// Output (transpiled):\nimport { html as html } from 'htm/preact';\nconst App = () => html`<div>Hello World</div>`;","lang":"javascript","description":"Babel config to compile JSX into htm tagged templates with automatic import of the html tag from htm/preact."},"warnings":[{"fix":"Consider migrating to babel-plugin-htm (if available) or using htm directly with JSX pragma.","message":"Package is no longer actively maintained; last release 2.2.0 (2020). Works with older Babel versions but may break with future Babel updates.","severity":"deprecated","affected_versions":">=2.2.0"},{"fix":"Use [['babel-plugin-transform-jsx-to-htm', { ... }]] instead of ['babel-plugin-transform-jsx-to-htm', { ... }].","message":"Options must be wrapped in an array when passed to Babel plugin's configuration.","severity":"gotcha","affected_versions":"*"},{"fix":"Run 'npm install htm' if you use the import option.","message":"The import option generates an import statement; it does not bundle or resolve the htm module. Ensure htm is installed.","severity":"gotcha","affected_versions":"*"},{"fix":"Update to v2.2.0+ or avoid namespaced JSX.","message":"Namespaced JSX (e.g., <ns:tag ns:attr='v'>) requires v2.2.0 or later.","severity":"gotcha","affected_versions":"<2.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-transform-jsx-to-htm","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'babel-plugin-transform-jsx-to-htm'"},{"fix":"Use [['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]] instead of ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }].","cause":"Plugin options passed incorrectly (not wrapped in array).","error":"Error: .plugins[0][1] must be an object, string, or function"},{"fix":"Set import option correctly or ensure tag matches your import. Example: { import: { module: 'htm/preact', export: 'html' } }.","cause":"htm module not imported or tag function misspelled.","error":"TypeError: html is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}