Study NiceGUI: The Final GUI Framework


With the fast development in Machine Studying and Deep Studying web site purposes, builders are on the fixed search for new Internet Frameworks that make constructing these web site purposes a lot simpler. The recognition of Information science purposes has gone up, thus an increase in new Frameworks. Builders create quite a few new frameworks that show useful in setting up these web site purposes. And one such Framework is NiceGUI. On this article we will probably be specializing in this Framework and methods to construct easy purposes with it.

Studying Aims

  • To grasp NiceGUI
  • Study to write down Fundamental Parts with NiceGUI
  • Perceive the working of Worth Bindings
  • Working with NiceGUI to show information in UI
  • To construct purposes with NiceGUI

This text was printed as part of the Information Science Blogathon.

What’s NiceGUI?

NiceGUI is a simple-to-use Python-based Internet-UI Framework, with the aim of creating growing Frontend purposes simple in Python. NiceGUI Framework’s UI parts are based mostly on Vue and Quasar. Good GUI comes with many ready-to-use parts. It even permits worth binding between totally different parts. NiceGUI permits simple show of a variety of plots. Its builders selected to construct it on prime of the Quick API Framework for its quick efficiency and user-friendly interface.

The styling in NiceGUI will get change with CSS, Tailwind, and Quasar. By default, it permits customizable styling. Use NiceGUI to construct from quick scripts to dashboards to full robotics tasks and even Machine Studying web site purposes.

Among the options embrace:

  • Preloaded with ready-to-use GUI parts like buttons, labels, checkboxes, sliders, switches, and so on
  • Emoji favicon, SVG and base64 help
  • Gives simple information binding
  • Constructed-in Timer for refreshing the info
  • In a position to render 3D scenes, plot graphs
  • Can simply show Photos and Movies
  • It makes it simple to customise the pages and layouts and has built-in help for Tailwind CSS

Putting in NiceGUI

Obtain NiceGUI like different regular Python packages with pip. The next Python’s pip command will NiceGUI and even installs the dependencies it depends on.

pip set up nicegui

Word that the NiceGUI even offers a Docker Picture to check its options with out downloading it to the machine. Let’s have a look at some instance code:

from nicegui import ui

ui.label('Welcome to NiceGUI!')
ui.button('Click on Right here', on_click=lambda: ui.notify('Button Pressed'))

To work with NiceGUI, we have to import the library nicegui. We are going to use three capabilities from nicegui right here

  • label(): Use this perform to show textual content on the UI
  • button(): This perform is for making a clickable button for the UI.
  • notify(): A popup on the backside will show no matter is written on this perform.

Let’s run the code and see the output beneath

Installing NiceGUI

The applying will be accessed from PORT 8080. We see {that a} button Click on Right here is current right here. Upon clicking that button, a popup displayed telling that the Button Pressed

Fundamental Parts of NiceGUI

On this part, we’ll look into a few of the primary parts which we’ll create with the NiceGUI framework.

Icons and Hyperlinks

Let’s begin with displaying Icons and Linking web sites to texts within the UI

from nicegui import ui

ui.label('Show Icon')
ui.icon('fingerprint', coloration="main").courses('text-5xl')
ui.hyperlink('NiceGUI on GitHub', '


Create the next capabilities from the above code:

  • The perform “icon()” permits us to show Icons on the UI. To show an Icon, we have to present an Icon title. This perform depends on Quasar’s QIcon. The colour choice will be specified utilizing CSS, Quasar, or Tailwind coloration. The scale choice is set by the courses() methodology, utilizing CSS items.
  • The perform “hyperlink()” permits us to assign hyperlinks to textual content within the UI. First, we specify the textual content that needs to be linked, adopted by the corresponding web site URL.

Operating the code will end result within the beneath output

 NiceGUI on GitHub

We see that the fingerprint icon is displayed on the display. Additionally clicking on the “NiceGUI on GitHub”, will redirect us to NiceGUI’s GitHub Web page.

Choice Parts

NiceGUI has totally different choice parts like Toggle Containers, Radio Alternatives, and Verify Containers. The beneath code incorporates all these parts imported from NiceGUI.

from nicegui import ui

ui.label('Toggle Field')
toggle = ui.toggle([1, 2, 3], worth=1)

ui.label('Radio Choice')
radio =["one","two","three"], worth=1).props('inline')

