Skip to content
Related Articles

Related Articles

Improve Article

Create HTML User Interface using Eel in Python

  • Last Updated : 08 May, 2021

Eel is a Python library for making simple offline HTML/JS GUI apps, with full access to Python capabilities and libraries. Eel hosts a local webserver, then lets you annotate functions in Python so that they can be called from Javascript, and vice versa.

Installation

To install this module type the below command in the terminal.

pip install eel

Getting Started

First, create a project folder and make another folder called web under it. The web folder consists of all the website files. Create a main.py python file outside the web folder inside project folder.

This should build a folder like below : 

Files and Folders

To use eel in the frontend javascript. Include the following code in the HTML file : 



<script type=”text/javascript” src=”/eel.js”></script>

Including this library creates an eel object which can be used to communicate with the Python side. Any functions in the Python code which are decorated with @eel.expose like this:

@eel.expose

def function(): 

Any python function that is exposed using eel.expose can be called in the javascript like below : 

 eel.python_function_name()(callback);  

Below is an example in which python has a function random_python which returns a random number between 1 and 100, Javascript calls the and then grabs the returned number and changes a div’s innerHTML.

The HTML file here is used to create a window that displays all the required attributes, the javascript file will be called by the HTML file to add dynamism to the window created. Python code is used to make this all work.



HTML file : 

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eel Example</title>
    <style>
      h1{
        color: green;
        text-align: center;
      }
      .random_number{
        margin: 50px;
        font-size: 150px;
        text-align: center;
      }
      button{
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1>Geeks for Geeks</h1>
    <div class="random_number"></div>
    <button>Get a Random number using Python</button>
    <script type="text/javascript" src="../eel.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

script.js : 

Javascript




// Onclick of the button
document.querySelector("button").onclick = function () {  
  // Call python's random_python function
  eel.random_python()(function(number){                      
    // Update the div with a random number returned by python
    document.querySelector(".random_number").innerHTML = number;
  })
}

The main.py contains : 

Python3




import eel
from random import randint
  
eel.init("web")  
  
# Exposing the random_python function to javascript
@eel.expose    
def random_python():
    print("Random function running")
    return randint(1,100)
  
# Start the index.html file
eel.start("index.html")

Output :

 

Note: Here the javascript is calling the python function, when python returns the data it changes the div text.

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course




My Personal Notes arrow_drop_up
Recommended Articles
Page :