Literal

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:

Import data

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>

Share data between templates

Templates 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>

Include a 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>

Map arrays to template includes

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>

Features

Try it

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>
Extend the template scope

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.