{"id":25739,"library":"hyperx","title":"hyperx","description":"Tagged template string virtual DOM builder that replaces JSX with standard ES6 template literals. Current stable version: 3.0.1 (released 2020). Hyperx is unmaintained as of 2023; last commit was in 2020. It works with virtual-dom, React, hyperscript, or any hyperscript-style API (h(tagName, attrs, children)). Key differentiators: no transpiler needed for modern browsers/Node 4+, supports inline <style> parsing, optional self-closing tag handling, and createFragment option for React fragments. Compared to JSX, hyperx avoids a build step but may be slower due to runtime parsing.","status":"maintenance","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/choojs/hyperx","tags":["javascript","jsx","virtual-dom","vdom","react","hyperscript","template string","template","es6"],"install":[{"cmd":"npm install hyperx","lang":"bash","label":"npm"},{"cmd":"yarn add hyperx","lang":"bash","label":"yarn"},{"cmd":"pnpm add hyperx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Default DOM builder if you use hyperx without passing an h function","package":"hyperscript","optional":true}],"imports":[{"note":"Default export: hyperx is a function that takes an h function and options.","wrong":"const { hyperx } = require('hyperx')","symbol":"hyperx","correct":"import hyperx from 'hyperx'"},{"note":"Common pattern: create a tagged template function by passing an h function to hyperx.","wrong":"const hx = require('hyperx')(require('virtual-dom').h)","symbol":"hx (from hyperx)","correct":"const hx = hyperx(require('virtual-dom').h)"},{"note":"If using hyperxify browserify transform, the compiled version exports 'html' as a plain function.","wrong":"const html = require('hyperx')","symbol":"html (via hyperxify)","correct":"import html from 'hyperxify/html'"}],"quickstart":{"code":"const hyperx = require('hyperx')\nconst vdom = require('virtual-dom')\nconst hx = hyperx(vdom.h)\n\nconst title = 'world'\nconst items = [1, 2, 3]\nconst tree = hx`<div>\n  <h1>hello ${title}!</h1>\n  <ul>${items.map(i => hx`<li>${i}</li>`)}</ul>\n</div>`\nconsole.log(vdom.create(tree).toString())\n// Output:\n// <div>\n//   <h1>hello world!</h1>\n//   <ul><li>1</li><li>2</li><li>3</li></ul>\n// </div>","lang":"javascript","description":"Creating a simple virtual DOM tree with hyperx and virtual-dom, demonstrating variables and mapping arrays."},"warnings":[{"fix":"Consider using the hyperxify browserify transform to statically compile templates.","message":"Hyperx parses template literals at runtime, which may be slower than pre-compiled JSX.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use React.createElement.apply(null, [component, properties].concat(children)) as the h function.","message":"When using React, you must create a custom createElement wrapper to avoid key warnings. See examples in README.","severity":"gotcha","affected_versions":">=2.5.0"},{"fix":"Check the DOM builder's documentation for how it handles function attributes.","message":"If you pass a function as an attribute, hyperx may treat it as an event handler. Verify the target DOM builder's behavior.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Test templates that include CSS selectors with > or self-closing tags; update as needed.","message":"v3.0.0 changed parsing behavior: direct descendant CSS selectors in inline <style> tags are now supported, and optional closing tags for self-closing tags are handled differently.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Evaluate alternatives like lit-html for actively maintained template-based DOM builders.","message":"hyperx is no longer actively maintained; last release in 2020.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use `const hyperx = require('hyperx')` or `import hyperx from 'hyperx'`.","cause":"hyperx is a default export; using named import or wrong require syntax.","error":"Uncaught TypeError: hyperx is not a function"},{"fix":"Make sure to pass a valid h function, e.g., `var h = require('virtual-dom').h; var hx = hyperx(h)`.","cause":"The argument to hyperx() must be a function (the hyperscript h function). Often missing or undefined.","error":"Error: h is not a function"},{"fix":"Use the createFragment option or a custom createElement that spreads children: `React.createElement.apply(null, [component, properties].concat(children))`.","cause":"When using hyperx with React, children passed as array may lack keys. React's createElement expects separate arguments.","error":"Warning: Each child in a list should have a unique \"key\" prop."},{"fix":"Ensure your environment supports ES6 tagged templates. For older targets, use hyperxify to precompile.","cause":"Using hyperx with a transpiler that doesn't support tagged templates, or syntax error in template.","error":"Uncaught SyntaxError: Invalid tagged template literal"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}