ui.label('Dropdown Choose')
choose = ui.choose(["red","blue","green"], worth=1)

ui.label('Verify Field')
checkbox = ui.checkbox('verify me')

The capabilities within the above code embrace:

  • toggle(): This perform can generate a toggle field, the place we cross the choices by an inventory of values of dictionaries containing a mapping of values to labels. When the person selects an choice, it’s saved within the toggle variable.
  • radio(): This works just like the toggle() perform however right here we get radio choices to pick out
  • choose(): This perform generates a dropdown to pick out a particular choice. The enter to this perform and the output worth saved is similar when in comparison with the above capabilities
  • checkbox(): When the person checks the checkbox, the checkbox variable is assigned a boolean True worth.
 NiceGUI | Output

Right here we see all the choice parts that we have now created. Click on on the Dropdown Choice, a dropdown motion takes place permitting us to pick out one of many choices. These are simply a few of the parts that we have now seemed into. NiceGUI presents a variety of parts to work with in numerous situations.

Person Inputs and Worth Bindings

On this part, we’ll have a look at the capabilities that can permit customers to enter textual content or numerical information within the UI.

from nicegui import ui

ui.enter(label="Textual content",
         on_change=lambda e: text_input.set_text('Your Enter: ' + e.worth))
text_input = ui.label()

ui.quantity(label="Quantity", worth=3.1415, format="%.2f",
          on_change=lambda e: number_input.set_text('Your Enter: ' + str(e.worth)))
number_input = ui.label()


The capabilities within the above code embrace:

  • enter(): This perform when used, will create an empty textual content field the place the person can kind the info. It has a variable known as “label“, which tells what kind of enter it’s anticipating from the person. Every time the person enters an enter within the Enter field, the .set_text() perform of ui.label() prompts and shows the typed textual content on the display.
  • quantity(): This perform works equally to the enter() perform, the one distinction is that this perform takes numbers as a substitute of textual content

The code when run, will produce the next output


Discover UI Elemts in NiceGUI

Within the pictures above, the person’s enter is displayed on the display when entered into the enter subject. NiceGUI permits binding values between totally different UI parts, permitting seamless integration. Let’s discover an instance.

from nicegui import ui

ui.label("Worth Bindings")

with ui.row():
    radio1 =[1, 2, 3], worth=1).props('inline')
    toggle = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'worth')

Within the code above, we have now two parts (radio and toggle) grouped horizontally utilizing the ui.row() aspect. To group them vertically, we are able to use ui.column(). The toggle() perform contains the variable bind_values(), which connects the radio choices to the toggle choices. For instance, deciding on 1 within the radio switches the toggle to A, and deciding on 2 switches it to B.


Within the above Photos, we are able to clearly have a look at the worth bindings between the 2 UI parts in motion. Equally, bind_value() perform is able to working in several UI parts supplied by the NiceGUI.

Information Parts and Graphs

On this part, we’ll see the Information Parts supplied by the NiceGUI. We are going to discover methods to show tables and charts on the UI utilizing NiceGUI. Firstly, we’ll begin with displaying tabular information by NiceGUI. The code for displaying this will probably be:

from nicegui import ui

