← Back to Tutorials

14. HTML Templates

pip install jinja2
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse

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

@app.get("/", response_class=HTMLResponse)
def home(request: Request):
    return templates.TemplateResponse(
        "index.html",
        {"request": request, "title": "FastAPI App"}
    )

@app.get("/items/{id}", response_class=HTMLResponse)
def item_detail(request: Request, id: int):
    return templates.TemplateResponse(
        "item.html",
        {"request": request, "item_id": id}
    )

Template File (templates/index.html)

<!DOCTYPE html>
<html>
<head><title>{{ title }}</title></head>
<body>
  <h1>Welcome to {{ title }}</h1>
  <p>This page is rendered with Jinja2.</p>
</body>
</html>
✏️ Exercise: Create a "templates" folder with an index.html. Render it from FastAPI passing a list of items. Display them in a loop using Jinja2 syntax.