NiceGUI

Meet the .

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

Interact with Python through buttons, dialogs, 3D scenes, plots and much more.

NiceGUI manages web development details, letting you focus on Python code for diverse applications, including robotics, IoT solutions, smart home automation, and machine learning. Designed to work smoothly with connected peripherals like webcams and GPIO pins in IoT setups, NiceGUI streamlines the management of all your code in one place.

With a gentle learning curve, NiceGUI is user-friendly for beginners and offers advanced customization for experienced users, ensuring simplicity for basic tasks and feasibility for complex projects.

Available as PyPI package, Docker image and on GitHub.

Text

Check

Switch

Try it out!

Number

One

arrow_drop_down

A

B

C

Installation

Get started

1.

Create main.py

circlecirclecircle

main.py

from nicegui import ui

ui.label('Hello NiceGUI!')

ui.run()

2.

Install and launch

circlecirclecircle

bash

pip3 install nicegui
python3 main.py

3.

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

Layout

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

insights

Visualization

• charts, diagrams, tables, audio/video
• 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
• super nice testing framework

anchor

Foundation

• generic Vue to Python bridge
• dynamic GUI through Quasar
• content is served with FastAPI
• Python 3.8+

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.