Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

hyperHTML

A Fast & Light Virtual DOM Alternative

Subscribe to updates I use hyperHTML


Statistics on hyperHTML

Number of watchers on Github 1520
Number of open issues 4
Average time to close an issue about 12 hours
Main language JavaScript
Average time to merge a PR 2 days
Open pull requests 1+
Closed pull requests 7+
Last commit over 2 years ago
Repo Created over 3 years ago
Repo Last Updated over 2 years ago
Size 3.36 MB
Organization / Authorwebreflection
Contributors3
Page Updated
Do you use hyperHTML? Leave a review!
View open issues (4)
View on github
Fresh, new opensource launches 🚀🚀🚀
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating hyperHTML for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

hyper(HTML)

hyperHTML logo

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


donate Backers on Open Collective Sponsors on Open Collective

Coverage Status Build Status License: ISC Greenkeeper badge


Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Backers

Thank you to all our backers! [Become a backer]

Contributors

This project exists thanks to all the people who contribute. [Contribute].


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

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

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

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.

installation?

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.

hyperHTML open issues Ask a question     (View All Issues)
  • over 3 years Reversed incremental updates
hyperHTML open pull requests (View All Pulls)
  • hyperHTML.adopt(liveNode)
hyperHTML list of languages used
Other projects in JavaScript