Getting started

pnpm

pnpm add @itsy/html

npm

npm i @itsy/html

yarn

yarn add @itsy/html

bun

bun add @itsy/html

Isometric, ESM-only, no dependencies, ships ES2022 syntax.

A component

A component is a function that returns a template.

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

interface CardProps { title: string; flat: boolean, slot: Renderable }

const Card = ({ title, flat, slot }: CardProps) => html`
  <div ${attrs({ class: [{ flat }, 'card'] })}>
    <h1>${title}</h1>
    ${slot}
  </div>`;

Card({ title: 'Hello', flat: true, slot: html`<h2>World</h2>` });

<div class="flat card"> <h1>Hello</h1> <h2>World</h2> </div>

Rendering it

Html is a wrapper; .markup is the string. Take it once, where the page leaves the library — more on Html.

el.innerHTML = Card(props).markup; // browser
response.body = Card(props).markup; // server

Available builds

A development and production build are included. The development build has more explicit errors, and has a markup checker that can be shaken out from production.

The production build will still throw the same errors as development, but will just include the error code.

Bundlers pick between builds with the development export condition.

Vite

Nothing to do. Vite sets the development condition in dev
and drops it in a production build.

esbuild

esbuild app.ts --bundle --conditions=development

Node

node --conditions=development app.js