In this article, we will learn about NiceGUI, It is a Python-based UI Framework, which shows up in Web Browsers and we can create buttons, dialogs, Markdown, 3D scenes, plots, and much more. It works well for dashboards, robotics initiatives, smart house solutions, and other related use cases. Additionally, it can be applied in the creation process, such as when modifying or setting a machine learning method or adjusting motor controllers.

Users only need to take care of thePython code and it will handle the web development i.e GUI details. It is more lightweight than Streamlit and is not only available as a PyPI package but also in Docker. One of the best things about this is that whenever we modify our Python code it will automatically refresh and the changes will be reflected in our browser, no need to manually reload the browser or run the code every time.

Features of NiceGUI

• Browser-based interaction with a graphical user
• Standard GUI components like label, icon, checkbox, switch, scale, input, file upload, etc., implicitly refresh when the code is changed.
• A straightforward organization using rows, columns, cards, and dialogue boxes
• General-purpose Markdown and HTML components
• Powerful high-level components to create 3D landscapes, draw graphs and charts, and receive steering inputs from simulated joysticks
• Engage with tables, comment, and overlay pictures, and traverse foldable tree structures
• Built-in schedule to periodically update the info (even every 10 ms)
• Simple data coupling to create even less code
• Modern user contact is provided by notifications, dialogs, and menus on both public and private online sites.
• Adding custom paths and data replies
• Recording keystrokes for use in universal shortcuts, etc.
• Define main, secondary, and accent colors to create a unique appearance

Required module

To install NiceGUI write the below command in any terminal.

python3 -m pip install nicegui

Simple GUI Program using NiceGUI 

Now we will display a simple hello message using NiceGUI. These messages are known aslabels and the method we will use to add any text is also called alabel.

# Importing the modulefromniceguiimportui# passing the text we will showui.label('Hello Geeks from NiceGUI!')# running itui.run()

To run this code simply save it and execute it normally like any other Python code. either using the run button or writing the below command in terminal.

python <filename>.py

This run opens up users' default browser in localhost and every time we make any change to our code just save it and the page will reload automatically, no need to explicitly reload it.

Output:

We can display some text also using theset_text() method of the label. Even if we have something written inside a normal label, only the text passed inset_text will be shown, and the other one will be replaced.

fromniceguiimportui# set_text will replace the text# passed in labelui.label('Hello Geeks from NiceGUI!').set_text("This text is passed in set_text")ui.run()

Output:

Setting visibility of the text

We can explicitly set the visibility of the text using theset_visibility() method, which takes one parameter eitherTrue orFalse.

fromniceguiimportuiui.label().set_text(text="This text is passed in set_text")ui.label("Text visible or not").set_visibility(False)ui.run()

Output:

Adding Icons

Now we will see how we can add icons using NiceGUI using theicon() method.

fromniceguiimportuiui.label().set_text(text="This text is passed in set_text.")ui.icon("lock")ui.run()

Output:

Changing the color and the size of the Icon

fromniceguiimportuiui.label().set_text(text="This text is passed in set_text.")ui.icon("lock",color="green",size="50px")ui.run()

Output:

Users can use any icons available on the Google Fonts website and go to the Icon section. Just pass the name of the font as a parameter and add styling if necessary.

Set the Visibility of the Icon using set_visibility() Method

Visibility is set to False.

fromniceguiimportuiui.label().set_text(text="This text is passed in set_text.")# visibility is set to Falseui.icon("lock",color="green",size="50px").set_visibility(False)ui.run()

Output:

Visibility is set to True 

fromniceguiimportuiui.label().set_text(text="This text is passed in set_text.")# visibility is set to Trueui.icon("lock",color="green",size="50px").set_visibility(True)ui.run()

Output:

Adding UI Elements

In this example, we are trying to learn how we can insert a toggle, slider, and number container in our GUI web page using NiceGUI using Python.

fromniceguiimportuiclassDemo:def__init__(self):self.number=1demo=Demo()# creating sliderui.slider(min=1,max=5).bind_value(demo,'number')# creating numberui.number().bind_value(demo,'number')# creating toggle buttonsui.toggle({1:'A',2:'B',3:'C',4:'D',5:'E'}).bind_value(demo,'number')ui.run()

Output:

Adding Avatars

We can also add Avatars of our choice, it can be any icon (available Material Icons website) or any downloaded image or URL of an image.

fromniceguiimportui# The name of these icons is available in Google Fonts or# Material Icons website. Only those names will be recognizedui.avatar('adb')ui.run()

Output:

By default, we can see that the avatar color is black and the background is blue and the structure is a circle. We can change all of them according to our needs.

Changing color, background color, size, structure, and shape of the Avatar

fromniceguiimportuiui.avatar('adb',text_color='green',square=True,color='yellow',size="50px")ui.run()

Output:

Adding Hyperlink

Now we will see how can we add hyperlinks using NiceGUI. For that, we will use thelink() method, which takes two parameters. First, the text will be shown and the second is the link to which the link will redirect after clicking it.

fromniceguiimportuiui.link("The best Computer Science Portal","https://www.geeksforgeeks.org/")ui.run()

Output: