moderntemplate
v1.0.4
Published
A Fast & Light Virtual DOM Alternative
Downloads
11
Maintainers
Readme
hyperTemplate
A Fast & Light Virtual DOM Alternative.
Documentation
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) {
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 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
Compatibility
Last 2 versions of every browser, including mobile ones, are supported. 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.
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
installation?
npm install hypertemplate
If your bundler does not work with the following:
import hyperHTML from "hyperhtml";
You can try any of these other options.
import hyperHTML from "hyperhtml/esm";
// or
import { hyper, wire, bind } from "hyperhtml/esm";