hyper(HTML)
A Fast & Light Virtual DOM Alternative available for NodeJS and NativeScript too.
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.