Skip to main content

Jinja

Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.

LiveCodes uses a minimalistic JavaScript implementation.

Usage​

There are 2 modes for rendering:

Pre-rendered (Default)​

The values of the expressions are evaluated and added to the template during compilation of the result page.

The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

Example: This provides the value of the expression name

Custom Settings
{
  "template": {
    "data": {
      "name": "LiveCodes"
    }
  }
}

Full example below

Dynamic​

To use this mode, the property template.prerender in custom settings should be set to false.

Example:

Custom Settings
{
  "template": {
    "prerender": false
  }
}

In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

Please note that template rendering occurs on page load, so the assignment must occur before that.

Example:

Script Editor (JS)
window.livecodes.templateData = { name: 'LiveCodes' };

Full example below

Language Info​

Name​

jinja

Extension​

.jinja

Editor​

markup

Compiler​

@huggingface/jinja.

Version​

@huggingface/jinja: v0.5.0

Code Formatting​

Using @huggingface/jinja integrated formatted.

Example Usage​

Pre-rendered​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "jinja",
      "content": "<ul id=\"navigation\">\n{% for item in navigation %}\n    <li><a href=\"{{ item.href }}\">{{ item.caption }}</a></li>\n{% endfor %}\n</ul>\n\n<h1>My Webpage</h1>\n{{ a_variable }}\n\n"
    },
    "customSettings": {
      "template": {
        "data": {
          "navigation": [
            {
              "href": "/",
              "caption": "Home"
            },
            {
              "href": "/about",
              "caption": "About"
            },
            {
              "href": "/contact",
              "caption": "Contact"
            }
          ],
          "a_variable": "Hello World!"
        }
      }
    }
  },
  "params": {
    "compiled": "open"
  }
};
createPlayground('#container', options);

Dynamic​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "jinja",
      "content": "<ul id=\"navigation\">\n{% for item in navigation %}\n    <li><a href=\"{{ item.href }}\">{{ item.caption }}</a></li>\n{% endfor %}\n</ul>\n\n<h1>My Webpage</h1>\n{{ a_variable }}\n\n"
    },
    "script": {
      "language": "javascript",
      "content": "window.livecodes.templateData = {\n  navigation: [\n    { href: \"/\", caption: \"Home\" },\n    { href: \"/about\", caption: \"About\" },\n    { href: \"/contact\", caption: \"Contact\" },\n  ],\n  a_variable: \"Hello World!\",\n};"
    },
    "customSettings": {
      "template": {
        "prerender": false
      }
    },
    "activeEditor": "script"
  }
};
createPlayground('#container', options);

Sponsors