fun-html

Functional library for generating html tags. For when a templating engine is overkill (or not flexible eough).

Usage no npm install needed!

<script type="module">
  import funHtml from 'https://cdn.skypack.dev/fun-html';
</script>

README

Fun HTML

Build Status

Renders html from pure functions. div(span({class: 'foo'}, bar)) === '<div><span class="foo">bar</span></div>'.

Non-void tags are curried: div({id: foo})('bar') === <div id="foo">bar</div>.

Motivation

  • functional goodness (pure functions, currying, easy composition)
  • small (10 lines of code, few dependencies)
  • fast (no template parsing)
  • no dsl needed, just compose functions

Usage

The exported object has a function for each html element. If you just want a function to generate arbitrary tags, use fun-html-core.

var div = require('fun-html').div;
var img = require('fun-html').img;

// render a tag with content
div('foo');
// => '<div>foo</div>'

// render a tag with attributes and content
div({class: 'bar baz', qux: bla}, 'foo');
// => <div class="bar baz" qux="bla">foo</div>

// curried attributes
div({class: 'bar'})('foo');
// => <div class="bar">foo</div>

// void (self--closing) tags
img();
// => <img !>

// void tag with attributes
img({class: 'foo'});
// => <img class="foo">