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.
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) => { ... }) }
Built by Stephen Band for
Cruncher.
Documentation set in Euclid
and Martian Mono. Fonts
used for documentation not included as part of the license covering the
use of Literal
.