Package Exports

hyperhtml

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hyperhtml) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hyper(HTML)

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

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.8K thanks to rollup and its ability to merge all the things together like it was already in V1

Basic Example

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

Features

Zero dependencies, no polyfills needed, and it fits in less than 5KB (minzipped)
Uses directly native DOM instead of inventing new syntax/APIs, DOM diffing, or virtual DOM
Designed for template literals, a templating feature built in to JS
Compatible with vanilla DOM elements and vanilla JS data structures
Also compatible with Babel transpiled output, hence suitable for every browser you can think of

Compatibility

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
coverage without experimental adopt feature

Documentation

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

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.