A Fast & Light Virtual DOM Alternative
Clone or download
WebReflection Merge pull request #280 from mixed/fixed-demo
Update demo - I see, I've completely missed line 99. Thanks.
Latest commit 96e9896 Oct 18, 2018



hyperHTML logo

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

donate Backers on Open Collective Sponsors on Open Collective

Coverage Status Build Status License: ISC Greenkeeper badge Blazing Fast


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].

Seamlessly Isomorphic

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');

V2.5 Highlights

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

V2 Highlights

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.

Basic Example

The easiest way to describe hyperHTML is through an example.

// this is hyperHTML
function tick(render) {
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
setInterval(tick, 1000,


  • 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:

HTML Syntax Highlight

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

literally-html example

Prettier Templates

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

Questions ?

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

hyper or lit ?

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.