hyper(HTML)

$3

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

- - -

A Fast & Light Virtual DOM Alternative.

- - -

   !WebReflection status

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

- - -

$3

the new ?boolean=${value} syntax from µhtml has landed in hyperHTML too. Feel free to rea this long discussion to better understand why* this syntax is necessary.

$3

* tags for both custom elements and any other as well 🎉

$3

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.
``js
// this is hyperHTML
function tick(render) {
render

;
}
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:

* 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 so that others can benefit from answers and examples.

#### hyper or lit ?

You can read more on this hyperHTML vs lit-html comparison.

#### installation?

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

// CJS
const hyperHTML = require('hyperhtml');
`
You can try any of these other options.
`js
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.