hyperHTML

A Fast & Light Virtual DOM Alternative

Virtual DOM
WebReflection/hyperHTMLhyperhtml

README

hyper(HTML)


📣 Community Announcement


Please ask questions in the dedicated discussions repository, to help the community around this project grow ♥

- - -

hyperHTML logo

A Fast & Light Virtual DOM Alternative.

- - -
donate Backers on Open Collective Sponsors on Open Collective WebReflection status
Coverage Status Build Status License: ISC Greenkeeper badge Blazing Fast

- - -

Following an overview of projects related, or inspired by, _hyperHTML_. For a deep comparison of current libraries, feel free to check this gist out.


## µhtml

The latest, smallest, iteration of all best concept from this library since 2017, have been packaged in _~2.5K_. If it's extreme minimalism and great _DX_ that you are after, check uhtml out.


hypersimple


If you've just started with template literals based projects and you like components, or you'd like to understand what's _hyperHTML_ capable of, give hypersimple a try 🎉


lighterhtml 💡


This little brother is "_showing off_" these days, claiming better performance and unprecedented ease of use.

GitHub Repository


Neverland 🌈🦄


If you like React hooks concept, don't miss this little wrap that adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.

Blog Post

GitHub Repository

Haunted 🦇 🎃


If you also like React hooks mechanism and you'd like to combine these via hyperHTML or HyperHTMLElement, try haunted out!


Bundlers


You can require or import _hyperHTML_ with any bundler and in different ways.

If requiring or importing from "hyperhtml" doesn't work, try requiring from "hyperhtml/cjs" for CommonJS friendly bundlers (WebPack), or "hyperhtml/esm" for ESM compatible bundlers (Rollup).

See HELPERS.md for a list of additional tools which can be helpful for building hyperHTML based web applications.

- - -

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].

- - -

2.34 Highlights


  the new ?boolean=${value} syntax from µhtml has landed inhyperHTML too. Feel free to read this long discussion to better understandwhy this syntax is necessary.

V2.5 Highlights


* `` 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 globalhyperHTML 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.
  1. ``` js
  2. // this is hyperHTML
  3. function tick(render) {
  4.   render`
  5.     <div>
  6.       <h1>Hello, world!</h1>
  7.       <h2>It is ${new Date().toLocaleTimeString()}.</h2>
  8.     </div>
  9.   `;
  10. }
  11. setInterval(tick, 1000,
  12.   hyperHTML(document.getElementById('root'))
  13. );
  14. ```

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:

  100% code coverage for browsers natively compatible with string literals
  100% code coverage for IE9+ and browsers that need transpiled code
  

Weakmap error on ie < 11


'@ungap/weakmap': object is not extensible

Babel freezes the template literals by spec but that causes problems with the weakmap polyfill. To fix this error add the fix explained on ungap/weakmap

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

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

Questions ?


Please ask anything you'd like to know in StackOverflow using the tag [hyperhtml](https://stackoverflow.com/questions/tagged/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?


  1. ``` js
  2. npm install hyperhtml
  3. ```
If your bundler does not work with the following:
  1. ``` js
  2. // ES6
  3. import hyperHTML from 'hyperhtml';

  5. // CJS
  6. const hyperHTML = require('hyperhtml');
  7. ```
You can try any of these other options.
  1. ``` js
  2. import hyperHTML from 'hyperhtml/esm';
  3. // or
  4. import {hyper, wire, bind, Component} from 'hyperhtml/esm';
  5. // or
  6. import hyperHTML from 'https://unpkg.com/hyperhtml?module';


  9. const hyperHTML = require('hyperhtml/cjs').default;
  10. // or
  11. const {hyper, wire, bind, Component} = require('hyperhtml/cjs');
  12. ```

In alternative, there is a pre-bundled require("hyperhtml/umd") or via unpkg as UMD module.