Installation

Fetch Hyperform in any way you like as laid out on the downloads page.

Then embed dist/hyperform.min.js in your file:

<script src="hyperform/dist/hyperform.min.js"></script>
<link rel="stylesheet" href="hyperform/css/hyperform.css">
<script>hyperform(window);</script>

If you use a build system like Browserify or Webpack, require Hyperform in your own Javascript files:

// "classic" CJS variant:
var hyperform = require('hyperform');

// or "newer" ESM variant:
import hyperform from 'hyperform';

hyperform(window);

For Hyperform to work in old IEs you need polyfills for WeakMap (IE 10 and lower), and element.classList (IE 9 and lower).

CloudFlare offers this as conveniant URL that only returns the necessary polyfills based on the browser UA string:

<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&features=Element.prototype.classList%2CWeakMap"></script>

Finished! Yes, in modern browsers Hyperform has zero external dependencies.

ES2015 Modules

Hyperform is developed using a strict ES2015 module approach. If you want to make use of the granular modules yourself, you can import them directly from the src folder:

import hyperform from 'path/to/hyperform/src/hyperform';

Auto-Loading Hyperform

There might be situations, where you just want to throw in the Hyperform script element, let it do its magic and call it a day. To spare the call to hyperform(window) you can simply add a special attribute to the embedding script element:

<script src="path/to/hyperform.min.js" data-hf-autoload></script>

This will then automatically run hyperform(window) for you. (Note: If you’re supporting IE, then you must add a polyfill for document.currentScript for this feature to work. If you don’t want that, simply call hyperform(window) yourself somewhere in your code.)

Next: Usage – all the things you can do with Hyperform