Literal 0.6.5

Literal puts JS into HTML templates. Literal enhances HTML <template>s with JS template literals and a scope of functions for writing concise expressions, and renders them with a live DOM renderer.

Start authoring with one of Literal’s customised built-in templates.

<template is="literal-html">

A literal-html template is replaced in the DOM with its own rendered content, enabling you to place dynamic content pretty much anywhere in your HTML.

<template is="literal-html" data="./package.json">
    <!-- Render some data -->
    <h2>${ data.title } <span class="text-06">${ data.version }</span></h2>
</template>

<!-- Import literal-html to start rendering -->
<script type="module" src="./build/literal-html/module.js"></script>

Read the literal-html documentation.

<template is="literal-element">

A literal-element template declares a custom element and its shadow DOM. Here’s a declaration of a bare-bones show/hide ‘<my-toggle>‘ element:

<template is="literal-element" tag="my-toggle" attributes="active:boolean">
    <button type="button">
        <!-- Render button text -->
        ${ data.active ? 'Hide' : 'Show' } slotted content
        <!-- Listen to events on the button -->
        ${ events('click', element).each(() => (data.active = !data.active)) }
    </button>
    <!-- Boolean attributes take a single truthy/falsy expression -->
    <slot hidden="${ !data.active }"></slot>
</template>

<!-- Import literal-element to define <my-toggle> -->
<script type="module" src="./build/literal-element/module.js"></script>

Which is then authored as:

<my-toggle>
    <p>Content is shown when my-toggle is active.</p>
</my-toggle>

Content is shown when my-toggle is active.

Read the literal-element documentation.

Template scope and expressions

Literal templates are compiled in a scope that contains a number of objects and functions designed for writing concise template expressions.

Expressions are made powerful by Literal’s renderer, which accepts expressions that evaluate to a string or other primitive, a DOM node or fragment, an array of values, another renderer, or even an asynchronous value in a promise or a stream. This makes it possible to, for example, include other templates or listen to DOM events inside expressions:

<!-- Include another template -->
${ include('#template-id', data) }

<!-- Listen to an event stream -->
${ events('click', element).each((e) => { ... }) }

Read the Template Scope and Expressions documentation.


Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of Literal.