Jinja Template - Cheat Sheet and FREE Samples
Tags: jinja, python, webdev, appseed
Published: 2020-09-15 18:53:39

---
title: Jinja Template - Cheat Sheet and FREE Samples
published: true
description: A short and comprehensive introduction to Jinja Template system (free sample included)
tags: jinja, python, webdev, appseed
cover_image: https://raw.githubusercontent.com/app-generator/jinja-template/master/media/jinja-template-cheat-cheet.jpg
canonical_url: https://appseed.us/jinja-template
---
Hello Coders,

This article presents a short introduction to **[Flask/Jinja Template](https://appseed.us/admin-dashboards/flask)** system, a modern and designer-friendly language for Python, modeled after Django’s templates. **Jinja** is basically an engine used to generate HTML or XML returned to the user via an HTTP response. For newcomers, **Jinja** is a Python library used by popular web frameworks like Flask, FastAPI, and Django to serve HTML pages in a secure and efficient way. 

> *Thanks for reading!*

--- 

## [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/flask/)

Admin dashboard generated by AppSeed in **Flask** Framework. Designed for those who like bold elements and beautiful websites, **[Soft UI](https://appseed.us/ui-kit/soft-ui-design-system)** Dashboard is ready to help you create stunning websites and webapps. **[Soft UI](https://appseed.us/ui-kit/soft-ui-design-system)** Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining.

- 👉 [Flask/Jinja Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/flask/) - `product page`
- 👉 [Flask/Jinja Soft UI Dashboard](https://flask-soft-ui-dashboard.appseed-srv1.com/) - `LIVE Demo`

---

![Jinja Template - Soft UI Dashboard, open-source Bootstrap 5 design.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atwiztwd03yuksirm84g.gif)

--- 

## [Material Design](https://appseed.us/product/material-kit/flask/)

Material Kit is a Free Bootstrap 5 UI Kit with a fresh, new design inspired by Google's material design. Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography.

- 👉 [Flask/Jinja Material Kit](https://appseed.us/product/material-kit/flask/) - `product page`
- 👉 [Flask/Jinja Material Kit](https://flask-material-kit.appseed-srv1.com) - `LIVE Demo`

---

![Jinja Template - Material Kit Design.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z4ccrmxc10gtcyc8k58.png)  

---

## [What is Jinja](https://docs.appseed.us/content/what-is/jinja)

Jinja is a library for Python used by popular web frameworks like Flask and Django to serve HTML pages in a secure and efficient way. Using a template engine is a common practice in web development, no matter the language or framework used to code the web application. 

**Jinja Environment**

Being a Python library, Jinja requires Python to installed and usable via the terminal. We can check the Python installation by typing `python --version`. Once we are sure that Python is installed, Jinja can be installed via `PIP`, the official package manager for Python: 

```bash
$ pip install jinja2
```

The most simple Jinja code snippet might be the following:

```python
>>> from jinja2 import Template
>>> t = Template("Jinja {{ token }}!")
>>> t.render(token="works")
u'Jinja works!'
```

---

> Reasons/advantages of using a template engine

### Work less

Jinja allows us to reuse components (aka common HTML chunks) in many pages and contexts with minor changes. Imagine that we have a footer with some links and contact information, common to all pages in a web application. Using Jinja we can define a separate file named `footer.html` and we can reuse it with a simple include:

---

**footer.html** definition
```html
<footer class="footer">
    <div class=" container-fluid ">
        <span>
            &copy; YourCompany;
        </span>
        
        <span>
            Contact: bill [ @ ] microsoft.com
        </span>
    </div>
</footer>
``` 

---

**footer.html** usage in a final page:
```html
<head>
  <title>
    Jinja Template - Cheat Sheet | Dev.to
  </title>
</head>
<body>
    <div class="content">
        Some cool content
    </div>
    
    <!-- The magic include line --> 
    {% include 'footer.html' %}    

</body>
</html>
```

---

### Template Inheritance

Inheritance, in Jinja context, means to define a `base template` that defines the basic structure of all subsequent child templates. This master template can be `inherited` via `extends` directive to build variations (new pages). 

> A real sample

**Parent HTML** - saved as `base.html`
```html
<html>
  <head>
    <title>My Jinja {% block title %}{% endblock %} </title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      { block content }{ endblock }
      <br>
    </div>
  </body>
</html>
```

---

**The Child template** - saved as `child.html`
```html
{ extends "base.html" }

{ block title } MySample { endblock }

{ block content }
  Cool content here
{ endblock }
```

When Jinja loads `child.html`, the `{ extends }` block informs the engine to merge the `base.html` template with the content provided by `child.html`.

- `{ block title }` becomes **MySample**
- `{ block content }` becomes **Cool content here**

--- 

**Generated HTML**
```html
<html>
  <head>
    <title>My Jinja MySample</title>
  </head>
  <body>
    <div class="container">
      <h2>This is from the base template</h2>
      <br>
      Cool content here
      <br>
    </div>
  </body>
</html>
```

---

## Jinja - Render Lists

Jinja supports control structures like `if/else`, `for loops` to manipulate lists and dictionaries. 

**List definition**
```python
# Define a simple list
users = ['user1','user2', 'user3']
```

**Jinja code snippet**
```html
<h1>Members</h1>
<ul>
{% for user in users %}
  <li>{{ user }}</li>
{% endfor %}
</ul>
```

**Generated HTML**
```html
<h1>Members</h1>
<ul>
  <li>user1</li>
  <li>user2</li>
  <li>user3</li>
</ul>
```

---

`For` loops can be checked for emptiness with a simple `else`, as below: 

**Jinja code snippet**
```html
<ul>
{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
</ul>
``` 

**Generated HTML**
```html
<h1>Members</h1>
<ul>
  <li>no users found</li>
</ul>
```

---

## Jinja - HTML Escaping

Escaping is useful when HTML is generated and the injected content might contain `>`, `<`, `&`, or `"`. Escaping in Jinja works by piping the variable through the |e filter:

**Jinja code snippet**
```html
{{ content|e }} <!-- content might contain unsafe chars -->
```

---

### [Jinja Filters](https://jinja.palletsprojects.com/en/2.11.x/templates/#list-of-builtin-filters)

Filter sections allow to apply regular Jinja filters on a block of template data - the syntax:

**Jinja code snippet**
```html
{% filter upper %}
    uppercase me
{% endfilter %}
```

**Generated HTML**
```html
UPPERCASE ME
```

---

## Jinja Math

Jinja allows you to compute values. Here are some samples:

```html
{{ 1 + 1 }} will render 1
```

```html
{{ 1 / 2 }} will render 0.5
```

```html
{{ 11 % 7 }} will render 4
```

--- 

If this Jinja Template cheat sheet sounds like something that you can use in your development, we can move forward with a real sample coded on top of **Now UI Dashboard**, a popular (free) design crafted by Creative-Tim.
Being an open-source project released by [AppSeed](https://appseed.us) under the MIT license, the project can be used for unlimited hobby & commercial projects. 

---

## [Flask Bootstrap 5](https://appseed.us/admin-dashboards/flask-dashboard-volt)

The seed project is basically a lightweight Flask project coded without a database or other hard dependencies. The project comes with deployment scripts for Docker, HEROKU, and Gunicorn/Nginx stack.

---

> **How to compile Jinja Volt** (information extracted from [README](https://github.com/app-generator/jinja-volt-dashboard/blob/master/README.md) file)

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-volt-dashboard.git
$ cd jinja-volt-dashboard
$
$ # Virtualenv set up (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the Jinja Template
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/
```

If all goes well, we should see **Jinja Volt** running on port `5000`: 

![Jinja Template - Volt Dashboard, the main screen.](https://raw.githubusercontent.com/app-generator/jinja-volt-dashboard/master/media/jinja-volt-dashboard-screen.png)

--- 

## [Flask Datta Able](https://appseed.us/admin-dashboards/flask-datta-able)

Datta Able is the most stylized Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Comes with error/bug-free, well structured, well-commented code and regularly with all latest updated code. This saves you a large amount of developing backend application time and it is fully customizable

---

- [Datta Able Flask](https://appseed.us/admin-dashboards/flask-datta-able) - product page
- [Datta Able Flask - Demo](https://flask-datta-able.appseed-srv1.com/) - LIVE deployment


---

![Jinja Datta Able - Open-Source admin dashboard crafted in Jinja.](https://raw.githubusercontent.com/app-generator/jinja-datta-able/master/media/jinja-template-dattaable-dashboard-screen.png)

---

## [Flask Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit)

Pixel is a free, fully responsive, and modern Bootstrap 4 UI Kit that will help you build creative and professional websites. Use our components and sections, switch some Sass variables to build and arrange pages to best suit your needs.

Pixel Lite comes with 6 premium example pages that we created to show you the beautiful user interfaces that can be created. Some of these pages are a pricing page, about page, contact page, login and register pages.

---

- [Jinja Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit) - product page
- [Jinja Pixel UI - Demo](https://flask-pixel-lite.appseed-srv1.com/) - LIVE deployment

---

![Jinja Pixel UI - Open-source Jinja template provided by AppSeed.](https://raw.githubusercontent.com/app-generator/jinja-template-pixel-uikit/master/media/jinja-template-pixel-uikit-screen-4.png)

---

## [Gradient Able Flask](https://appseed.us/admin-dashboards/flask-gradient-able)

Open-source Jinja template coded in **Flask** Framework. [Gradient Able](https://appseed.us/admin-dashboards/flask-gradient-able) Bootstrap 4 Free/Lite Admin Template is a complete solution for your dashboard creation. **Gradient Able** stands out from the crowd with an elegant look that combines soft gradient colors with well-suited typography and great cards and graphics.

---

- [Gradient Able Flask](https://appseed.us/admin-dashboards/flask-gradient-able) - Product page
- [Gradient Able Flask](https://flask-gradient-able.appseed-srv1.com/) - LIVE deployment

---

![Jinja Template Gradient Able - Open-Source template project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/flask-dashboard-gradientable/master/media/flask-dashboard-gradientable-screen.png)

---

> Thanks for reading! For more resources, please access:

---

- [Jinja](https://jinja.palletsprojects.com/en/2.11.x/) - the official docs
- More **[Jinja Templates](https://appseed.us/jinja-template)** provided by AppSeed