Jinja2 Template engine

Jinja2 is a template engine for Python.  You can use it when rendering data to web pages.  For every link you visit, you want to show the data with the formatting. By using a template engine we can seperate display logic (html, css) from the actual Python code. Let’s start with an example

Related course
Complete Python Web Course: Build 8 Python Web Apps

Getting started with Jinja2
Create the directories:

  • /app
  • /app/templates

And create the file user.html in /app/templates:

<title>{% block title %}{% endblock %}</title>
{% for user in users %}
  <li>{{ user }}</a></li>
{% endfor %}

Then create the code app.py  in /app/app.py:

from flask import Flask, flash, redirect, render_template, request
from random import randint
app = Flask(__name__)
def index():
    return "Flask App!"
def hello():
    users = [ "Frank", "Steve", "Alice", "Bruce" ]
    return render_template(
        'user.html', **locals())
if __name__ == "__main__":
    app.run(host='', port=8080)

Finally execute with:

python app.py
 * Running on

You can then open  in your browser. This will output the data formatted according to html:


Jinja2 Template Engine Output

About Jinja
A Jinja2 template is simply a text file that does not need to have a specific extension such as .html, .xml.
A template may contain tags and special delimiters:

Delimiters Usage
{% … %} Statements
{{ … }} Expressions to print to the template output
{# … #} Comments not included in the template output
# … ## Line Statements

In the example above we have two statements and one expression.  We have not included any comments.

Base template and child templates
A Jinja2 template can extend a base template. On a webpage with many sites you may want these pages look similar.  In /templates/ create a file called base.html with this code:

<!DOCTYPE html>
<html lang="en">
    {% block head %}
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        Copyright 2015 by <a href="https://pythonspot.com/">pythonspot</a>.
        {% endblock %}

We did not set a style.css, but you could set one. Change /templates/user.html to:

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .important { color: #336699; }
{% endblock %}
{% block content %}
    <p class="important">
      {% for user in users %}
          <li>{{ user }}</a></li>
      {% endfor %}
{% endblock %}

Restart the app with:

python app.py
 * Running on


template jinja

Flask Jinja template engine

Flask with static html files
Flask and great looking charts using Chart.js
This entry was posted in Flask and tagged , , , , . Bookmark the permalink.

2 Responses to Jinja2 Template engine

  1. Jamboy says:

    When I used the template as suggested above, the browser[s] (Google Chrome 48.0.2564.116, and Firefox 38.5) translated the < and > correctly to ”. However, they failed to translate &;lt;ul> to (an un-ordered HTML list).
    When I changed the template and replaced < with ” things clicked, and it worked as advertised.

    I am using Python 3.5.1; Flask: Werkzeug/0.11.4