Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information. Readme updates for 2.0 Dec 20, 2018
index.mjs Add `variableArity:false` option. Dec 20, 2018


A Babel plugin that compiles htm syntax to hyperscript, React.createElement, or just plain objects.


Basic usage:

  ["htm", {
    "pragma": "React.createElement"
// input:
html`<div id="foo">hello ${you}</div>`

// output:
React.createElement("div", { id: "foo" }, "hello ", you)



The target "hyperscript" function to compile elements to (see Babel docs). Defaults to: "h".


By default, babel-plugin-htm will process all Tagged Templates with a tag function named html. To use a different name, use the tag option in your Babel configuration:

  ["babel-plugin-htm", {
    "tag": "myCustomHtmlFunction"


babel-plugin-htm transforms prop spreads (<a ...${b}>) into Object.assign() calls. For browser support reasons, Babel's standard _extends helper is used by default. To use native Object.assign directly, pass {useBuiltIns:true}.


By default, babel-plugin-htm transpiles to the same output as JSX would, which assumes a target function of the form h(type, props, ...children). If, for the purposes of optimization or simplification, you would like all calls to h() to be passed exactly 3 arguments, specify {variableArity:false} in your Babel config:

html`<div />`  // h('div', null, [])
html`<div a />`  // h('div', { a: true }, [])
html`<div>b</div>`  // h('div', null, ['b'])
html`<div a>b</div>`  // h('div', { a: true }, ['b'])

pragma=false (experimental)

Setting pragma to false changes the output to be plain objects instead of h() function calls:

// input:
html`<div id="foo">hello ${you}</div>`
// output:
{ tag:"div", props:{ id: "foo" }, children:["hello ", you] }

monomorphic (experimental)

Like pragma=false but converts all inline text to objects, resulting in the same object shape being used:

// input:
html`<div id="foo">hello ${you}</div>`
// output:
{ type: 1, tag:"div", props:{ id: "foo" }, text: null, children:[
  { type: 3, tag: null, props: null, text: "hello ", children: null },
] }