Day 6 — Mastering Jinja Templating in Flask
Learn how to create dynamic web pages in Flask using Jinja templates
Day 6 — Mastering Jinja Templating in Flask
Learn how to create dynamic web pages in Flask using Jinja templates
Image Designed by the Author on Canva
Not a Medium member? Have free access to this story via this link.
Read the previous part of the series **here.**
So far, our HTML pages have been mostly static. The content displayed to the user has been hardcoded directly into the HTML files.
But real-world web applications rarely work that way.
For example, a blog website shows different posts to different users, while an online store displays a constantly changing list of products.
To build these kinds of applications, we need a way to insert dynamic data into our HTML pages.
And that’s exactly where Jinja templating in Flask comes in.
In today’s article, we’ll explore the fundamentals of Jinja templating and learn how Flask uses it to render dynamic data in HTML pages.
Alright, let’s get started!
What Exactly is Jinja?
Jinja and Flask Logo
Jinja is a templating engine used by Flask to render templates and display dynamic data on HTML pages. These templates help separate application logic from the user interface, making web applications easier to build and manage.
Example: A Simple Course Website
Now, let’s understand how Jinja templating works in Flask through a practical example. For this, we’ll build a simple course website.
We’ll first create two files for our project:
- app.py — contains the Flask application code.
- index.html — displays the course information.
The project folder structure should look like this:
course-app/
│
├── app.py
│
└── templates/
└── index.htmlPassing Dynamic Data in HTML Templates
Our first task is to display a welcome message on the page using the course name provided by the user in the URL.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/<course>")
def welcome(course):
return render_template("index.html", course=course)
if __name__ == "__main__":
app.run(debug=True)Here:
<course>captures the value entered by the user in the URL.course=coursepasses the captured value to theindex.htmltemplate.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Course Website</title>
</head>
<body>
<h1>Welcome to {{ course }} Course Page</h1>
</body>
</html>Here:
{{ course }}is a Jinja placeholder used to display dynamic data.- When the
index.htmltemplate is rendered, Jinja replaces{{ course }}with the value passed fromrender_template().
Output:
Including Logic in HTML Templates
Jinja supports several Python-like control structures, including for loops and if-elif-else conditionals.
Suppose our website now offers multiple courses instead of just one. We can simply create a list of courses in app.py and use a Jinja for loop to display each one in the index.html template.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
# Define a course list
courses = ["Python Programming", "Data Structures and Algorithms", "Machine Learning"]
return render_template("index.html", courses=courses)
if __name__ == "__main__":
app.run(debug=True)index.html
<!DOCTYPE html>
<html>
<head>
<title>Course Website</title>
</head>
<body>
<h1>Available Courses</h1>
<ul>
{% for course in courses %}
<li>{{ course }}</li>
{% endfor %}
</ul>
</body>
</html>Here:
{% for course in courses %}starts a Jinja loop.{{ course }}displays each item in the list.{% endfor %}marks the end of the loop.
Output:
Let’s say our website has premium members who can access all courses, while regular users see an upgrade message. We can use a Jinja if-else block in the HTML template to implement this behaviour.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
courses = ["Python Programming", "Data Structures and Algorithms", "Machine Learning"]
isPremium = False # User is not premium
return render_template("index.html", courses=courses, isPremium=isPremium)
if __name__ == "__main__":
app.run(debug=True)index.html
<!DOCTYPE html>
<html>
<head>
<title>Course Website</title>
</head>
<body>
{% if isPremium %}
<p>Premium content unlocked!</p>
<h1>Available Courses</h1>
<ul>
{% for course in courses %}
<li>{{ course }}</li>
{% endfor %}
</ul>
{% else %}
<p>Upgrade your account to access premium content.</p>
{% endif %}
</body>
</html>Output (when isPremium=False):
Output (when isPremium=True):
And just like Python, Jinja also supports elif statements. The syntax is:
{% if condition %}
{# HTML content #}
{% elif condition %}
{# HTML content #}
{% else %}
{# HTML Content #}
{% endif %}Here, the {# ... #} Jinja syntax is used to add comments inside an HTML template.
Jinja Cheat Sheet for Flask
Image Designed by the Author on Cavna
Understanding these three Jinja syntaxes is enough to build most Flask templates.
Wrap Up
Today, we explored the fundamentals of Jinja templating in Flask.
Jinja is one of the most important parts of Flask development because it bridges the gap between backend logic and frontend presentation.
In the next article, we’ll learn how to organize larger Flask applications using template inheritance, allowing us to reuse common layouts and avoid repeating HTML code across multiple pages.
Stay tuned for **Day 7!**
메타데이터
- post_id
- ce01e17c9876
- slug
- day-6-mastering-jinja-templating-in-flask-ce01e17c9876
- url
- https://medium.com/python-for-everything/day-6-mastering-jinja-templating-in-flask-ce01e17c9876
- canonical_url
- https://medium.com/python-for-everything/day-6-mastering-jinja-templating-in-flask-ce01e17c9876
- author_url
- https://medium.com/@aliyannshaikhh
- status
- ok
- fetched_at
- 2026-07-09 08:27:28
