@itsy/html

A tiny HTML renderer with just enough features.

Get started

Playground

GitHub

Security

Text, attributes and URLs each get the right escaping. A javascript: URL renders as about:blank#blocked. If escaping cannot make a value safe, it throws.

Focus on DX

Components are easy to write with a rich attribute-helper. Syntax and basic correctness is checked in development-mode.

Isometric strings

Everything runs on the client and server. The core module is less than 1.5kb gzip and has separate development and production builds.

A complete example

import { html, attrs } from '@itsy/html';

type Link = { href: string; label: string; active?: boolean };

const Link = ({ href, label, active = false }: Link) =>
  html`<a ${attrs({ href, class: ['link', { active }], aria: { current: active ? 'page' : null } })}>${label}</a>`;

const Menu = (title: string, links: Link[]) => html`
  <nav ${attrs({ aria: { label: title }, hidden: !links.length })}>
    <h2>${title}</h2>
    ${links.map(Link)}
  </nav>`;

Menu('Docs & more', [
  { href: '/guide', label: 'Guide', active: true },
  { href: 'javascript:alert(1)', label: '<script>' },
]);

html

<nav aria-label="Docs &amp; more"> <h2>Docs &amp; more</h2> <a href="/guide" class="link active" aria-current="page">Guide</a><a href="about:blank#blocked" class="link">&lt;script&gt;</a> </nav>

Start here, or try it in the browser.

@itsy/html

Security

Focus on DX

Isometric strings

A complete example ​

A complete example