NiceGUI: How to create stunning web interfaces in Python with minimal code

Hello World!

If you are looking for an easy way to create a web-based user interface (UI) with Python, you might want to check out nicegui.

Nicegui is a Python package that lets you create buttons, dialogs, markdown, 3D scenes, plots and much more with just a few lines of code. It is great for micro web apps, dashboards, robotics projects, smart home solutions and similar use cases. You can also use it in development, for example when tweaking/configuring a machine learning algorithm or tuning motor controllers.

Right now I’m using it to create a music discovery webapp:

In this post, I will show you how to install nicegui and how to use some of its features to create a simple UI for displaying some data.

Installation

To install nicegui, you need Python 3.6 or higher. You can use pip to install it from PyPI:

pip install nicegui
# For this tutorial you'll need also plotly and pandas
pip install plotly
pip install pandas

If you want to take a look at the extensive documentation, you can check it out here:

We won’t go into much detail in this post, but on that page you’ll find all the information you need to develop your GUIs.

Usage

To use nicegui, you need to write your UI code in a file called main.py. You can import the ui module from nicegui and use its methods to create various UI elements. For example, here is how you can create a label and a button:

from nicegui import ui

ui.label(‘Hello NiceGUI!’)  
ui.button(‘BUTTON’, on_click=lambda: ui.notify(‘button was pressed’))  

To run your UI code, you can simply execute main.py with Python:

python3 main.py

This will launch a web server on http://localhost:8080/ where you can access your UI in your browser. Note that nicegui will automatically reload the page when you modify your code.

Example

Let’s see how we can use some of the features of nicegui to create a simple UI for displaying some data. We will use pandas to read some data from a CSV file and plotly express to create some charts. You can find the example CSV on my Github (or you can use any csv you have on your machine)

First, we import the modules we need:

import pandas as pd  # We use this to create the dataframe
import plotly.express as px # We need this for plotting the data

from nicegui import ui

Next, we read the data from the CSV file into a pandas dataframe:

df = pd.read_csv(‘data.csv’) # Change this to the path of your csv if needed

Then we create some charts using plotly express:

fig1 = px.bar(df, x=’name’, y=’value’)  
fig2 = px.pie(df, names=’name’, values=’value’)  

Finally, we display the charts using nicegui’s plot method:

ui.plot(fig1)  
ui.plot(fig2)  

That’s it! We have created a simple UI for displaying some data with just a few lines of code.

We can change the structure of the page by editing the code and adding a few labels:

import pandas as pd  
import plotly.express as px

from nicegui import ui

df = pd.read_csv('.\data.csv')
fig1 = px.bar(df, x='name', y='value')  
fig2 = px.pie(df, names='name', values='value')  

ui.markdown('## My first nicegui app')

ui.markdown('### Bar chart')
ui.plotly(fig1)

ui.markdown('### Pie chart')
ui.plotly(fig2)

This code will create a page with a title and 2 sections showing our charts.

NiceGUI is also incredibly useful to create dynamic GUIs with user interaction. Let’s add a button to our code as an example.

ui.markdown('### Button')
change_label = ui.label('Click the button to say hello')
ui.button('Click me', on_click=lambda: print_hello(change_label))

In this snippet we have created a button object that runs the print_hello function when clicked, using the label we have created on the second line of the code.

We also need to create the print_hello function. This is a very easy function that receives one parameter in input and sets its text to “Hello!”:

def print_hello(in_label):
    in_label.set_text('Hello!')

And this is the final result:

Conclusion

In this post, I have shown you how to create a web-based UI with Python using nicegui. NiceGUI is an easy-to-use package that lets you create various UI elements with minimal code. It is great for prototyping and experimenting with different ideas quickly and easily.

If you want to learn more about nicegui and its features, you can check out its documentation at https://nice.gui.io/documentation/ where you will find plenty of live examples. You can also browse its GitHub repository at https://github.com/zauberzeug/nice.gui where you will find more information on how to contribute or report issues.

As usual you can find the code on my Github here:

Donations and stuff

If you’d like to support me consider subscribing to Medium using my referral:

If you don’t want to activate a subscription plan, but you’d still like to support me consider buying my music from Bandcamp:

https://inzaniak.bandcamp.com

Other URLs:

Personal Website: https://inzaniak.github.io Social Links: https://inzaniak.github.io/links.html Linkedin: https://www.linkedin.com/in/umberto-grando-a8527b150/

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us on Twitter(X), LinkedIn, YouTube, and Discord.