columns = [
    {'name': 'Name', 'label': 'Name', 'field': 'Name', 'required': True, 'align': 'center'},
    {'name': 'Employee-ID', 'label': 'Employee-ID', 'field': 'Employee-ID'},
    {'name': 'experience', 'label': 'experience', 'field': 'experience'}
rows = [
    {'Name': 'Akash', 'Employee-ID':1230, 'experience': 5},
    {'Name': 'Karen', 'Employee-ID': 1245, 'experience': 10},
    {'Name': 'Thanish', 'Employee-ID': 1980, 'experience': 9},
    {'Name': 'Samuel', 'Employee-ID': 1120, 'experience': 8},

ui.desk(title="Worker Information",columns=columns, rows=rows, row_key='Identify')

To show a desk, specify the column names within the columns listing. Every column is represented by a dictionary inside the listing. Embody the title, label, and subject values for every column (usually the identical for all). Further key-value pairs will be supplied as wanted. For instance, the “required:True” key-value pair ensures that the Identify column requires a price for any new aspect added to the desk. The “align”:”heart” aligns your complete row beneath that column title within the heart alignment.

The following is the rows listing. The rows listing is the listing of dictionaries containing values for the above columns. Right here utilizing the sphere names, we offer the subject:worth pairs within the dictionary. Then with the ui.desk() perform, we show the desk to the UI. Right here we may give the title title for the desk. The row_key has the column title that incorporates distinctive values. Operating this code will give the next output


Pandas DataFrame with NiceGUI

We will even show the Pandas Dataframe with NiceGUI. With the desk() perform itself it’s doable to show the Pandas Information.

import pandas as pd
from nicegui import ui

information = pd.DataFrame(information={'Identify': ["Karan", "Shoaib"], 'Position': ["Developer", "Designer"]})
    columns=[{'name': column, 'label': column, 'field': column} for column in data.columns],

Now we’ll have a look at methods to show graphs on the display utilizing NiceGUI. With NiceGUI capabilities, we are able to show plots made by matplotlib on the display. For this, we work with the pyplot() perform within the NiceGUI, which shows matplotlib graphs on the UI. The code for this will probably be:

import matplotlib
import numpy
from nicegui import ui

with ui.pyplot(figsize=(3, 2)):
    x = numpy.linspace(0.0, 10000.0, 10)
    y = numpy.log(x)
    matplotlib.pyplot.title('Log Graph')
    matplotlib.pyplot.plot(x, y, '-')

Right here we use the with command adopted by the ui.pyplot() perform. We even cross the fig dimension to the perform. Now beneath the with, we write the code for plotting a graph by matplotlib. Right here we have now written a easy graph, the place the x-axis incorporates the values from 0 to 10000 with a stepsize of 10 and the y-axis incorporates the log values for them. The output when the code run will probably be:


You’ll be able to see the plot on the above display. With NiceGUI, we not solely can show matplotlib graphs, however we even can show graphs made by Plotly too, which creates interactive graphs.

UseCases and Purposes

NiceGUI just like different Internet Frameworks, will be useful throughout totally different growth situations, like:

  • Machine Studying UI: With its multitude of parts, NiceGUI emerges as top-of-the-line libraries for creating Frontend components for Machine Studying Purposes. The totally different choice parts supplied by NiceGUI will actually come in useful when coping with ML purposes that want many inputs from customers
  • Speedy Prototyping: Not writing HTML, CSS, or Javascript recordsdata and having the ability to code all the things from displaying textual content to choice packing containers to graphs totally in NiceGUI, reduces the big quantity of effort for growing fast prototypes. And the quantity of parts supplied by NiceGUI helps in creating full-fledged working prototypes.
  • Dashboard Purposes: NiceGUI permits builders to show totally different charts simply by its chart parts. One good factor to notice is that NiceGUI may even present 3D Scenes. It even comes with progress bars to showcase the loading of the info. It has totally different information parts to show several types of Python information varieties on the display.


Builders use NiceGUI, a Python Internet Framework, to create web site purposes. NiceGUI offers the required instruments to develop a full-fledged web site with all of the frontend components utterly in Python. We’ve even seen totally different parts of NiceGUI and methods to take person inputs. Lastly, we have now gone by bind values to be taught we are able to bind between totally different UI parts

Some key takeaways from this text embrace:

  • NiceGUI comes with totally different ready-to-use UI parts.
  • It offers customers to create multi-page web sites.
  • NiceGUI comes with information binding constructed into it.
  • Based mostly on FastAPI to serve the content material to the online.

The media proven on this article is just not owned by Analytics Vidhya and is used on the Writer’s discretion.

Related Articles


Please enter your comment!
Please enter your name here

Latest Articles