Jinja Templates
Creating dynamic web pages using templates has been around since the beginning of the Web. In the Java world, we used Java Server Pages (JSP) scriptlets, EL Tags, and more recently the Thymeleaf framework used in the Spring framework.
In Python platform there are a couple of popular templating engines among them Django and Jinja are noteworthy. Jinja is a lightweight templating engine that is inspired by Django's template language and for the most part, files written in Django can work in Jinja as well. Reference: https://www.dyspatch.io/blog/python-templating-performance-showdown-django-vs-jinja
render_template function
To use Jinja templating, you have to import render_template function from flask module. Then you can call the render_template function, passing the template's filename as the first argument, followed by any number of keyword arguments. These keyword arguments become the variables available inside the template.
Here is an example:
Here is the main Flask app that uses the index.html page that is rendered through template engine:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
@app.route('/<name>')
def greet(name=None):
return render_template('index.html', name=name)
if __name__ == "__main__":
app.run()
Since the Flask app was instantiated with default settings, it expects to find the index.html template in a folder named templates
So create a 'templates' folder in the project root and copy the below index.html page inside the 'templates' folder:
<!doctype html>
<title>Hello from Flask</title>
{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}
Let us understand a few terms in this page:
render_template: This is the function used to render index.html through the template engine. The templating framework replaces all the placeholders in the html page, with values of variables as required.
{{ ... }} for Expressions: These are used to print the value of a variable or the result of an expression. For example, {{ name }} is replaced by the value of the name variable.
{% ... %} for Statements: These are used for control flow, like if statements and for loops. For example, {% if name %} starts a conditional block.
@app.route: You can define the RESTful end points using this annotation, that are ready to receive connections using HTTP.
Template Inheritance
One of the most powerful features of Jinja is template inheritance. It allows you to build a base "skeleton" template that contains all the common elements of your site and define blocks that child templates can override.
First, create a file called base.html in your templates folder. This will be our skeleton.
templates/base.html
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %} - My Webpage</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
<div id="footer">
{% block footer %}
© Copyright 2025 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
Now, you can modify your index.html to extend this base template:
templates/index.html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block content %}
{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}
{% endblock %}
When you render index.html, Jinja sees the {% extends "base.html" %} tag and loads the base template. It then fills in the title and content blocks with the content defined in index.html. This is a fantastic way to avoid repeating the same HTML boilerplate in every file.