nicegui

Renders web UIs directly from Python code using context manager syntax (with statements) that map to Vue 3 components. The framework translates Python object hierarchies into DOM trees, handles FastAPI HTTP serving and Socket.IO WebSocket transport, and automatically syncs state changes from Python to the browser without manual serialization. Uses Quasar material-design components as the underlying UI library with optional Tailwind CSS styling.

Implements automatic two-way synchronization between Python objects and browser UI elements via Socket.IO WebSocket transport. Changes to Python variables trigger DOM updates; user input in the browser triggers Python event handlers. Supports observable collections (lists, dicts) that notify listeners when items are added/removed, enabling reactive UI patterns without manual refresh calls. Uses an event-listener registry (event_listener.py) to manage subscriptions and an outbox system (outbox.py) to batch and transmit updates.

Serves static files (CSS, JavaScript, images) from the server filesystem via FastAPI. Supports custom CSS injection into the page template (index.html) and JavaScript execution in the browser context. Allows Tailwind CSS configuration and custom Quasar theme overrides. Assets are cached by the browser with appropriate HTTP headers.

Provides Air (air.py), a protocol for exposing NiceGUI applications to the internet without manual port forwarding or firewall configuration. Uses a relay server to tunnel WebSocket and HTTP traffic, enabling secure remote access. Supports automatic HTTPS and custom domain binding. Useful for accessing applications from mobile devices or sharing with remote users.

Packages NiceGUI applications as standalone desktop executables using Electron, allowing distribution as .exe, .dmg, or .deb files. The Python backend runs as a subprocess, and Electron embeds a Chromium browser window. Supports system tray integration, native file dialogs, and OS-level notifications. Enables offline-first applications with local data storage.

Provides official Docker images with Python, NiceGUI, and all dependencies pre-installed. Developers can containerize applications with minimal Dockerfile configuration. Supports multi-stage builds for optimized image size. Images are available on Docker Hub and can be extended with custom dependencies.

Provides layout elements (rows, columns, cards, dialogs) that use CSS Flexbox and CSS Grid under the hood. Supports responsive breakpoints (mobile, tablet, desktop) via Tailwind CSS media queries. Layouts automatically adapt to screen size without manual media query code. Uses Quasar's row/column components for semantic HTML structure.

Captures browser events (clicks, input changes, form submissions) and routes them to Python async functions via Socket.IO message handlers. Supports event filtering, debouncing, and throttling at the framework level. Uses a timer system (background_tasks.py) for delayed execution and background task scheduling. Event handlers can access the triggering element's state and modify UI in response, with automatic re-rendering via the Vue component layer.

Implements a page system (page.py) where each URL route maps to a Python function that constructs UI elements. Pages are registered via decorators (@ui.page('/path')) and rendered on-demand when users navigate. Supports dynamic route parameters (e.g., /user/{user_id}), query strings, and page-specific state isolation. Uses FastAPI routing under the hood with Socket.IO for real-time updates within each page context.

Embeds 3D graphics via Babylon.js library, allowing creation of 3D scenes, meshes, cameras, and lighting through Python API. Supports interactive 3D objects with mouse/touch controls, real-time updates from Python, and scene serialization. Useful for robotics visualization, CAD-like tools, and scientific simulations. Renders within the browser canvas with WebGL acceleration.

Integrates Leaflet.js for interactive maps with support for markers, layers, tile providers, and geospatial data visualization. Maps are embedded as NiceGUI elements and can be updated in real-time from Python. Supports custom tile layers, GeoJSON rendering, and click/hover interactions. Uses Socket.IO to synchronize map state (zoom, pan, selected features) with Python backend.

Embeds interactive plots and charts using Plotly and Matplotlib libraries. Plots are rendered as HTML/SVG within the browser and can be updated reactively from Python. Supports line charts, scatter plots, heatmaps, 3D surfaces, and custom Plotly figures. Updates trigger re-rendering via Socket.IO without full page reload.

Provides input elements (text fields, dropdowns, checkboxes, date pickers, sliders) that automatically bind to Python variables and coerce types. Supports client-side validation rules (required, min/max, regex patterns) and server-side validation via Python functions. Input changes trigger event handlers with automatic type conversion. Uses Quasar form components under the hood with Vue 3 reactivity.

Handles file uploads from the browser to the server via multipart form submission over HTTP. Uploaded files are stored on the server filesystem or in-memory, with Python access to file content and metadata. Supports file type filtering, size limits, and progress tracking. Download capability allows serving files from Python to the browser with custom MIME types and filenames.

Leverages FastAPI's middleware and dependency injection system to implement authentication, authorization, and request/response filtering. Supports JWT tokens, session cookies, and custom authentication schemes. Middleware can access and modify requests before they reach NiceGUI handlers. Uses FastAPI's Depends() for route-level access control and state injection.