How to Use Filters in Jinja2 Templates with Flask

In Flask, you use filters in Jinja2 templates by applying them with the pipe symbol | to variables, like {{ variable|filter_name }}. You can also create custom filters in Flask by defining a Python function and registering it with @app.template_filter().

Syntax

Filters in Jinja2 are applied using the pipe symbol | after a variable or expression. The general syntax is:

{{ variable | filter_name }}

Here:

• variable is the data you want to transform.
• filter_name is the name of the filter to apply.

You can chain multiple filters like {{ variable | filter1 | filter2 }}.

jinja2

{{ name | capitalize }}

Example

This example shows how to use built-in filters in a Flask app and how to create a custom filter to reverse a string.

python

from flask import Flask, render_template_string

app = Flask(__name__)

# Custom filter to reverse a string
def reverse_string(s):
    return s[::-1]

@app.template_filter('reverse')
def reverse_string_filter(s):
    return reverse_string(s)

@app.route('/')
def index():
    name = 'flask'
    template = '''
    <p>Original: {{ name }}</p>
    <p>Capitalized: {{ name | capitalize }}</p>
    <p>Reversed: {{ name | reverse }}</p>
    '''
    return render_template_string(template, name=name)

if __name__ == '__main__':
    app.run(debug=True)

Output

<p>Original: flask</p>
<p>Capitalized: Flask</p>
<p>Reversed: ksalf</p>

Common Pitfalls

Common mistakes when using filters in Jinja2 with Flask include:

• Forgetting to register a custom filter with @app.template_filter(), so it won't be recognized in templates.
• Using incorrect filter names or typos, which cause silent failures or errors.
• Trying to use filters on data types they don't support, leading to unexpected output.
• Not passing the correct context or variable to the template, so filters have no effect.

python

from flask import Flask, render_template_string

app = Flask(__name__)

# Wrong: defining a filter but not registering it
# def shout(text):
#     return text.upper()

# Correct: register the filter
@app.template_filter('shout')
def shout(text):
    return text.upper()

@app.route('/')
def index():
    template = '{{ "hello" | shout }}'
    return render_template_string(template)

if __name__ == '__main__':
    app.run(debug=True)

Output

HELLO

Quick Reference

Filter Name	Description	Example Usage
capitalize	Capitalizes the first letter	{{ name | capitalize }}
lower	Converts text to lowercase	{{ name | lower }}
upper	Converts text to uppercase	{{ name | upper }}
default	Provides a default value if variable is undefined or false	{{ name | default('Guest') }}
length	Returns the length of a list or string	{{ items | length }}
custom	User-defined filters registered in Flask	{{ value | custom_filter }}

Key Takeaways

Use the pipe symbol | to apply filters in Jinja2 templates in Flask.

Built-in filters like capitalize, lower, and default help format data easily.

Create custom filters by defining a Python function and registering it with @app.template_filter().

Always register custom filters to make them available in templates.

Check filter names and data types to avoid silent errors or unexpected output.