Hey folks,

today I’d like to show how to render an HTML (or any random non-binary) File with Jinja2 and Python 3.6.

A possible usage for rendering an HTML file is the avoidance of writing duplicate code. I prepared a small HTML file which only consists of a headline and the variable.

Source Template
<h1>{{ greeting }}</h1>

As you can see between the h1 tags the text is padded in double curly braces which is the syntax to render variables with Jinja2.


Clearing all conditions

At first, we’re going to install Jinja2 which is needed for Rendering.

Installing Jinja2
[email protected]: pip3 install jinja2


Now we’re heading to a new file which will be named renderer.py and start with our imports.

Importing needed modules
#!/usr/bin/env python3
import os
import jinja2
import sys


After importing all needed modules we’re going to set up some variables.

setting up Variables
template_filename = "template.html.j2"
rendered_filename = "rendered.html"
render_vars = {
    "greeting": "Oh hi!"

script_path = os.path.dirname(os.path.abspath(__file__))
template_file_path = os.path.join(current_path, template_filename)
rendered_file_path = os.path.join(current_path, rendered_filename)
  • template_filename is the variable which contains the name of the reusable source file.
  • rendered_filename is the variable which contains the name of the output file which has been rendered trough Jinja2
  • render_vars contains the dictionary which will be passed to Jinja2 to render the source
  • script_path  contains the absolute path of the renderer.py script. E.g.
    • If the absolute path to renderer.py is /home/dummy/renderer.py then it would contain /home/dummy
  • template_file_path contains the absolute path to the source template file which will be passed to Jinja2
  • rendered_file_path contains the absolute path to the rendered file


Render the source template

Now we’re defining an environment which describes where to find the source template.

Defining a render environment
render_environment = jinja2.Environment(loader=jinja2.FileSystemLoader(template_file_path))

We’re using the jinja2.FileSystemLoader() as loader which takes the absolute path to the folder where the template is located.


To render the file and save the output into a variable we execute the render() method on render_environment and pass the render_vars dictionary.

Render variables into readable text
output_text = environment.get_template(template_filename).render(render_vars)


Putting it all together results in a static render script which prints out the rendered text.

Example - Print rendered Text
#!/usr/bin/env python3
import os
import jinja2

template_filename = "./template.html.j2"
rendered_filename = "rendered.html"
render_vars = {
    "greeting": "Oh hi!"

script_path = os.path.dirname(os.path.abspath(__file__))
template_file_path = os.path.join(script_path, template_filename)
rendered_file_path = os.path.join(script_path, rendered_filename)

environment = jinja2.Environment(loader=jinja2.FileSystemLoader(script_path))
output_text = environment.get_template(template_filename).render(render_vars)

print output_text
[email protected]: python3 /home/dummy/renderer.py
<h1>Oh hi!<h1>


Writing the output into an HTML file

To write the output into an HTML File you need to replace the last print line with the With-Statement and write the output_text into rendered_file_path.

Replacing print with fileopen
with open(rendered_file_path, "w") as result_file:

As soon as the With-Statement reaches its end, it automatically closes the file and destroys the result_file object. The end of the With-Statement is after the last indented line.


Further Ressources

Jinja2 Documentation: http://jinja.pocoo.org/docs/

Marvyn Zalewski

Marvyn Zalewski

Marvyn is a nerdy guy which is into Linux and everything connected to it. He also loves to automate his home and build up a home lab which includes e.G. a custom steam machine and backup automation. He loves to hear EDM music and try to become a gin enthusiast.



jawahar · 29. April 2019 at 15:56

What if i want to import Static file such as JS, CSS files etc….

    Marvyn Zalewski

    Marvyn Zalewski · 29. April 2019 at 17:11

    Hi @jawahar,

    thanks for your question. It’s fairly easy. Jinja2 has a builtin method called include.

    Simply place your static file(s) in the same directory as the template and add the following command to the template.html.j2:

    {% include(“staticfile.js”) %}

    Here is the documentation which also adds some different use cases:

    Kind regards,

Leave a Reply

Your email address will not be published.

6 + 11 =

This website is using Google Analytics. Please click here if you want to opt-out. Click here to opt-out.