Are you looking for a gentle introduction to Jinja2 with a focus on how it is leveraged within Flask apps? Well then you are in the right place! In this article we provide a beginner-friendly explanation of what Jinja2 is and what it’s main use cases are. After that, we go into more detail about how Jinja2 is used within Flask applications. At the end, we provide a simple code example of how to use Jinja2 in a Flask application.
This article is intended for beginners who are just getting started with using Jinja2 for Flask. If you are more experienced with Flask and Jinja2 then we recommend checking out the official Jinja2 documentation (linked at the end of the post).
What is Jinja2?
What is Jinja2? Jinja2 is a text-based template language that is part of the Python ecosystem. A template language is a language that allows you to create templates from common code that is reused across multiple documents. These templates contain placeholders that can later be swapped out for custom code that is specific to a given document.
Specifically, Jinja2 is a web template language, so it is used to make templates for web pages that can be returned via HTTP request. For this reason, Jinja2 is most commonly used to make templates for HTML pages that contain boilerplate HTML code that is reused across multiple pages. That being said, Jinja2 can also be used to create templates for other text-based formats like XML documents.
Why use Jinja2?
Why should you use a web template language like Jinja2 when you are building out web pages? You should use a web template language like Jinja2 for many of the same reasons that you should collect shared code into a function rather than repeating the same code over and over.
The first reason is that using a web template language reduces the total amount of code you need to write, which increases the speed with which you are able to complete your projects. If you create a template with the shared code that is common across multiple pages then you only have to write that code once. If you do not make use of templating languages then you might have to write that same boilerplate code hundreds of times.
Another good reason to use web template languages like Jinja2 is that templates make it easier to make large scale modifications to your code. If you are using templates and you want to make a major change to the shared code then you only need to make that change once. If you do not use templates then you might need to change that code hundreds of times. This increases the likelihood of errors and inconsistencies occurring where you change the code in one place but forget to change it in another.
How is Jinja2 used by Flask?
How is Jinja2 used by Flask? Jinja2 is useful for developers who are creating Flask applications because Flask is a web framework that allows users to build out logic determining what web page should be returned for a given HTTP request. That means that developers who are using Flask often need to build out complex web pages and documents using text-based languages like HTML. This type of situation where developers are building out multiple related web pages is exactly the use case that Jinja2 was intended for.
How to use Jinja2 with Flask
What does Jinja2 syntax for building out Flask apps look like? Here is a simple example. Say you were building out a Flask app that returned multiple HTML pages that used the same boilerplate HTML code to set up each page.
You might use some boilerplate code that looks something like the example below. In this scenario, the only code that would change across different pages is the code within the body of the page denoted by the Body text goes here! statement.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> Body text goes here! </body> </html>
All you have to do in order to insert a Jinja2 placeholder that can be replaced with the different body code for each page is type {% block body %}{% endblock %} in the area where the Body text goes here! placeholder was.
Let’s break this down a little more. To denote the start of a Jinja2 placeholder all you need to do is type {% block name %}, where name is an arbitrary name that is chosen for that block. We chose to use the name body because our placeholder is in the body of our template. To denote the end of the placeholder, all you need to do is type {% endblock %}. Here is what your template page will look like after you insert your Jinja2 placeholder.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Now what do you do with this template? Let’s assume that you called your Jinja2 template base.html. All you have to do when you want to use that template is tell Jinja2 the name of the template you want to use by typing {% extends ‘base.html’ %} and then type the same {% block body %}{% endblock %} code into your new HTML file.
The code that needs to be swapped in for the placeholder should be put between the {% block body %} and the {% endblock %} code. Here is an example of what this looks like.
{% extends 'base.html' %}
{% block body %}
The body code for your page goes here!
{% endblock %}
And voila! That is all it takes to use Jinja2 to create templates for web pages for Flask applications. Keep in mind that this is just a simple example and there is much more that Jinja2 is capable of. If you want to learn more about Jinja2 then you should check out the Jinja2 template documentation for more.
