ez-html-elements

Generation and composition of HTML from JavaScript

Import functions for whatever tags you are using:

import { p, img } from 'ez-html-elements'

These functions generate HTML as a string:

JavaScript	Generates
p()	<p></p>	No argments generates an empty element.
img()	<img>	The closing tag is omitted from elements that don't need them.
p({ id: 'foo' }) img({ src: 'http://foo/bar.png' })	<p id="foo"></p> <img src="http://foo/bar.png">	An object argument generates attributes
p(['foo', 'bar']) img(['big'])	<p class="foo bar"></p> <img class="big">	An array argument generates a class attribute.
p('blah blah', 'more', 'yet more')	<p>blah blah more yet more</p>	String arguments are concatenated, separated by spaces, as content.
p(img())	<p><img></p>	Elements can be composed.

Here is an example that combines all the above

  const id = 'the-id'
  const src = 'data:image'
  t.deepEqual(p(
    ['foo', 'bar'],
    { id },
    'blah blah',
    img(['a'], { src }),
    'more',
    'yet more')

which generates

<p id="the-id" class="foo bar">blah blah <img src="data:image" class="a"> more yet more</p>

Going beyond the basics

The great power comes composition and using JavaScript to create component generators.

For example you could define a custom generator like this:

const subtitle = (...content) => p(['subtitle'], ...content)

Then

subtitle('blah', ' blah')

generates

<p class="subtitle">blah blah</p>

Or as a more complicated case that really shows the power, say you define a custom generator like so:

import { label, input, span } from 'ez-html-elements'

...

let nextCount = 0
const marginNote = (...content) => {
  ++nextCount
  const id = `mn-i${nextCount}`
  return label(['margin-toggle'], { for: id }, '⊕') +
        input(['margin-toggle'], { id, type: 'checkbox' }) +
        span(['marginnote'], ...content)
}

Then

marginNote('blah', 'blah')

generates¹

<label for="mn-i1" class="margin-toggle">⊕</label>
<input id="mn-i1" type="checkbox" class="margin-toggle">
<span class="marginnote">blah blah</span>

Coverage

You can import any non-deprecated, non-experimental element listed in the MDN HTML elements reference. The JavaScript function names have the same name as the corresponding tag².

Projects using this library

The static-site generator code that creates the HTML for the mandelbrot.dev website uses this library.

---

^{1. For clarity newlines are added to this HTML. Actually a single line is generated.}

^{2. With the exception of <var>x</var> which you must write as v('x') because var is a reserved identifier in JavaScript.}