Install:

npm install --save-dev ez-html-elements

Import functions for whatever tags you are using:

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

These functions generate HTML as a string:

Here is an example that combines all the above

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>

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>

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².

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.}