Jinja - Short introduction and Sample Apps
Tags: jinja, python, webdev, appseed
Published: 2020-07-18 17:51:32

---
title: Jinja - Short introduction and Sample Apps
published: true
description: A short introduction in Jinja2 plus two open-source apps to play with
tags: Jinja, python, webdev, appseed
cover_image: https://raw.githubusercontent.com/app-generator/theme-jinja2-quick-uikit/master/media/theme-jinja2-quick-uikit-screen.png
---
Hello Coders,

This article is a **short introduction to Jinja**, a modern templating language used by Python programmers in frameworks like Flask, Bottle, optionally in Django (starting with 1.8 version). For those already familiar with Jinja2, and fast-runners, I'll drop some links below to some nice Jinja Templates, provided as super simple Flask starters (no database or hard dependencies):

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- ✨ [Flask/Jinja Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit) - product page
- ✨ [Flask/Jinja Datta Able](https://appseed.us/admin-dashboards/flask-datta-able) - product page
- ✨ [Flask/Jinja Bootstrap 5 Volt](https://appseed.us/admin-dashboards/flask-dashboard-volt) - product page
- ✨ [Flask/Jinja Material Lite Wpx](https://appseed.us/admin-dashboards/flask-dashboard-material-lite) - product page 

---

## ✨ [Flask/Jinja 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.

---

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

---

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

---

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

Datta Able comes with error/bug-free, well structured, well-commented code and regularly with all latest updated code. Which saves your a large amount of developing backend application time and it is fully customizable. This modern UI Kit crafted by CodedThemes features a rich UI Kit and pre-built pages: dashboard, maps and authentication pages.

---

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

---

![Jinja Template - Datta Able, thumbnail image.](https://raw.githubusercontent.com/app-generator/jinja-datta-able/master/media/jinja-template-dattaable-dashboard-screen.png)

--- 

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


Volt Dashboard is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS. There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on.


- ✨ [Jinja Volt Dashboard](https://appseed.us/admin-dashboards/flask-dashboard-volt) - product page
- ✨ [Jinja Volt Dashboard](https://flask-volt-dashboard.appseed-srv1.com/) - LIVE Demo

---

![Jinja Volt Dashboard - Starter provided by AppSeed.](https://raw.githubusercontent.com/app-generator/jinja-volt-dashboard/master/media/jinja-volt-dashboard-intro.gif)

---

## ✨ [Flask/Jinja Material Lite Wpx](https://appseed.us/admin-dashboards/flask-dashboard-material-lite)

WrapPixel's MaterialPro Lite is one of the best Bootstrap templates for admin dashboards and control admin panels. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.

---

- ✨ [Jinja Material Lite](https://appseed.us/admin-dashboards/flask-dashboard-material-lite) - product page
- ✨ [Jinja Material Lite](https://flask-dashboard-material-lite.appseed.us/) - LIVE Demo

---

![Jinja Material Lite - Starter provided by AppSeed.](https://raw.githubusercontent.com/app-generator/jinja-template-material-lite/master/media/jinja-template-material-lite-screen.png)

---

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

Jinja2 is a Python template engine used to generate HTML or XML returned to the user via an HTTP response. 

For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values.

---

## Why do we need Jinja?

**Sandboxed Execution** - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.

**HTML Escaping** Jinja 2 has a powerful automatic HTML Escaping, which helps to prevent Cross-site Scripting (XSS Attack). There are special characters like >,<,&, etc. which carry special meanings in the templates. So, if you want to use them as regular text in your documents then, replace them with entities. Not doing so might lead to XSS-Attack.

**Template Inheritance** - This feature helps us to generate new pages starting from a base template that we *inherit* a common structure. 

--- 

> How to get Jinja2

To start playing with it, just open a terminal and type:

```bash
$ pip install jinja2
```

---

## Jinja in action

> Simple runtime replace 

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

The engine will replace the inner `token` with value `Jinja2`. This is quite useful when we use this block for different `token` values.

---

> Lists iteration

In web development, we can have cases when a list should be displayed on the page: registered users, for instance, or a simple list of options. In Jinja, we can use a `for structure` as bellow:

```python
# Define data structure
my_list=[0,1,2,3,4,5] # a simple list with integers
```

In Jinja, we can iterate with ease, using a `for` block:

```html
...
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
...
```

---

> Template Inheritance

Templates usually take advantage of inheritance, which includes a single base template that defines the basic structure of all subsequent child templates. You use the tags { extends } and { block } to implement inheritance.

Let's take a look at 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 }` become `MySample`
- `{ block content }` become `Cool content here`

Here is the final HTML generated by Jinja:

```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>
```

This powerful feature helps us to build complex web apps with ease by using common pages and components to generated dynamic pages hydrated with real information loaded from the database or provided by users, for instance. 

---

> **Thanks for reading!** Let me know your thoughts in the comments. 

--- 

## Resources & Links

- More [Jinja/Flask Templates](https://appseed.us/apps/flask-apps)  - index provided by AppSeed
- [Jinja2](https://jinja.palletsprojects.com/en/2.11.x/) - official website