hyper(HTML)

📣 Community Announcement

Please ask questions in the dedicated forum to help the community around this project grow ♥

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

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"

"hyperhtml/cjs"

"hyperhtml/esm"

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 in hyperHTML too. Feel free to rea this long discussion to better understand why 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 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.

Please Note that viperHTML has been deprecated, so it doesn't grant 100% features parity anymore.

Basic Example

The easiest way to describe

hyperHTML

js
// this is hyperHTML
function tick(render) {
  render`
    

      
Hello, world!
      
It is ${new Date().toLocaleTimeString()}.
    
  `;
}
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

hyperHTML

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

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: ```js // ES6 import hyperHTML from 'hyperhtml';

// CJS const hyperHTML = require('hyperhtml');

You can try any of these other options.

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")