Jinja2 templates — render HTML on the server

TemplateResponse renders an HTML file with variables. base.html + child.html pattern.

main.py v3.1

# main.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory='templates')

@app.get('/', response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse('home.html', {
        'request': request,        # REQUIRED — always pass this
        'app_name': 'MyAPI',
        'users': ['Ada', 'Alan', 'Bob'],
    })

# templates/base.html:
"""
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}MyApp{% endblock %}</title>
</head>
<body>
  <nav><a href="/">Home</a></nav>
  <main>{% block content %}{% endblock %}</main>
</body>
</html>
"""

# templates/home.html:
"""
{% extends 'base.html' %}
{% block title %}Home — {{ app_name }}{% endblock %}
{% block content %}
  <h1>Welcome to {{ app_name }}</h1>
  <ul>
    {% for u in users %}
      <li>{{ u }}</li>
    {% endfor %}
  </ul>
{% endblock %}
"""

API simulator click Simulate

Click "Simulate" to see what this FastAPI app does.

🧠 How it works

Jinja2Templates(directory='templates') — point at your templates folder. TemplateResponse(template_name, context_dict) — renders the template with the variables. 'request': request is REQUIRED since FastAPI 0.85 — without it you get an error. {% extends 'base.html' %} — child template inherits the shell. {% block name %}...{% endblock %} — named holes the child fills. {{ variable }} — insert a value. {{ obj.method() }} — call a method. {% for x in items %}...{% endfor %} — loop. {% if cond %}...{% endif %} — conditional. {{ x | filter }} — apply a filter (upper, lower, length, default). Templates run SERVER-SIDE — the browser gets pure HTML. Faster first paint than React.

✏️ Try these changes

Change 'app_name': 'MyAPI' to 'app_name': 'CoolAPI'
→ title and h1 change
Add a new variable 'count': 100 to the context and show it in home.html
→ {{ count }} renders
Add a filter: {{ users | length }}
→ shows the count
Add an if: {% if users %}...{% else %}No users{% endif %}
→ conditional rendering

← Previous lab

Pydantic request bodies — automatic validation

Next lab →

Dependency injection — Depends()