A prototyping library for JSON-driven web pages.

A quick example

Let's say you keep a list of things you like in a file called favorites.json.
It looks like this.

``json
[
"Raindrops on roses",
"Whiskers on kittens",
"Bright copper kettles",
"Warm woolen mittens",
"Brown paper packages tied up with strings"
]
`

And, you want to display this list on a website. HTML has a
<template>
tag, so let's use that.

`html


My favorite things

`

The data-src attribute specifies the data source for this template. The
embed attribute tells the library to render the template in place.

So, the HTML above produces

> # My favorite things
> - Raindrops on roses
> - Whiskers on kittens
> - Bright copper kettles
> - Warm woolen mittens
> - Brown paper packages tied up with strings

Ready to try it out for yourself? Have a look at the demos in the next section.

Demos

- My Favorite Things
- Bingo Book

Tests

- Tests

The Render API

The class Render is a builder API for customizing the render operation.

For example, this expression,

`javascript
render("#album-template")
.filter(album => album.rating >= 4.5)
.into("#content");
`

When executed (via into), does the following:

- Finds the DOM element by the ID album-template
- Fetches JSON from the URL specified in its data-src attribute
- Removes albums that have a rating lower than 4.5
- Renders the remaining albums with the #album-template and inserts it into #content

#### render(template: string | HTMLTemplateElement): Render

Initialize the Render API with a selector string or HTMLTemplateElement.

#### .map(f: T => U): Render

Map over content, transforming it with f.

#### .mapList(this: Render, f: (u: U) => V): Render

Map over a list, transforming each item into something else.

#### .reduce(this: Render, f: (accumulator: V, next: U) => V, initial: V): Render

Fold over the content to transform it into something else.

#### .filter(this: Render, predicate: (value: U) => boolean): Render

Remove content, keeping only that which matches the predicate.

#### .withValue(value: T): Render

Specify values statically, instead of from data-src.

#### .asFragment(): Promise

Runs the render process with the customizations.

#### .into(target: string | HTMLElement): Promise

Runs asFragment and inserts the document fragment into the target, replacing its contents.

#### .cache(): Promise>

Runs the renderer, and creates a save point for its state.

Common scenarios

Some common scenarios follow.

$3

A list of albums

`javascript
{
albums: [
{ name: "Dr. Feelgood", year: 1989, artist: "Mötley Crüe" },
{ name: "Appetite For Destruction", year: 1987, artist: "Guns N' Roses" }
]
}
`

applied to this template

`html

`

produces

`html

















Dr. Feelgood	1989	Mötley Crüe
Appetite For Destruction	1987	Guns N' Roses


`

$3

The attribute onempty is a Javascript callback that is run when the indexed
list is empty (i.e. { albums: [] }).

`html


No albums found.


`

becomes

`html


No albums found.





`

$3

The indexed value sets the src attribute.

`javascript
{
pic: "https://example.com/example.jpg"
}
`

applied to

`html

`

produces

`html

`

Mods (short for modifiers)

HTML has a nested structure that maps to JSON, but sometimes we need more
flexibility. For , we want to set the value of the src attribute. For
we want to set the value of href and textContent. The render
function knows how to do all of this because of mods. Mods describe
how to transform a target element by a value.

The default mod sets the textContent of the target.

`javascript
function(e) { e.target.textContent = e.value }
`

You can define your own custom mods. This is a nonsense modifier to set
every target element to "hello", ignoring the passed in value.

`javascript
function nonsense(e) { e.target.textContent = "hello" }
`

Pass it to render via withMods.

`javascript
renderFragment.withMods(function(mods) { return [nonsense]; });
``