# Templates
You can use any template engine you want with **FastAPI**.
A common choice is Jinja2, the same one used by Flask and other tools.
There are utilities to configure it easily that you can use directly in your **FastAPI** application (provided by Starlette).
## Install dependencies
Add `jinja2` to your project:
```console
$ uv add jinja2
---> 100%
```
## Using `Jinja2Templates`
- Import `Jinja2Templates`.
- Create a `templates` object that you can reuse later.
- Declare a `Request` parameter in the _path operation_ that will return a template.
- Use the `templates` you created to render and return a `TemplateResponse`, pass the name of the template, the request object, and a "context" dictionary with key-value pairs to be used inside of the Jinja2 template.
```python
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
return templates.TemplateResponse(
request=request, name="item.html", context={"id": id}
)
```
:::callout{intent="note"}
Before FastAPI 0.108.0, Starlette 0.29.0, the `name` was the first parameter.
Also, before that, in previous versions, the `request` object was passed as part of the key-value pairs in the context for Jinja2.
:::
:::callout{intent="tip"}
By declaring `response_class=HTMLResponse` the docs UI will be able to know that the response will be HTML.
:::
:::callout{intent="note" title="Technical Details"}
You could also use `from starlette.templating import Jinja2Templates`.
**FastAPI** provides the same `starlette.templating` as `fastapi.templating` just as a convenience for you, the developer. But most of the available responses come directly from Starlette. The same with `Request` and `StaticFiles`.
:::
## Writing templates
Then you can write a template at `templates/item.html` with, for example:
```jinja {7}
Item Details
```
In this example, it would link to a CSS file at `static/styles.css` with:
```CSS {4}
h1 {
color: green;
}
```
And because you are using `StaticFiles`, that CSS file would be served automatically by your **FastAPI** application at the URL `/static/styles.css`.
## More details
For more details, including how to test templates, check [Starlette's docs on templates](https://starlette.dev/templates/).
## Related pages
- [About](./about-index.md)
- [Advanced User Guide](./advanced-user-guide-index.md)
- [Deployment](./deployment-index.md)
- [FastAPI](./fastapi-index.md)
- [FastAPI Docs](../index.md)
- [Features](./features-index.md)
- [How To - Recipes](./how-to-recipes-index.md)
- [Learn](./learn-index.md)
- [More](./more-index.md)
- [OpenAPI](./openapi-index.md)
# Agent Instructions
Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.