4 ways to create modern GUI in python in the easiest way possible
Tags: python, design, beginners, figma
Published: 2021-12-03 09:37:20

## Introduction

Hi developers, I am Yash Makan and today we are going to discuss how can you make beautiful UI applications in python. I know that this sounds a little weird when I say "beautiful UI" together in context with python as I personally feel that the standard Tkinter library is not good enough to develop amazing UI. Today we will cover 4 different ways to make modern applications in python so without any further ado let's begin,

![https://i.giphy.com/media/3BUYbmXltgQ4zu0Tv5/giphy.webp](https://i.giphy.com/media/3BUYbmXltgQ4zu0Tv5/giphy.webp)



### Before

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj3guv1g8ku69j50la5v.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cj3guv1g8ku69j50la5v.png)

### After

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a5f3tplukh7tucr5blm.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a5f3tplukh7tucr5blm.png)

## 1. Using eel

The first method in our list is for developers who know HTML & CSS(if you don't then I highly recommend it too) with the basics of javascript.

### How does it work?

Basically, you are going to develop the frontend using HTML and CSS and write your computation or backend part in python. nd eel act as a bridge between python and javascript and pass data.

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2irr9ptvtvo4c1pslxv.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2irr9ptvtvo4c1pslxv.png)

### Installation

```
pip install Eel
```

### Directory Structure

```
└── Folder
    ├── templates
    |   ├── index.html
    |   ├── main.js
    |   └── style.css
    └── main.py

```

### cat main.py

```python
import eel

# name of folder where the html, css, js, image files are located
eel.init('templates')

@eel.expose
def demo(x):
    return x**2

# 1000 is width of window and 600 is the height
eel.start('index.html', size=(1000, 600))

```

### cat main.js

```jsx
function compute() {
	var data = document.getElementById("data").value
	eel.demo(data)(setValue) // call the demo function which we have created in the main.py file
}

function setValue(res) {
	document.getElementById("abc").src = res
}

```

### cat index.html

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>sample</title>
        <link href="style.css" rel="stylesheet">
        <script type="text/javascript" src="/eel.js"></script
        <script type="text/javascript" src="main.js"></script>
</head>
<body>
<!--
have to call compute() from here for example when user clicks any button or something like that.
-->
</body>
</html>

```

### Github Reference

```
<https://github.com/ChrisKnott/Eel>
```

## 2. Figma and Python

Alright, you must be thinking that what is the combination between Figma and python? and Figma is a UI development tool, not a library written in python... Yeah! I know you are right, but let's keep reading the post.

### Installation

```
pip install tkdesigner
```

### How it works

The only thing the user needs to do is design an interface with Figma, and then paste the Figma file URL and API token into Tkinter Designer. Tkinter Designer will automatically generate all the code and images required to create the GUI in Tkinter.

![https://user-images.githubusercontent.com/42001064/119832620-fb88c980-bf1b-11eb-8e9b-4affe7b92ba2.jpg](https://user-images.githubusercontent.com/42001064/119832620-fb88c980-bf1b-11eb-8e9b-4affe7b92ba2.jpg)

> For complete procedure do watch [this](https://www.youtube.com/watch?v=mFjE2-rbpm8&t=66s&ab_channel=Parthjadhav) video on youtube from Parth Jadhav

### Github Reference

```
https://github.com/ParthJadhav/Tkinter-Designer
```

## 3. Pywebview

pywebview is a lightweight cross-platform wrapper around a webview component that allows displaying HTML content in its own native GUI window. pywebview is created by [Roman Sirokov](https://github.com/r0x0r/).

### Installation

```
pip install pywebview
```

### Sample code

```
import webview

if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', 'index.html')
    webview.start(window)
```

### Github Reference

```
https://github.com/r0x0r/pywebview/
```

## 4. PyQT5

PyQt is a great library to develop modern flat GUI in python. You can create applications with coding in python which can be a little difficult and overwhelming but as we are covering the easiest way possible you can even make GUI with a drag-drop builder known as PyQt5Designer. It is a great way to build applications by generating a .ui file which is the drag-drop program and then later you can convert this .ui file to a .py file.

### Installation

```
pip install PyQt5Designer
```

## Steps

After installation designer will be installed in your system. Simply type `designer` in your command prompt and designer.exe will pop up. It will look something like this


![PyQT5Designer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s76hssmdz999arj3e72w.png)

Now here you can drag-drop elements in the canvas. After designing your application simply export it as a .ui file. Later you can convert this .ui file in .py file using,

```
pyuic5 -x [NAME_OF_UI_FILE].ui [NAME_OF_PY_FILE].py
```

## Conclusion

So you see, here are the 4 easy ways to make impressive-looking GUI in python. I hope you liked my blog and if this article adds any value then it would be great if you leave a like and make sure to bookmark it as well. Also, share the post with your friends so that they too can learn something new(don't be selfish...). Also, you can follow me on [Twitter](https://twitter.com/Yash_Makan) for more tech and python related content. Hope to be in your mind again, till then b-bye!

![Bye Bye](https://res.cloudinary.com/practicaldev/image/fetch/s--H3ignATo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media4.giphy.com/media/w89ak63KNl0nJl80ig/giphy.gif%3Fcid%3Decf05e478g5vv310sx1w5035xnuj17tgxbdtlcpcvas5fsoj%26rid%3Dgiphy.gif)

## Other Articles

- [4 Free hosting platforms for python web app with step-by-step process](https://dev.to/yash_makan/4-best-python-web-app-hosting-services-for-freewith-complete-process-57nb)
- [18 Python one-liners that will speed up your coding process.](https://dev.to/yash_makan/18-python-one-liners-that-will-speed-up-your-coding-process-21md)
- [AI bot that could answer your questions](https://dev.to/yash_makan/ai-bot-that-could-answer-any-questions-asked-gmn)
- [Generate your own favourite TV episode using python](https://dev.to/yash_makan/generate-your-own-favourite-tv-episode-using-python-1pb3)

## Socials

- [My Website](https://www.yashmakan.co.in/)
- [Twitter](https://twitter.com/Yash_Makan)
- [Banner](https://www.yashmakan.co.in/banner)