html #

An alias for the jsx template tag function.

Syntax #

html`<div />`
html`<div>text</div>`
html`<div class=${className}>${children}</div>`

See jsx for complete syntax documentation.

Return value #

Element - A Crank element ready to be rendered.

Description #

html is simply an alias for jsx. Both functions are identical in behavior. The html name is provided for developers who prefer it semantically or are coming from libraries like htm or lit-html.

import {jsx, html} from "@b9g/crank/standalone";

jsx === html; // true

Examples #

Basic usage #

import {html} from "@b9g/crank/standalone";
import {renderer} from "@b9g/crank/dom";

function App() {
  return html`
    <div class="app">
      <h1>Hello, World!</h1>
    </div>
  `;
}

renderer.render(html`<${App} />`, document.getElementById("root"));

Coming from lit-html #

If you're familiar with lit-html or similar libraries, html may feel more natural:

import {html} from "@b9g/crank/standalone";

// Similar pattern to lit-html
const template = (name) => html`<p>Hello, ${name}!</p>`;

API Reference