Skip to content

prepare/hyperHTML

 
 

Repository files navigation

hyper(HTML)

License: ISC Build Status Coverage Status donate

hyperHTML logo

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


Warning

Current master branch is currently under heavy refactoring.

Please use the official site to check examples on Code Pen and/or read the documentation.

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:

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.

About

A Fast & Light Virtual DOM Alternative

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 73.7%
  • JavaScript 25.5%
  • CSS 0.8%