# Jinja Basics
> Zid themes are powered by the **Jinja** templating engine. Making it easy to embed dynamic data and logic into your theme design while keeping layouts flexible and reusable.
---
:::tip[]
Check out the full [Jinja Documentation](https://jinja.palletsprojects.com/en/stable/) to discover all available syntax, tags, filters, and features you can apply to build fully customizable and flexible layouts.
:::
## Understanding the Basics
Jinja uses two main syntax forms:
1. **Output variables** — `{{ ... }}`
Used to display the value of a variable in the template.
```js
{{ store.name }}
```
2. **Control statements** — `{{ ... }}`
Used for logic, loops, and template structure.
```js
{% if store.is_open %}
We are open!
{% endif %}
```
📚 Reference: [Jinja Template Basics](https://jinja.palletsprojects.com/en/stable/templates/)
---
## Common Jinja Tags
| Tag | Purpose |
| --- | --- |
| `extends` | Inherit from a base template |
| `include` | Insert another template inside this one |
| `for` | Loop over sequences |
| `if`/ `elif` / `else` | Conditional logic |
| `set` | Assign variables |
---
## Template Inheritance (extends and block)
Use extends to base your template on another (usually a layout), and block to fill in or override sections.
```js
{% extends "main.jinja" %}
{% block title %}Custom Page Title{% endblock %}
{% block content %}
Welcome to {{ store.name }}
{% endblock %}
```
**In this example:**
- The template inherits the overall HTML structure from main.jinja.
- The title and content blocks are overridden to provide page-specific content.
📚 Reference: [Jinja Template Inheritance](https://jinja.palletsprojects.com/en/stable/templates/#template-inheritance)
---
## Base Layout Example
```js
{% block title %}{% endblock %} | {{ store.name }}
{% block head %}{% endblock %}
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
```
Child templates extend this file and override blocks as needed.
---
## Including Templates (include)
Use include to insert another template’s contents, similar to a “copy-paste” at render time.
```js
{% block sidebar %}
{% include "components/sidebar.jinja" %}
{% endblock %}
```
📚 Reference: [Jinja Include Statement](https://jinja.palletsprojects.com/en/stable/templates/#include)
---
## Conditional Logic (if, elif, else)
```js
{% if user.is_active %}
Welcome, {{ user.name }}!
{% elif user.is_guest %}
Welcome, guest! Please sign in.
{% else %}
Access denied.
{% endif %}
```
📚 Reference: [Jinja If Statement](https://jinja.palletsprojects.com/en/stable/templates/#if)
---
## Loops (for)
```js
{% for product in products %}
- {{ product.title }} — {{ product.price }}
{% endfor %}
```
📚 Reference: [Jinja For Statement](https://jinja.palletsprojects.com/en/stable/templates/#for)
---
## Variable Assignment (set)
```js
{% set greeting = "Hello, World!" %}
{{ greeting }}
```
---
## Filters
Filters modify values before rendering. Zid supports Jinja’s core filters, plus some platform-specific ones.
Examples:
```js
{{ store.name | upper }} {# Convert to uppercase #}
{{ products | length }} {# Count items in a list #}
{{ description | safe }} {# Render as raw HTML #}
```
📚 Reference: [List of Built-in Jinja Filters](https://jinja.palletsprojects.com/en/stable/templates/#list-of-builtin-filters)
---
## Functions
Functions perform logic or transformations in templates. Jinja provides built-in functions, and Zid adds platform-specific ones (e.g., url_for, asset_url).
```js
{{ range(1, 5) }} {# Generates 1,2,3,4 #}
```
📚 Reference: [Built-in Jinja Functions](https://jinja.palletsprojects.com/en/stable/templates/#list-of-global-functions)
## Null safety
Jinja templating engine can handle accessing chained null elements safely, however it has limitations
for example trying to iterate on a null element or trying to devide by zero will break the rendering
Jinja provides builtin tests to protect against these mistakes
so you can check if a variable is iterable by testing
```js
{% if var is defined and var is iterable %}
```
📚 Refernce: [Jinja's builtin tests](https://jinja.palletsprojects.com/en/stable/templates/#list-of-builtin-tests)