Tipi: a Tiny Templating Engine

Tipi is a pet project I’ve been working on with my friend Chris Ross of hiddenMemory, to produce a Mustache-like templating language where data and template can live together in the same file. It’s an interesting experiment that may go further.

Mustache requires you to invoke your templates from a programming language such as Javascript. All your template data has to be defined in code - you can’t blend data and templates.

Tipi allows you to do everything you can do with Mustache, but it can also be used independently of the host programming language. You can define templates, define data, and invoke the templates with the data, all from within a single Tipi file.

Here’s an example:

{{# def cat name knownFor }}
<li>{{ name }}, best known for {{ knownFor }}</li>
{{/ def }]

<p>Notable Internet felines:</p>

<ul>
  {{ cat name="Long Cat" knownFor="being long" }} {{ cat name="Keyboard Cat"
  knownFor="playing a fine tune" }} {{ cat name="Nyan Cat" knownFor="singing,
  being half Pop Tart" }} {{ cat name="Nonono Cat" knownFor="negativity" }}
</ul>

This file uses a special tag, def, to define a template called cat. it then invokes cat four times to produce the bullet points in the list. The output is as follows:

<p>Notable Internet felines:</p>

<ul>
  <li>Long Cat, best known for being long</li>
  <li>Keyboard Cat, best known for playing a fine tune</li>
  <li>Nyan Cat, best known for singing, being half Pop Tart</li>
  <li>Nonono Cat, best known for negativity</li>
</ul>

The def tag itself doesn’t produce any output. However, when Tipi processes it, it stores the cat away for later use. This causes the cat tags later on to produce the correct templated output.

Programmers will recognise these semantics straight away. Tipi is actually a very simple programming language, supporting function definition and invocation (with static binding and lexical scoping semantics). The def tag is simply a predefined function that has a side-effect of registering a template for later use.