[](https://livecodes.io/docs/languages/)

[Jinja](https://jinja.palletsprojects.com/) 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](https://github.com/huggingface/huggingface.js/tree/main/packages/jinja).

There are 2 modes for rendering:

The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.mdx).

The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.mdx) to the property `template.data` which accepts an object of key-value pairs.

Example: This provides the value of the expression `name`

```json title="Custom Settings"

{

"template": {

"data": {

"name": "LiveCodes"

}

}

}

[Full example below](#pre-rendered)

To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.mdx) should be set to `false`.

Example:

```json title="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](../features/result.mdx) runtime.

This can be achieved in JavaScript (or any [language](../languages/index.mdx) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.

Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.

Example:

```js title="Script Editor (JS)"

window.livecodes.templateData = { name: 'LiveCodes' };

[Full example below](#dynamic-1)

[@huggingface/jinja](https://www.npmjs.com/package/@huggingface/jinja).

`@huggingface/jinja`: v0.5.0

Using `@huggingface/jinja` integrated formatted.

import LiveCodes from '../../src/components/LiveCodes';

export const config = {

markup: { language: 'jinja', content: `<ul id="navigation">

` },

customSettings: { template: { data: {

navigation: [

{ href: "/", caption: "Home" },

{ href: "/about", caption: "About" },

{ href: "/contact", caption: "Contact" },

],

a_variable: "Hello World!",

} } },

};

export const params = { compiled: 'open' };

<LiveCodes config={config} params={params}></LiveCodes>

export const config2 = {

markup: { language: 'jinja', content: `<ul id="navigation">

` },

script: {

language: 'javascript',

content: `window.livecodes.templateData = {

};`,

},

customSettings: { template: { prerender: false } },

activeEditor: 'script',

};

<LiveCodes config={config2}></LiveCodes>

- [Jinja](https://jinja.palletsprojects.com/)

- [Template Documentation](https://jinja.palletsprojects.com/en/stable/templates/)

- [`@huggingface/jinja`](https://www.npmjs.com/package/@huggingface/jinja)

{ name: 'jinja', title: 'Jinja' },

test('jinja', async ({ page, getTestUrl }) => {

await page.goto(getTestUrl());

const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);

await app.click('[aria-label="Project"]');

await app.click('text=Custom Settings');

await waitForEditorFocus(app, '#custom-settings-editor');

await page.keyboard.press('Control+A');

await page.keyboard.press('Delete');

await page.keyboard.type(`{"template":{"data":{"name": "jinja"}}}`);

await app.click('button:has-text("Load"):visible');

await app.click(':nth-match([title="Change Language"], 1)');

await app.click('text="Jinja"');

await waitForEditorFocus(app);

await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);

await waitForResultUpdate();

const resultText = await getResult().innerHTML('h1');

expect(resultText).toContain('Welcome to jinja');

});

test('jinja dynamic', async ({ page, getTestUrl }) => {

await page.goto(getTestUrl());

const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);

await app.click('[aria-label="Project"]');

await app.click('text=Custom Settings');

await waitForEditorFocus(app, '#custom-settings-editor');

await page.keyboard.press('Control+A');

await page.keyboard.press('Delete');

await page.keyboard.type(`{"template":{"prerender": false}}`);

await app.click('button:has-text("Load"):visible');

await app.click(':nth-match([title="Change Language"], 3)');

await app.click('text=JavaScript');

await waitForEditorFocus(app);

await page.keyboard.type(`window.livecodes.templateData = { name: 'jinja' };`);

await app.click(':nth-match([title="Change Language"], 1)');

await app.click('text="Jinja"');

await waitForEditorFocus(app);

await page.keyboard.type(`<h1>Welcome to {{ name }}</h1>`);

await waitForResultUpdate();

await app.waitForTimeout(3000);

const resultText = await getResult().innerHTML('h1');

expect(resultText).toContain('Welcome to jinja');

});

'languages/jinja/lang-jinja-compiler.ts',

<section data-lang="jinja">

<h3 data-i18n="language-info:jinja.name">Jinja</h3>

<div data-i18n="language-info:jinja.desc">

Jinja is a fast, expressive, extensible templating engine.

</div>

<ul data-i18n="language-info:jinja.link" data-i18n-prop="innerHTML">

<li>

<a href="https://jinja.palletsprojects.com/" target="_blank" rel="noopener"

>Official website</a

>

</li>

<li>

<a

href="https://jinja.palletsprojects.com/en/stable/templates/"

target="_blank"

rel="noopener"

>Template documentation</a

>

</li>

<li>

<a

href="https://github.com/huggingface/huggingface.js/tree/main/packages/jinja"

target="_blank"

rel="noopener"

>JavaScript implementation</a

>

</li>

<li>

<a href="{{DOCS_BASE_URL}}languages/jinja" target="_blank" rel="noopener"

>LiveCodes Documentations</a

>

</li>

</ul>

"jinja.desc": {

"notes": "",

"translation": "Jinja is a fast, expressive, extensible templating engine."

},

"jinja.link": {

"notes": "### <tag-1> ###\n<li />\n\n### <tag-2> ###\n<a href=\"https://jinja.palletsprojects.com/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li />\n\n### <tag-4> ###\n<a href=\"https://jinja.palletsprojects.com/en/stable/templates/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li />\n\n### <tag-6> ###\n<a href=\"https://github.com/huggingface/huggingface.js/tree/main/packages/jinja\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li />\n\n### <tag-8> ###\n<a href=\"{{DOCS_BASE_URL}}languages/jinja\" target=\"_blank\" rel=\"noopener\" />\n\n",

"translation": "<tag-1> <tag-2>Official website</tag-2> </tag-1> <tag-3> <tag-4>Template documentation</tag-4> </tag-3> <tag-5> <tag-6>JavaScript implementation</tag-6> </tag-5> <tag-7> <tag-8>LiveCodes Documentations</tag-8> </tag-7>"

},

"jinja.name": {

"notes": "",

"translation": "Jinja"

},

jinja: {

desc: 'Jinja is a fast, expressive, extensible templating engine.',

link: '<1> <2>Official website</2> </1> <3> <4>Template documentation</4> </3> <5> <6>JavaScript implementation</6> </5> <7> <8>LiveCodes Documentations</8> </7>',

name: 'Jinja',

},

export * from './lang-jinja';

import type { CompilerFunction } from '../../models';

import { escapeCode } from '../../utils';

import { jinjaUrl } from './lang-jinja';

(self as any).createJinjaCompiler =

(): CompilerFunction =>

async (code, { config }) => {

const data = config.customSettings.template?.data || {};

if (config.customSettings.template?.prerender !== false) {

const template = new (self as any).Jinja.Template(code);

return template.render(data);

}

return `<!-- ... compiling ... -->

};