How to use Jinja2 template in eel python?

Question

I want to create an desktop application in python, so I started using the eel library to easily design a nice looking GUI application using html, css & javascript.

I have the following code in which I have imported the eel module and started the application with web/templates/index.html file to display as the main page & I have created a variable name which I want to use in the template and display it's value :

main.py

import eel
import pyautogui

name = 'Ajay'

eel.init('web')
eel.start(
    'templates/index.html', 
    size=pyautogui.size(), 
    jinja_templates='web/templates'
)

project's directory tree

FirstProj
  - main.py
  - web/
      - templates/
          - index.html

index.html

<html>
   <head>
       <script type="text/javascript" src="/eel.js"></script>
   </head>
   <body>
       <h1> Hello {{name}}! </h1>
   </body>
</html>

I found out that using the jinja2_template method of eel.btl I can fill the values context values into the template. but how to render it? I tried the following but it didn't work :

import eel, pyautogui

context = { 'name': 'Ajay' }
temp = eel.btl.jinja2_template('web/templates/index.html', context)

eel.init()
eel.start(temp, size=pyautogui.size(), jinja_templates='web/templates')

It showed me the following error page :

Any help will be appreciated. Thanks in advance!

Francesco Fornari · Answer 1 · 2021-07-07T07:23:26.020

I found the solution installing eel[jinja2] after that it needs to have a structure folder like

.
├── app.py
└── web
    ├── css
    │   ├── bulma.min.css
    │   └── main.css
    ├── js
    │   └── main.js
    └── templates
        ├── base.html
        └── index.html

for start in app.py

eel.start(
    'templates/index.html',
    jinja_templates='templates'
)

in the base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eel example</title>

    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/bulma.min.css" />
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>
<script src="../js/main.js"></script>
</html>

and in index.html

{% extends "base.html" %}

{% block content %}
<h1 class="title has-text-centered">Hello world!</h1>
{% endblock %}

score 2 · Answer 2 · answered Mar 03 '23 at 20:49

For anyone in still interested, I compiled answers I found from various sources into this working example for passing variables into a Jinja2 template and starting it with eel.

This may not be the best solution but since there is nothing better here yet I will put this hear until I find a better method.

File Structure

.
├── app.py
└── web
    ├── html
    ├── css
    │   └── main.css
    ├── js
    │   └── main.js
    └── templates
        ├── base.tmpl
        └── index.tmpl

base.tmpl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eel example</title>

    <link rel="stylesheet" href="../css/main.css" />
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>
<script src="../js/main.js"></script>
</html>

index.tmpl

{% extends "base.tmpl" %}

{% block content %}
<ul>
  {% for user in users %}
    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
  {% endfor %}
</ul>
{% endblock %}

and my full app.py, building off the Eel and Jinja2 examples as well as this youtube video: https://www.youtube.com/watch?v=0jK7De85X7w

import eel
import random
from datetime import datetime
from jinja2 import Environment, FileSystemLoader
import os

eel.init('web')

@eel.expose
def get_random_name():
    eel.prompt_alerts('Random name')

@eel.expose
def get_random_number():
    eel.prompt_alerts(random.randint(1, 100))

@eel.expose
def get_date():
    eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))

@eel.expose
def get_ip():
    eel.prompt_alerts('127.0.0.1')

# ^^^ Use the python code above to get initial variables
context = {'users': [{"username": "Michael", "url": "MichaelsURL"}, 
{"username": "Trevor", "url": "TrevorsURL"}]}

# Use Jinja to compile templates into an html file with the variables
root = os.path.dirname(os.path.abspath(__file__))
templates_dir = os.path.join(root, 'web', 'templates')
env = Environment( loader = FileSystemLoader(templates_dir) )
template = env.get_template('index.tmpl')
compiledHTML = template.render(context)

# Save the compiled html to a file
filename = os.path.join(root, 'web', 'html', 'index.html')
with open(filename, 'w') as fh:
    fh.write(compiledHTML)

# Host the compiled html with eel
eel.start("html/index.html", cmdline_args=['--start-fullscreen'], 
jinja_templates='templates')

This uses Jinja2 to compile the template (tmpl) into renderable html which is then saved to the html folder and then opened with eel.

Not sure how useful this will actually be when I go on to using eel for a dynamic user interface, but it's a start!

How to use Jinja2 template in eel python?

2 Answers2