Litty

Litty is the templating engine used by TypeScript webdesigns. It allows simple variable interpolation into HTML engines while auto encoding all inserted data as HTML entities to prevent injection and XSS attacks.

A simple Litty component looks like this:

import { litty } from "@webhare/litty";

function collapsibleSection(title: string, body: Litty): Litty {
  return litty`
  <details>
    <summary>${title}</h1>
    ${body}
  </details>`;
}

The variables inserted into the template can be either strings, numbers, or other Litties. Strings are automatically escaped (using encodeString(..., 'attribute')) but Littys are injected as is

Use rawLitty to embed data literally (ie: no encoding).

Use littyEncode to select different codings, eg littyEncode(description, "html") to ensure linefeeds are presented as <br>.

PreviousNext