hyperscript-html

Hyperscript-html provides a simple, fast, and lightweight hyperscript function to generate HTML.

Example

Input

var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.
 
var h = HyperScript()
 
var html = 
h('div#id.cls.cls2[attr1=val1][style=background-color:#ff0000; position:relative]',
  h('h1', {class: ['title']}, 'The Title'),
  h('p.content', 'The content'),
)

Input with wrapped elements

var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html'  // If you're using es modules.
 
var {div, h1, p} = wrap({div: 'div', h1: 'h1', p: 'p'})
 
var html = 
div({id: 'id', class: ['cls', 'cls2'], style: {backgroundColor: '#ff0000', position: 'relative'}},
  h1({class: ['title']}, 'The Title'),
  p({class: ['content']}, 'The content'),
)

Output

<div
 class="cls cls2"
 style="background-color:#ff0000; position:relative;"
 id="id"
 attr1="val1">
    <h1
     class="title">
        The Title
    </h1>
    <p
     class="content">
        The content
    </p>
</div>

API

HyperScript([options])

The hyperscript constructor, takes optional options object argument, returns a hyperscript function.

var h = HyperScript()
 
// or with options
var h = HyperScript({tab:'\t', nl:'\n', attrsNewLine:true, prettyPrint:true,
  flexibleArgs:true, voidElements:true, shortHand:true})

hyperscript(tag[, attrs[, ...children]])

The hyperscript function returned from the HyperScript constructor, takes a required tag name (eg. 'div'), and optional attributes object, and optional children. The children can be added as an array or multiple arguments, or a combination of arrays and arguments.

// tag
h('div')
 
// tag and attributes
h('div', {id: 'id', class: ['cls']})
 
// If the `shortHand` option is `true` (default),
// you can supply a CSS selector like string for the tag
// and the values will be extracted to their respective attributes.
h('div#id.cls[attr1=val][attr2]')
 
// tag with child arguments
h('div', 'hello', h('b', 'world'))
 
// tag with child array
h('div', ['hello', h('b', 'world')])
 
// tag with attributes and child arguments
h('div', {class: ['cls']}, 'hello', h('b', 'world'))

wrap(elements[, options])

The wrap function creates shorthand hyperscript functions. It takes an object of elements with mapping function name : element tag (eg. {div: 'div', BOX: 'div}), and an optional options object (the same options that HyperScript takes). It returns an object of bound shorthand hyperscript functions.

var {box, h1, p} = wrap({box: 'div', h1: 'h1', p: 'p'})
 
box(
  h1('Title'),
  p('Content'),
)

options object

Option	Default value	Description
tab	'\t'	What to use as the tab.
nl	'\n'	What to use as the line break.
prettyPrint	true	Format the HTML output nicely with newlines and tabs, set to false for faster rendering.
attrsNewLine	true	Put attributes on a new line when prettyPrint is true.
shortHand	true, always false for wrap fn	Use CSS like selector syntax in tag names for shorthand id, class and attributes values. Set to false for faster rendering.
voidElements	true	Leave the closing tag off of empty void elements.
flexibleArgs	true	Make the hyperscript functions interface flexible, if false you must provide a value for attributes argument or null if you supply children (eg. h('div', null, 'child text').