Registry / web-framework / hyperx

hyperx

JSON →
library3.0.1jsnpmunverified

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.

web-framework
github ↗package ↗
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 export: hyperx is a function that takes an h function and options.

import hyperx from 'hyperx'

Common pattern: create a tagged template function by passing an h function to hyperx.

const hx = hyperx(require('virtual-dom').h)

If using hyperxify browserify transform, the compiled version exports 'html' as a plain function.

import html from 'hyperxify/html'

Creating a simple virtual DOM tree with hyperx and virtual-dom, demonstrating variables and mapping arrays.

const hyperx = require('hyperx') const vdom = require('virtual-dom') const hx = hyperx(vdom.h) const title = 'world' const items = [1, 2, 3] const tree = hx`<div> <h1>hello ${title}!</h1> <ul>${items.map(i => hx`<li>${i}</li>`)}</ul> </div>` console.log(vdom.create(tree).toString()) // Output: // <div> // <h1>hello world!</h1> // <ul><li>1</li><li>2</li><li>3</li></ul> // </div>
Debug
Known footguns
gotchaHyperx parses template literals at runtime, which may be slower than pre-compiled JSX.
gotchaWhen using React, you must create a custom createElement wrapper to avoid key warnings. See examples in README.
gotchaIf you pass a function as an attribute, hyperx may treat it as an event handler. Verify the target DOM builder's behavior.
breakingv3.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.
deprecatedhyperx is no longer actively maintained; last release in 2020.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
10 hits · last 30 days
claudebot
4
gptbot
3
ahrefsbot
3
Resources
githubhttps://github.com/choojs/hyperx ↗
packagehttps://www.npmjs.com/package/hyperx ↗