NiceGUI

And let any browser be the frontend of your Python code.

Installation

Get started

Create main.py

circlecirclecircle

main.py

from nicegui import ui

ui.label('Hello NiceGUI!')

ui.run()

Install and launch

circlecirclecircle

bash

pip3 install nicegui
python3 main.py

Enjoy!

circlecirclecircle

NiceGUI

Hello NiceGUI!

...or use Docker to run your main.py

keyboard_arrow_down

Features

Code nicely

swap_horiz

Interaction

buttons, switches, sliders, inputs, ...
notifications, dialogs and menus
interactive images with SVG overlays
web pages and native window apps

space_dashboard

navigation bars, tabs, panels, ...
grouping with rows, columns, grids and cards
HTML and Markdown elements
flex layout by default

insights

Visualization

charts, diagrams and tables
3D scenes
straight-forward data binding
built-in timer for data refresh

brush

Styling

customizable color themes
custom CSS and classes
modern look with material design
Tailwind CSS auto-completion

source

Coding

routing for multiple pages
auto-reload on code change
persistent user sessions
Jupyter notebook compatibility

anchor

Python 3.7+

Demos

Try this

Styling

link

While having reasonable defaults, you can still modify the look of your app with CSS as well as Tailwind and Quasar classes.

circlecirclecircle

main.py

from nicegui import ui

ui.icon('thumb_up')
ui.markdown('This is **Markdown**.')
ui.html('This is <strong>HTML</strong>.')
with ui.row():
    ui.label('CSS').style('color: #888; font-weight: bold')
    ui.label('Tailwind').classes('font-serif')
    ui.label('Quasar').classes('q-ml-xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')

ui.run()

content_copy

circlecirclecircle

NiceGUI

Common UI Elements

link

NiceGUI comes with a collection of commonly used UI elements.

circlecirclecircle

main.py

from nicegui import ui
from nicegui.events import ValueChangeEventArguments

def show(event: ValueChangeEventArguments):
    name = type(event.sender).__name__
    ui.notify(f'{name}: {event.value}')

ui.button('Button', on_click=lambda: ui.notify('Click'))
with ui.row():
    ui.checkbox('Checkbox', on_change=show)
    ui.switch('Switch', on_change=show)
ui.radio(['A', 'B', 'C'], value='A', on_change=show).props('inline')
with ui.row():
    ui.input('Text input', on_change=show)
    ui.select(['One', 'Two'], value='One', on_change=show)
ui.link('And many more...', '/documentation').classes('mt-8')

ui.run()

content_copy

circlecirclecircle

NiceGUI

Value Binding

link

Binding values between UI elements and data models is built into NiceGUI.

circlecirclecircle

main.py

from nicegui import ui

class Demo:
    def __init__(self):
        self.number = 1

demo = Demo()
v = ui.checkbox('visible', value=True)
with ui.column().bind_visibility_from(v, 'value'):
    ui.slider(min=1, max=3).bind_value(demo, 'number')
    ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
    ui.number().bind_value(demo, 'number')

ui.run()

content_copy

circlecirclecircle

NiceGUI

Browse through plenty of live demos.

Fun-Fact: This whole website is also coded with NiceGUI.

Documentation

In-depth examples

Pick your solution

Slideshow

implements a keyboard-controlled image slideshow

Authentication shows how to use sessions to build a login screen

Modularization provides an example of how to modularize your application into multiple files and reuse code

FastAPI illustrates the integration of NiceGUI with an existing FastAPI application

Map

demonstrates wrapping the JavaScript library leaflet to display a map at specific locations

AI Interface

utilizes the replicate library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion

3D Scene

creates a webGL view and loads an STL mesh illuminated with a spotlight

Custom Vue Component shows how to write and integrate a custom Vue component

Image Mask Overlay shows how to overlay an image with a mask

Infinite Scroll presents an infinitely scrolling image gallery

OpenCV Webcam uses OpenCV to capture images from a webcam

SVG Clock displays an analog clock by updating an SVG with ui.timer

Progress demonstrates a progress bar for heavy computations

NGINX Subpath shows the setup to serve an app behind a reverse proxy subpath

Script Executor executes scripts on selection and displays the output

Local File Picker demonstrates a dialog for selecting files locally on the server

Search as you type using public API of thecocktaildb.com to search for cocktails

Menu and Tabs uses Quasar to create foldable menu and tabs inside a header bar

Todo list shows a simple todo list with checkboxes and text input

Trello Cards shows Trello-like cards that can be dragged and dropped into columns

Slots shows how to use scoped slots to customize Quasar elements

Table and slots shows how to use component slots in a table

Single Page App navigate without reloading the page

Chat App a simple chat app

Chat with AI a simple chat app with AI

SQLite Database CRUD operations on a SQLite database with async-support through Tortoise ORM

Pandas DataFrame

displays an editable pandas DataFrame

Lightbox

A thumbnail gallery where each image can be clicked to enlarge

ROS2 Using NiceGUI as web interface for a ROS2 robot

Why?

We at Zauberzeug like Streamlit but find it does too much magic when it comes to state handling. In search for an alternative nice library to write simple graphical user interfaces in Python we discovered JustPy. Although we liked the approach, it is too "low-level HTML" for our daily usage. But it inspired us to use Vue and Quasar for the frontend.

We have built on top of FastAPI, which itself is based on the ASGI framework Starlette and the ASGI webserver Uvicorn because of their great performance and ease of use.