Literal enhances the <template>
element
with a reactive DOM renderer that evaluates literal expressions
and binds updates to a signal graph. It is a view layer designed
for HTML authors to enhance content.
Weighs under 15kB bundled and gzipped.
<template is="literal-html">
Literal's entry point is the literal-html
template:
<template is="literal-html">
<p>${ 'Hello planet' }</p>
</template>
Which is replaced in the DOM with its own rendered content:
${ 'Hello planet' }
Data is sourced with the src
attribute, which imports
.js
modules or fetches JSON. Inside the template this
data is available as the constant data
:
<template id="li-template">
<li>${ data.text }</li>
</template>
For quick prototyping, you can, alternatively, declare data using
data-*
attributes:
<template id="li-template">
<li>${ data.text }</li>
</template>
data
between templatesTemplates that share a src
share a data
object.
Changes to data in one template are rendered in the other:
<template id="li-template">
<li>${ data.text }</li>
</template>
Besides a data
object, templates have other objects
and functions in-scope.
The include()
function includes
another template:
<template id="li-template">
<li>${ data.text }</li>
</template>
<template is="literal-html" src="./data/todo.json">
<ul>${ data.tasks.map(include('#li-template')) }</ul>
</template>
Templates have no explicit looping mechanism, but support mapping arrays
to templates. The include()
function is partially applicable,
and that's helpful for
<template is="literal-html" src="./data/todo.json">
<ul>${ data.tasks.map(include('#li-template')) }</ul>
</template>
Literal is written as vanilla JavaScript modules, and happily runs
in the browser without any build/compile step. The dev version can be
run with logs and inline messages turned on by setting a DEBUG
flag:
<!-- Enable debug messages -->
<script>window.DEBUG = true;</script>
<!-- Import and register template is="literal-html" -->
<script type="module" src="https://cdn.jsdelivr.net/gh/stephband/literal@main/literal-html/element.js"></script>
The production build strips messages and is bundled to a single module:
<script type="module" src="https://cdn.jsdelivr.net/gh/stephband/literal@main/build/literal-html/element.js"></script>
You are free to put any functions and objects you like into literal's
shared template scope. Simply assign them to the Literal.scope
object – which must be done before a template is compiled.