Registry / web-framework / babel-plugin-transform-jsx-to-htm

babel-plugin-transform-jsx-to-htm

library2.2.0jsnpmunverified

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.

web-framework

npm install babel-plugin-transform-jsx-to-htm

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-jsx-to-htm

web-frameworkjavascriptv2.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (plugin)

✓ module.exports = require('babel-plugin-transform-jsx-to-htm')

✗ import plugin from 'babel-plugin-transform-jsx-to-htm'

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.

plugin (string usage)

✓ plugins: ['babel-plugin-transform-jsx-to-htm']

✗ plugins: ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]

Options must be passed as a nested array: [['babel-plugin-transform-jsx-to-htm', { options }]].

htm import (via plugin's import option)

✓ plugins: [['babel-plugin-transform-jsx-to-htm', { import: { module: 'htm', export: 'html' } }]]

✗ import html from 'htm'

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.

Babel config to compile JSX into htm tagged templates with automatic import of the html tag from htm/preact.

// .babelrc or babel.config.js module.exports = { plugins: [ ['babel-plugin-transform-jsx-to-htm', { tag: 'html', import: { module: 'htm/preact', export: 'html' } }] ] }; // Input (source.jsx): const App = () => <div>Hello World</div>; // Output (transpiled): import { html as html } from 'htm/preact'; const App = () => html`<div>Hello World</div>`;

Debug

Known issues

deprecatedPackage is no longer actively maintained; last release 2.2.0 (2020). Works with older Babel versions but may break with future Babel updates.

fix

Consider migrating to babel-plugin-htm (if available) or using htm directly with JSX pragma.

affects: >=2.2.0

gotchaOptions must be wrapped in an array when passed to Babel plugin's configuration.

fix

Use [['babel-plugin-transform-jsx-to-htm', { ... }]] instead of ['babel-plugin-transform-jsx-to-htm', { ... }].

affects: *

gotchaThe import option generates an import statement; it does not bundle or resolve the htm module. Ensure htm is installed.

fix

Run 'npm install htm' if you use the import option.

affects: *

gotchaNamespaced JSX (e.g., <ns:tag ns:attr='v'>) requires v2.2.0 or later.

fix

Update to v2.2.0+ or avoid namespaced JSX.

affects: <2.2.0

Errors

Common errors & fixes

Error: Cannot find module 'babel-plugin-transform-jsx-to-htm'

Plugin not installed or not in node_modules.

fix

npm install --save-dev babel-plugin-transform-jsx-to-htm

Error: .plugins[0][1] must be an object, string, or function

Plugin options passed incorrectly (not wrapped in array).

fix

Use [['babel-plugin-transform-jsx-to-htm', { tag: 'html' }]] instead of ['babel-plugin-transform-jsx-to-htm', { tag: 'html' }].

TypeError: html is not a function

htm module not imported or tag function misspelled.

fix

Set import option correctly or ensure tag matches your import. Example: { import: { module: 'htm/preact', export: 'html' } }.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/developit/htm ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-jsx-to-htm ↗