A Fast & Light Virtual DOM Alternative available for Node.js and NativeScript too.

You can require or import hyperHTML with any bundler and in different ways.

If requiring or importing from "hyperhtml" doesn't work, try requiring from "hyperhtml/cjs" for CommonJS friendly bundlers (WebPack), or "hyperhtml/esm" for ESM compatible bundlers (Rollup).

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Thank you to all our backers! 🙏 [Become a backer]

This project exists thanks to all the people who contribute. [Contribute].

No matter if you use ESM or CommonJS, you can use hypermorphic to load same features on both client and server.

// ESM example (assuming bundlers/ESM loaders in place)
import {bind, wire} from 'hypermorphic';

// CommonJS example
const {bind, wire} = require('hypermorphic');

• <self-closing /> tags for both custom elements and any other as well 🎉

Following most important changes in version 2:

• fully rewritten, and consumable, as ES2015 Module
• usable via CDN as bundled global hyperHTML variable
• restructured in modules, utilities, helpers, and commented all over for simplified contribution
• removed .escape and .adopt, either useless or unstable. hyperHTML.adopt will be implemented as module a part
• added support for objects as style attribute, fully compatible with Preact implementation
• improved performance in numerous ways
• custom elements V0 and V1 are now fully, and properly, supported through document.importNode and/or regular cloneNode tested against common polyfills
• back to 4.6K thanks to rollup and its ability to merge all the things together like it was already in V1

A proper documentation full of examples can be found in viperhtml.js.org.

The easiest way to describe hyperHTML is through an example.

// this is hyperHTML
function tick(render) {
  render`
    <div>
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
    </div>
  `;
}
setInterval(tick, 1000,
  hyperHTML(document.getElementById('root'))
);

• Zero dependencies, no polyfills needed, and it fits in about 4.6KB (minified + brotli)
• Uses directly native DOM, no virtual DOM involved
• Designed for template literals, a templating feature built in to JS
• Compatible with plain DOM elements and plain JS data structures
• Also compatible with Babel transpiled output, hence suitable for every browser you can think of

IE9+ , iOS8+ , Android 4+ and every modern Mobile or Desktop Browser. You can verify directly through the following links:

• 100% code coverage for browsers natively compatible with string literals
• 100% code coverage for IE9+ and browsers that need transpiled code

If you are using Visual Studio Code you can install literally-html to highlight all literals handled by hyperHTML and others.

If you'd like to make your templates prettier than usual, don't miss this plugin: https://github.com/sgtpep/prettier-plugin-html-template-literals

Please ask anything you'd like to know in StackOverflow using the tag hyperhtml so that others can benefit from answers and examples.

You can read more on this hyperHTML vs lit-html comparison.

npm install hyperhtml

If your bundler does not work with the following:

// ES6
import hyperHTML from 'hyperhtml';

// CJS
const hyperHTML = require('hyperhtml');

You can try any of these other options.

import hyperHTML from 'hyperhtml/esm';
// or
import {hyper, wire, bind, Component} from 'hyperhtml/esm';
// or
import hyperHTML from 'https://unpkg.com/hyperhtml?module';


const hyperHTML = require('hyperhtml/cjs').default;
// or
const {hyper, wire, bind, Component} = require('hyperhtml/cjs');

In alternative, there is a pre-bundled require("hyperhtml/umd") or via unpkg as UMD module.