HTML beta

The html function provided by Postact serves a similar purposes as uhtml, lit-html and htm. It aims to be lightweight, fast, responsive to states, and runnable even in server-side environments.

import { select, html } from "@postact/core";

select("#app").render(html`
    <h1>Hello, world!</h1>
    <p>You see, it's just as simple as that.</p>
    <button>Button!</button>
`)

POSTACT DEMO

Hello, world!

You see, it's just as simple as that.

Virtual DOM

What html returns is never the actual DOM you create with window.document. Instead, it returns a virtual fragment, containing only minimal necessary information.

For example, an HTML like:

<p>Howdy</p>

The html function returns:

{
  __p: 3,  // 3 - virtual fragment
  children: [
    {
      __p: 2,  // 2 - virtual element
      tag: "p",
      attributes: {},
      children: [
        {
          __p: 4,  // 4 - virtual text node
          data: "Howdy",
          subscribable: undefined,
        }
      ],
      listeners: [],
    },
  ],
}

For more information, check out the internal API documentation.

States