Flask Jinja2 Template Guide: Syntax, Filters, Inheritance, and a CRUD Schedule Example

The previous chapter showed how to create a simple Flask "hello world" app with a base.html template; this section dives deeper into Flask's templating system powered by the Jinja2 engine, which separates presentation logic from business logic.

Jinja2 templates are ordinary HTML files containing placeholders that are resolved at render time via render_template . In Python code you call it like:

return render_template('schedule_list.html', schedules=schedules)

The first argument is the template filename; subsequent keyword arguments provide the values for variables used inside the template.

Template placeholders include ordinary content, variables/expressions (e.g., {{ myvar }} , {{ mydict['key'] }} , {{ mylist[3] }} , {{ myobj.somemethod() }} ), control tags (e.g., {% if var %}...{% endif %} , {% for item in items %}...{% endfor %} ), and comments ( {# This is a comment #} ).

Jinja2 provides many built‑in filters that modify variable output using the pipe syntax. Common filters are safe , capitalize , lower , upper , title , trim , striptags , and default . See the official documentation for the full list.

Template inheritance allows you to define a base layout (e.g., base.html ) with shared elements such as navigation, footer, and static assets, and then extend it in child templates using:

{% extends "base.html" %}

Child templates place their unique content inside defined blocks (e.g., {% block page_content %}...{% endblock %} ).

The article then upgrades the previous hello‑world example into a simple schedule‑keeping web app. The Python view returns a list of schedule objects, and the template renders them in a table using the DataTables plugin. Core Jinja2 constructs used include {% if %} and {% for %} statements.

Key code snippets in the template:

{% for schedule in schedules %}
{{ schedule.date }}
{{ schedule.title }}
Edit
Delete
{% endfor %}

Creating or editing a schedule opens a form; when saved, an AJAX request sends the data to a Flask endpoint that inserts or updates the record. Deleting a schedule triggers an API call that removes the row and refreshes the page.

The chapter concludes by noting that all displayed data are currently hard‑coded, and the next chapter will introduce the SQLAlchemy database plugin to store real data.