Get started

TNA Frontend Jinja

Jinja2 macros for all the components and layouts in TNA Frontend.

Framework support
WTForms support

See the TNA Frontend Jinja source code on GitHub.

For service built with Python and using Jinja2 templating, you can use the macros in TNA Frontend Jinja to provide the same configuration options and HTML output as the Nunjucks macros from TNA Frontend.

The only difference between the Nunjucks examples and their Jinja equivalents is having to quote key names, e.g. "text" instead of just text.

Nunjucks

{% from "nationalarchives/components/button/macro.njk" import tnaButton %}

{{ tnaButton({
  text: "Button",
  href: "#"
}) }}

Jinja

Important information

This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.

{% from "components/button/macro.html" import tnaButton %}

{{ tnaButton({
  "text": "Button",
  "href": "#"
}) }}

Framework support

Jinja2 is supported by both Flask and Django, two of the approved Python frameworks used by The National Archives.

WTForms support

TNA Frontend Jinja also contains the macros needed to work with WTForms which is a "flexible forms validation and rendering library for Python web development".

See the TNA Frontend Jinja WTForms integration documentation for more information.