Templates

Templates are tagged-template literals — the html`` tag. No JSX, no compiler; they are just JavaScript.

Bindings

Interpolate signals and values directly. Text bindings are escaped by default. Bind attributes with name="${value}" and events with @event=${handler}.

html`
  <button
    class="btn ${variant}"
    disabled=${isBusy}
    @click=${onClick}
  >${label}</button>
`

Lists

each() renders a keyed list that reconciles efficiently as the source changes.

import { html, each } from '@nisli/core';

html`<ul>${each(items, (item) => html`<li>${item.name}</li>`)}</ul>`

Conditionals

when() renders one branch or another based on a condition.

import { html, when } from '@nisli/core';

html`${when(isOpen, () => html`<panel-body></panel-body>`, () => html``)}`

Compose other components by calling their factory inside a template — ${Button({ children: 'Save' })}. Custom elements are always used via their factory, never as raw tags.