An Intro to NiceGUI: A Modern Python Framework for Building Web UIs

NiceGUI is a new and easy-to-use tool for making web interfaces using Python.

It was created by a company called Zauberzeug to make it simpler for developers to build web UIs without having to worry about the complex details of web development.

In this article, we will introduce NiceGUI, explain its features, and discuss what it can be used for.

What is NiceGUI?

NiceGUI is a tool for Python developers to make web interfaces easily.

It uses popular web development libraries like Svelte and WebSocket to provide a smooth and quick user experience.

The best thing about NiceGUI is that it's simple and easy to use.

With NiceGUI, developers can create complicated web interfaces using only Python, without needing to write HTML, CSS, or JavaScript code.

Key Features of NiceGUI

NiceGUI has several useful features:

• Easy to use: NiceGUI is designed to be simple and straightforward, so developers can create web interfaces with just a few lines of Python code. This makes it a great choice for both beginners and experienced developers.
• Real-time interactivity: NiceGUI supports real-time interactivity, which means that any changes made to the interface are immediately shown in the web browser. This makes it perfect for creating dynamic web applications.
• Customizable: Despite being simple to use, NiceGUI still allows for customization. Developers can use standard CSS to change the appearance and feel of their interfaces.
• Integration: NiceGUI can be used with other Python tools and frameworks, such as NumPy, Pandas, and Flask. This allows developers to take advantage of these tools when creating web applications.
• Easy deployment: NiceGUI provides a simple command-line interface for deploying applications. With just one command, developers can deploy their applications to a local server or a cloud-based platform.

Potential Applications of NiceGUI

NiceGUI's easy-to-use and interactive features, along with its ability to work with other tools, make it useful for many different types of projects.

Here are some examples:

• Data Visualization: NiceGUI can be used with data analysis libraries like Pandas and Matplotlib to create interactive visualizations of data.
• Control Systems: NiceGUI's real-time interactivity makes it a good choice for building control systems, such as those used in robotics or Internet of Things (IoT) devices.
• Educational Tools: NiceGUI's simplicity makes it a great tool for teaching programming concepts, as it allows students to focus on understanding the logic rather than getting bogged down in syntax.

Code Examples

Before we go through the examples, first we need to install NiceGUI:

pip install nicegui

Here's a simple example of how to create a UI with a button and a label using NiceGUI.

from nicegui import ui


def button_clicked():
    ui.label('Button was clicked!')


ui.button('Click me!', on_click=button_clicked)
ui.run()

• In this example, we start by importing the ui object from NiceGUI.
• Next, we create a function called button_clicked that will be triggered when the button is clicked.
• This function creates a new label that displays the text "Button was clicked!".
• Lastly, we create a button with the text "Click me!" and tell NiceGUI to call the button_clicked function when the button is clicked by a user.

You can run NiceGUI applications as normal:

python main.py

Running the example:

Creating an Interactive UI

Here's an example of how to create an interactive UI with a slider and a label that displays the slider's value.

from nicegui import ui


def slider_changed(event):
    ui.label(f'Slider value: {event.value}')


ui.slider(min=0, max=100, on_change=slider_changed)
ui.run()

• In this example, we start by importing the ui object from NiceGUI.
• Then, we make a slider that can be moved between 0 and 100.
• Whenever the slider's position is changed, a function called slider_changed is automatically run passing the slider change event.
• This function then creates a new label that shows the current value of the slider on the screen, retrieved from the event.

Running the example:

Integration with Other Libraries

Here's an example of how to use NiceGUI with the NumPy library to create an interactive plot.

import numpy as np
from nicegui import ui

# Initialize the plot using a dictionary approach
fig = {
    'data': [{
        'x': [],
        'y': [],
        'type': 'scatter',
        'mode': 'lines'
    }],
    'layout': {
        'xaxis': {'title': 'Time'},
        'yaxis': {'title': 'Amplitude'},
        'margin': {'l': 40, 'r': 40, 't': 40, 'b': 40}
    }
}


def plot_changed(event):
    time = np.linspace(0, 1, 1000)
    data = np.sin(2 * np.pi * event.value * time)
    # Update the plot data directly
    plot.figure['data'] = [{
        'x': time,
        'y': data,
        'type': 'scatter',
        'mode': 'lines'
    }]
    plot.update()  # Explicitly call update to send the new plot to the browser


ui.slider(min=0, max=10, value=1, on_change=plot_changed)
plot = ui.plotly(fig)

ui.run()

• First, we import the necessary libraries, np from numpy, and the ui object from NiceGUI.
• We create a dictionary called fig that contains the initial data and layout for the plot. The plot will have one line that is initially empty. The layout specifies the titles for the x and y axes and sets the margins.
• We define a function called plot_changed that will be called whenever the value of a slider changes. This function generates a new set of data based on the current value of the slider using numpy. It then updates the plot data directly with the new data and calls the update function to send the new plot to the browser.
• After defining the function, we create a slider using NiceGUI and assign the plot_changed function to its on_change event. This means that whenever the slider value changes, the plot_changed function will be called.
• Finally, we create the plot using the plotly function from NiceGUI and passing the fig dictionary. We then call the run function to start the NiceGUI loop.
• When the user interacts with the slider, the plot_changed function is called, generating new data and updating the plot in real-time.

For this example, you also need to install numpy and the NiceGUI's plotly support:

pip install numpy nicegui[plotly]

Running the example:

Building a Calculator

This calculator example has two spaces where you can enter numbers, a dropdown menu to choose an operation (add, subtract, multiply, or divide), and a button to perform the calculation. When you click the button, the result of the calculation will appear in a label on the screen.