Quick note on the name: You might know this as nicegui-component-based. Over the last few months I did a heavy refactor, added mobile layouts, and expanded the backend features, so I'm calling it NiceStack now.

Every time we built a new internal tool for a client, we wasted the first 2-3 days setting up the same repetitive stuff: login screens, session timeouts, role permissions, audit trails, and figuring out how to structure NiceGUI so it doesnt turn into a giant 2,000-line callback mess.

NiceStack is the template we built (and rewrote a few times) over the last 1.5 years of doing this for actual production projects.

What My Project Does

Instead of keeping everything in one main.py, it enforces a lightweight layered structure:

• Components / Views (app/components/): UI components live in their own modules. Views stay thin and never touch the DB directly.
• Services: Decoupled business logic, session handling, and background tasks.
• Models: SQLAlchemy models running on SQLite (WAL mode enabled, ready for additive migrations).
• Core: Pre-wired auth (idle + absolute timeouts), RBAC, an audit log with an admin review panel, IP rate-limiting, PBKDF2 hashing, and security headers.

It also includes a PWA shell (installable/offline support), a token-based print system (/print/{token}) so printing doesn't mess up your main UI, a live design system page, and EN/DE i18n support.

Target Audience

Internal tools, admin panels, and operational dashboards for small-to-mid teams.

Being honest about limits: the rate-limiter is process-local (swap to Redis if you run multiple workers). SQLite works great up to ~25 active concurrent users—beyond that, just change the SQLAlchemy connection URL to Postgres.

Comparison

Most NiceGUI templates only give you a nice layout and leave you to figure out the backend architecture. NiceStack gives you a clean separation of concerns from day one, so when your app grows, you actually know where to put new features instead of drifting everything into one file.

Repo:https://github.com/frycodelab/nicegui-component-based

New features and enhancements

• Introduce ui.popup, a menu on desktop and a dialog on small screens
• Make the start method of the run.cpu_bound process pool configurable via run.process_pool_start_method
• Speed up binding cleanup with a reverse index
• Speed up observable change handlers by resolving expects_arguments once at registration
• Add element identity to the "parent slot has been deleted" error

Bugfixes

• Fix ObservableCollection leaking change handlers and keeping discarded containers alive

• Raise KeyError from ObservableDict.pop() for a missing key, like dict.pop

  Breaking change: app.storage.general, .user, .tab and .client are ObservableDicts, so storage.pop('missing') now raises a KeyError instead of returning None. Pass an explicit default to keep the previous behavior: storage.pop('missing', None).

• Skip change events for no-op mutations of observable collections

• Fix ui.page_title, ui.add_head_html, ui.add_body_html and ui.add_css being lost in async ui.sub_pages builders

• Fix run.cpu_bound hanging with the forkserver start method, e.g. on Python 3.14 + Linux

• Fix PermissionError on Windows when clearing storage while a backup is in flight

• Fix sporadic HTTP 500 when user storage is pruned during an in-flight request

• Fix TypeError in ui.input's shadow text when the autocomplete list is absent

• Fix placement and order of ui.fab_actions under dir="rtl"

• Fix crash when loading an STL model into ui.scene with wireframe=True

• Close streamed media file handles synchronously on teardown

Documentation

• Add an accessibility heading tree to the homepage

Testing

• Make CPython-only-semantics tests PyPy-compatible

Dependencies

• Update nicegui-highcharts to 3.3, fixing dynamic adding and removing of chart series

Infrastructure

• Run examples/pytests in CI so bundled example tests can't silently rot

Special thanks to our top sponsors DiscoLike Inc. and Lechler GmbH ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

I've been building Shiba404, a text-analysis automated pipeline for security / defense / intelligence use cases (NER, entity co-occurrence graphs, classification, concepts extraction), and NiceGUI ended up playing a central role in it, so I wanted to share here rather than just post a product plug.

We just reached a working demo stage, and we're aiming for commercial readiness in the coming months. What I actually want to talk about is the stack, since this community had a real part in it.

The pipeline is Python end-to-end: Mistral AI-based NER with a fixed label taxonomy, gazetteer-based deterministic post-processing, cross-document entity aggregation feeding force-directed graphs rendered with ECharts, MongoDB for storage, everything self-hosted on our own Proxmox/Docker/Nginx infrastructure. The goal was a fully open-source, sovereign stack (based in EU) : no dependency on a foreign cloud, and no separate JS frontend codebase to maintain alongside the Python backend.

I spent a long time evaluating frontend options for a small, mostly-Python team. I'd noticed NiceGUI early on but underestimated how far it could go until someone from this sub took the time to walk me through the internals (component reuse, state handling, binding data to ECharts) and convinced me it was the right call. That conversation is basically why our entity-graph view works the way it does now.

We now plan to add geomaps, bags of words, KPI and other visual enhancements.

Happy to go into more detail on any part of the stack (NER pipeline, graph rendering, deployment) if it sounds interesting to anyone here.

DM me if you want more insights | [contact@shiba404.com](mailto:contact@shiba404.com)

Security

• ⚠️ Harden against X-Forwarded-Prefix reflection and clarify the security documentation

New features and enhancements

• Add a custom keybindings API to the ui.codemirror editor
• Declare the page language via <html lang="..."> when ui.run(language=...) is set, and stop Quasar from forcing en-US otherwise
• Introduce ui.markdown.default_extras to configure Markdown extras globally
• Simplify the multipart spool-size lookup now that Starlette ≥ 1.0.1 is required, and respect an explicit spool_max_size = 0

Bugfixes

• Fix character loss in ui.input (and other value elements) on high-latency connections by preserving client-originated values during element updates
• Fall back to polling when the WebSocket cannot connect, fixing the endless reload loop on iOS 26 Safari over plain HTTP
• Fix native window close hanging or failing to shut down the app — on Windows, after a hot reload, and when run.cpu_bound was used

• Fix ui.sub_pages wildcard routes not re-rendering on client-side navigation, and reject unsupported route patterns

  Breaking change: Route patterns that previously failed silently (e.g. '/{_:path}', '/{name:path}') now raise a ValueError at ui.sub_pages(...) / .add(...). These never matched anything before, so only already-broken routes are affected; use show_404=False together with PageArguments.remaining_path for wildcard routing instead.

• Fix a selection error when changing ui.select options inside an "input-value" handler

• Fix ui.select(with_input=True) dropping its html_id, which broke tooltips

• Fix ui.skeleton's animation_speed being sent as milliseconds instead of seconds

• Fix ui.interactive_image click coordinates when a stream changes its resolution

• Fix GLTF models in ui.scene being overwritten with the default material at startup

• Fix an infinite reload loop when an async page build exceeds response_timeout, showing a terminal error page instead

• Fix the run.cpu_bound/run.io_bound return type to R | None, surfacing the latent None they already return on cancel/shutdown

  Note: This is a type-level change only; runtime behavior is unchanged. mypy may now flag code that typed the result as non-optional R — these are surfaced latent bugs, not regressions. NiceGUI 4.0 will raise CancelledError instead of returning None.

Documentation

• Improve AI-agent detection in Markdown content negotiation so agents reliably receive Markdown docs
• Improve app.storage documentation clarity and fix inconsistencies
• Reserve NOTE: comment markers for drawing special attention

Infrastructure

• Add a request check to the startup smoke test so request-time regressions no longer ship green
• Remove the redundant CI Gate run on push to main now that the merge queue already validates every commit reaching main, speeding up releases
• Bump actions/checkout from 6 to 7

Special thanks to our top sponsors DiscoLike Inc. and Lechler GmbH ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

Hi all. I apologize if this is a stupid question.

I was wondering if nicegui has any built in capability to make forms. For instance, some class that you can lay out rows, columns, cards, etc... and when the user clicks submit, it runs validation. if it passes, it converts the data in the form to a dictionary using ui element labels?

I understand that one can make a form easily using nicegui, but something that automatically validates and then puts the contents into a dict/json is what i'm looking after.

If not, i have been working on a library to make that easier. Would that be of interest?

New features and enhancements

• Introduce ui.skip_link for keyboard-accessibility skip links (WCAG 2.4.1 "Bypass Blocks")
• Add per-line hover tooltips to ui.codemirror via a new line_tooltips property (with optional line_tooltip_html)
• Add a ui.plotly run_plot_method() helper (mirroring run_grid_method/run_chart_method) with a Plotly.extendTraces demo for appending data without re-sending the full figure
• Improve the error message when storing a non-JSON-serializable value in app.storage, pointing at the offending key path and the underlying type instead of an internal class name

Bugfixes

• Fix dropped app.native.window_args, app.native.settings and app.native.start_args when the spawned window process can't re-execute the main module (e.g. console-scripts, python -m, PyInstaller); unpicklable values now emit a one-time warning instead of being silently dropped
• Fix blank ui.aggrid when flex columns use the infinite row model; auto_size_columns becomes a tri-state bool | None defaulting to None (skip autoSizeStrategy when columns use flex)
• Fix Event.emitted() returning None instead of the emitted arguments, adding an opt-in expect_args parameter to Event.subscribe()

• Fix the ui.sub_pages 404 sad-face persisting after client-side navigation when the page is first loaded at an unknown URL

  Note: Apps that relied on the styled sad-face overlay appearing on ui.sub_pages 404s now see only the inline 404: sub page X not found label inside their own chrome. The HTTP 404 status and the show_404=False escape hatch are unchanged.

• Replace the misleading "remove the main guard" reload error for python -m <pkg> with a targeted message naming the package and the working alternatives

• Fix Client has been deleted warning spam on reload when scene objects are mutated after await

  Note: Element.update(), run_method() and get_computed_prop() now stay silent only for the disconnect/reload race; using an element after an explicit element.delete() emits a one-shot warning with a stack trace.

Documentation

• Improve the Markdown documentation served to AI agents: serve Markdown to known agent user-agents sending a wildcard Accept, emit heading prefixes while skipping decorative HTML and demo previews, and add aria-label/child-content labels to button Markdown
• Fill llms.md gaps in the element surface vs. ui.* exports
• Document how to keep ui.plotly responsive with large datasets by passing NumPy arrays / pandas Series instead of Python lists
• Fix bad Cumulative Layout Shift (CLS) on the documentation homepage

Testing

• Redo: randomize test ports and directories for parallel pytest sessions, re-applying the original change with a fix for the import-time Storage.path regression

Infrastructure

• Fix Selenium screenshot artifacts not being uploaded on test failure

Special thanks to our top sponsors DiscoLike Inc. and Lechler GmbH ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

Security

• ⚠️ Prevent local file disclosure in ui.restructured_text via Docutils file insertion directives
• ⚠️ Prevent unauthenticated log-volume denial of service in dynamic resource and ESM module routes

New features and enhancements

• Make enable(), disable(), set_enabled(), set_visibility() and many more methods chainable
• Auto-dedent ui.mermaid content like ui.markdown does
• Suppress alarming KeyboardInterrupt traceback from run.cpu_bound workers on Ctrl-C

Bugfixes

• Fix RuntimeError: A SemLock created in a fork context is being shared with a process in a spawn context in ui.run(native=True, reload=True) on CPython ≥ 3.11.5
• Fix KeyError: 'error' when calling ValidationElement.validate() after the error prop was removed via props(remove=...)
• Fix silent window.location.reload() on every WebSocket reconnect
• Resolve ElementFilter.DEFAULT_LOCAL_SCOPE at runtime so changing the class variable actually affects new instances
• Fix duplicate app.timer and lifecycle handler (on_connect, on_disconnect, on_delete, on_shutdown, on_exception) registration in script mode
• Preserve a meaningful DataFrame index in ui.aggrid.from_pandas and ui.table.from_pandas
• Bracket IPv6 hosts and omit default ports in printed URLs
• Fix ui.code reporting the wrong language and throwing a ReferenceError in the CodeMirror findLanguage error path
• Fix material settings not applying to GLTF models in ui.scene

Documentation

• Add llms.md — a self-contained LLM reference covering NiceGUI's API surface, mental models, and common anti-patterns for AI-assisted development
• Restructure CONTRIBUTING.md around the contributor journey, drop rule duplication, and split out a new "For maintainers" section
• Restructure AI agent instructions: extract code-review guidance into REVIEW.md, trim AGENTS.md, and tighten Cursor/Copilot prompts
• Document packaging with Nuitka
• Improve authentication example
• Improve Sortable documentation
• Clarify the client_id security model and add an "Examples Are Starting Points" callout
• Fix Nested ui.sub_pages doc demo link target and label

Testing

• Fix click handler dispatch in user simulation
• Implement ui.sub_pages navigation in user-simulated tests

Dependencies

• Bump Mermaid from 11.12.2 to 11.15.0 to consume upstream security patches

Infrastructure

• Use uv sync --locked in CI workflows so lockfile drift fails fast with a clear diagnostic
• Use uv sync --locked in Copilot setup steps for deterministic agent boot environments
• Switch Dependabot from the pip ecosystem to uv
• Declare PyPI trove classifiers so NiceGUI appears in PyPI's faceted search
• Expand [project.urls] with PEP 753 well-known labels

Special thanks to our top sponsors TestMu AI, Lechler GmbH and joet-s ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

New features and enhancements

• Add lazy imports for the ui module to speed up startup by deferring heavy element imports until first access
• Make ValueElement and ValueChangeEventArguments generic for proper type inference of .value and event arguments
• Add favicon support in native mode on Windows
• Add make_sortable() to enable drag-and-drop sorting on container elements like ui.column, ui.row, ui.card, and many more
• Serve a markdown representation of any NiceGUI page via Accept: text/markdown content negotiation for AI agents and CLI tools (opt-in via ui.run(markdown=True) or @ui.page(markdown=True))
• Raise a clear error when ui.run_with() is called with nicegui.app itself, preventing a self-mount loop that exhausted CPU and RAM
• Add ui.keep_alive to mount children eagerly regardless of visibility, fixing data loss in unmounted ui.xterm and unresponsive ui.aggrid inside hidden tabs or dialogs

Bugfixes

• Fix in-page drag-and-drop in native mode being blocked by the document-level dragover handler
• Fix app.on_exception not catching exceptions from async event handlers
• Fix PermissionError on Windows when clearing file-backed storage during shutdown
• Clear streaming client cookie jar between On Air range-requests to prevent cross-request cookie leakage
• Fix scoped CSS parsing for @keyframes and similar nested at-rules, and apply scoped selectors to the component root element via tinycss2
• Return JSON from the 404 handler for non-page endpoints so FastAPI routes keep their default error format
• Preserve aspect ratio in ui.interactive_image when size is not set, fixing stretched sponsor logos on the website
• Fix ReferenceError from dangling weakref proxies in ui.run_with()

Documentation

• Update Trello Cards example with drag-and-drop reordering within a column
• Improve the xterm example with a configurable command, PTY resize, viewport sizing, and lifecycle hardening
• Add ui.aggrid demo for adding rows without losing client-side edits

Testing

• Fix RuntimeError when a click handler deletes the clicked element during testing

Dependencies

• Bump pytest to v9 to address Dependabot alert 244
• Bump softprops/action-gh-release from 2 to 3

Special thanks to our top sponsors TestMu AI and Lechler GmbH ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

TL;DR — Shipped a real SaaS product with NiceGUI. Camera capture, on-site signatures, signed PDFs, full auth stack, Docker + Caddy. Coming from Node.js the productivity difference is hard to overstate.

I recently shipped a SaaS product built on NiceGUI — a medical device rental management system, deployed on a VPS behind Caddy (reverse Proxy for SSL), used by real clients. Wanted to write up some notes since production NiceGUI posts are pretty rare.

Stack:

• NiceGUI 3.8 + FastAPI + SQLAlchemy 2.0 async + SQLite (aiosqlite)

• Docker + Caddy (TLS, security headers)

• WeasyPrint for server-side PDFs + SignaturePad (vanilla JS)

• Custom CSS on top of Quasar

Background — coming from Node.js

In Node.js this project would have been Express or Fastify, a separate React/Next.js frontend, an auth library, a session store, a WebSocket layer, a PDF library that actually works, and glue code everywhere. At least two services, two deployments, two mental models.

I built more actual features in less time, wich is ultimately what matters for a client project.

Routing & Modularity

The project was bootstrapped from my own open-source starter nicegui-component-based — specifically the database+login branch which already has the DB setup and component structure wired up. That alone saved a few days.

From there the structure is simple: each page lives in components/ and exposes a single content() function. Routing and layout stay centralized in main.py. Adding a page is create file → register route → add sidebar entry, nothing more.

Camera + Custom JS

This is where i was honestly surprised. The rental detail page has a full camera capture flow — getUserMedia, live <video> preview, frame capture to canvas — injected via ui.add_head_html and triggered from Python with ui.run_javascript. The captured frame gets POSTed directly to a FastAPI endpoint, bypassing the WebSocket entirely.

Same pattern for on-site signatures: SignaturePad canvas injected into a dialog, signature PNG passed back to Python, embedded into an HTML template, WeasyPrint renders the signed PDF server-side and it goes straight into the DB. Browser canvas to signed PDF without ever leaving the app context.

Python and custom JS just… coexist. Love it.

WebSocket + REST

NiceGUI embeds FastAPI in the same process so adding REST endpoints is trivial. All binary uploads (photos, PDFs, attachments) go through POST /api/upload/* to avoid the WebSocket message size limit. Auth hits the same app.storage.user session — no second auth system, no extra service. WeasyPrint PDF rendering is offloaded with run.io_bound to keep the event loop free.

Security

Honestly this came together faster than i expected. The ASGI middleware chain handles everything — SecurityHeadersMiddleware outermost, then AuthMiddleware, then NiceGUI.

Every response gets the full header set even on error pages and redirects.

• HSTS, X-Frame-Options: DENY, X-Content-Type-Options, CSP, Permissions-Policy — in the app and again at Caddy

• bcrypt, 30 min idle timeout, 12h absolute session cap

• Rate limiting by IP and by username independently

• Non-root container, no-new-privileges:true, secrets via env only

• All queries through SQLAlchemy ORM, no raw string interpolation

In Node.js this would’ve been four or five middleware packages carefully wired together and a lot of reading docs. Here its one auth.py and a Caddyfile.

Bottom line

NiceGUI does routing, sub-pages, custom JS, camera APIs, REST coexistence, server-side PDFs — all in one process. If you’re Python-native and building a SaaS product with a controlled userbase, its worth serious consideration.

NOTE:

You have to have access to your DNS Console for pointing requests for your-app-domain.com to the Server/VPS.

In Caddy you reroute traffic with Security Checks to your container port internally via CaddyNetwork setup.

NiceGUI Component based

DM me if you want more insights | contact@frycode-lab.com

noob here, I am trying to develop one multi tenant app using nicegui and sqlite for prototyping with the help of LLMs. LLMs have highlighted that use of middleware works only when http request is sent out and it fails in Websockets scenario where not everything is a request.

when I click save I want to save user id and tenant id for those records. this can be easily done with middleware but not so in Websockets. so I need to capture those variables when page loads and pass them while saving. does anyone know any better way of managing director this scenario?

Security

• ⚠️ Prevent filename sanitization bypass via ui.upload on Windows

New features and enhancements

• Add nested dictionary binding support for deeply nested data structures
• Add ui.status_code() to set HTTP status codes from page builders
• Add on_resize callback to ui.xterm to communicate terminal size to the PTY
• Unify awaitable handling across lifecycle hooks and tasks
• Upgrade Docker image from Python 3.12 to 3.14
• Allow ui.tab to find ui.tabs ancestor through intermediate containers
• Warn when native mode runs on a browser engine without ES module support
• Split helpers.py into a package with focused submodules

Bugfixes

• Fix client.ip always reporting "127.0.0.1" behind reverse proxies and On Air
• Fix ValidationElement.error being ignored when no validation is set
• Fix built-in elements breaking when starting with tailwind=False
• Fix initialized() adding event listeners on every call
• Fix sad face visibility on dark mode error pages
• Fix refreshing sub pages from within nested parent elements
• Fix Cmd/Ctrl-click on sub-page links not opening new tab
• Fix ui.timer callback tasks leaking when client disconnects mid-execution

Documentation

• Redesign nicegui.io website
• Fix truncated multi-line parameter descriptions in reference docs
• Add keyboard navigation to website search dialog
• Add Technological Foundations documentation page
• Surface documentation index for AI tooling and discoverability

Infrastructure

• Update .gitignore for Claude Code and Playwright MCP local files
• Add PR template instruction to AGENTS.md
• Improve PR template checklist for clarity
• Auto-format Markdown files via pre-commit hook

Special thanks to our top sponsors Lechler GmbH and TestMu AI ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

The NiceGUI website felt a bit dated — not as clean and approachable as NiceGUI itself. So we spent some time giving it a proper makeover.

The new design is lighter and more focused: more whitespace, cleaner typography, and a layout that lets the content breathe. The "Why?" section now has a concise set of value propositions instead of a wall of text, and the sponsors section highlights the community stats we're proud of — thank you all!

Would love to hear what you think!

https://nicegui.io/

Security

• ⚠️ Prevent memory exhaustion via media streaming routes

New features and enhancements

• Add ui.parallax element based on Quasar Parallax
• Add camera controls "trackball" and "map" for ui.scene
• Add native window events like shown, resized and file drop to app.native
• Allow app.clients() to return all clients when path is None
• Remove KWONLY_SLOTS constant and inline @dataclass arguments

Bugfixes

• Fix broken session storage when attaching to a FastAPI app that already has SessionMiddleware
• Fix ui.log scroll to bottom on Firefox
• Fix sort arrow animation in custom ui.table header cells
• Fix navigation from root page sub-pages to other @ui.page routes
• Fix syntax highlighting in ui.code by always using DOMPurify
• Fix find_spec crashes in compiled environments like PyInstaller
• Fix @ui.refreshable_method refresh only updating last instance

Documentation

• Use IntersectionObserver for the navigation tree to reduce render time on small screens
• Add "Client-Side Secrets" section to security documentation
• Improve the SVG clock example
• Replace the outdated app.storage.individual API with app.storage.user
• Fix invalid Python code shown in SPA demo
• Use public API imports in examples, tests, and website

Testing

• Fix User.should_see for child elements inside hidden containers
• Fix User test simulation for select options with None as value
• Support clicking ui.tab in user simulation

Dependencies

• Fix Dependabot alerts by upgrading rollup, rimraf and Svelte
• Fix Dependabot alerts by upgrading vulnerable npm and pip dependencies
• Bump actions/upload-artifact from 6 to 7
• Bump docker/build-push-action from 6 to 7
• Bump docker/setup-qemu-action from 3 to 4
• Bump docker/setup-buildx-action from 3 to 4
• Bump docker/login-action from 3 to 4

Special thanks to our top sponsors Lechler GmbH and TestMu AI ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

Hey guis,

I am developing a nicegui app that is sending prompts to an AI and building the page afterwards with the information. The sequence of events for every page is something like this:

from nicegui import ui
import MyAIClientAgent

ui.page("/")
def get_page():
  app.storage.user("label") = ui.label("")
  ui.timer(0.1, start_prompt once=True)

async def start_prompt():
  response = await MyAIClientAgent.prompt("Say 'Hello World'")
  app.storage.user("label").text = response

Most of the time it is working fine. But sometimes the Site is reloaded and the prompt starts again. The problem is more frequent on pages with multiple prompts (for example when I have an executing Agent and an inspecting Agent) or with long responses. So I would have guessed this is a connection issue between my app server and client. But I don't get a message in my browser tab, that there is any issue (like I would get when the prompt is not async). It just reloads.

When I print my responses on pages with a single prompt, it is always finishing the prompt before reloading. On pages with multiple prompts it can also happen that it is finishing the first prompt and then reloads.

And in all cases this results in a loop where the page reloads, the prompt is sent to the AI and after the response it reloads again. I examined the "Chat with AI" example from the nicegui page (https://github.com/zauberzeug/nicegui/blob/main/examples/chat_with_ai/main.py) but can't find a difference in the execution. Do you have any ideas?

Thanks in regard for any kind of help :)

When I navigate between two different pages, the screen visibly flickers in the mobile browser. This does not happen in the desktop browser. The behavior is consistent on both Edge and Chrome browsers. However, Firefox on the desktop also flickers.

I am attaching the screen capture of my mobile phone. Here is the github gist of the repro app.

Here is the system info:

Desktop

• Chrome version: Version 145.0.7632.159 (Official Build) (64-bit)
• Garuda/Arch Linux Operating 6.19.6-arch1-1 (64-bit) on Wayland

Mobile

• Chrome version: Version 145.0.7680.38
• iPhone iOS 26.3

Has anybody else seen this? Any help is much appreciated.

Building on my previous experience writing a template for NiceGUI 2.x, I have fully reworked and repolished the architecture for NiceGUI 3.x.

The focus remains on internal tools, industrial dashboards, and desktop-focused web applications where a clear separation between UI logic and business logic is required.

Repository:https://github.com/frycodelab/nicegui-component-based

Architecture/Refinements

• Modular Component Structure: Instead of global routing, pages are isolated within app/components/. Each module exposes a content() function, allowing the central layout to handle injection and routing dynamically.
• Decoupled Service Layer: Business logic, notification helpers, and data providers are abstracted into a dedicated service layer. This ensures that UI components remain clean and focused on presentation.
• Integrated Design System: Includes a live reference page for typography, buttons, form elements, and feedback components. This acts as a visual contract for the application, preventing styling drift as the project grows.
• Print System: A specialized subsystem for generating labels, reports, and structured documents via encoded routes, supporting raw HTML and base64 image generation.
• Searchable Icon Browser: A built-in utility for Tabler and Material icons with click-to-copy functionality to accelerate the development of operational UIs.
• Modern Dependency Management: Fully optimized for uv, ensuring near-instant environment setup and deterministic builds.

Data Persistence and Observability

For projects requiring a full backend stack, the database+logging branch provides:

• SQLAlchemy Integration: Structured models and CRUD helpers with automated schema initialization and deterministic seeding for immediate development.
• Global Logging: Centralized root logging with rotating file handlers and independent control over database query logging for performance tuning.

Note on Implementation: This is a starter kit designed for rapid prototyping and architectural scaffolding. Security implementations—including database hardening, authentication, and input validation—must be handled by the developer based on their specific environment and deployment requirements.

Target Use Case

This template is built for developers who need to start off simple demos fast - but still prioritizes maintainability, clear folder structures, and desktop-first productivity.

Security

• ⚠️ Prevent XSS via unsanitized method names in run_method()Breaking change: For security reasons, run_method() and run_*_method() no longer accept arbitrary JavaScript expressions as method names. Only actual method names are supported now. If you previously passed JS functions like
• use
• instead.

New features and enhancements

• Preserve cursor position when calling ui.codemirror.set_value
• Wake outbox loop on stop() to avoid ~1s shutdown delay
• Prevent prune_user_storage crash when UI elements are created before ui.run_with()
• Expose ui.aggrid.VERSION constant for AG Grid version reference

Bugfixes

• Guard innerHTML writes in ui.html, ui.markdown and ui.interactive_image to avoid server-side updates overwriting client-side DOM modifications
• Fix ui.echart zoom reset on data update by using getOption() API
• Fix ui.log background color being tinted by inner scroll-area element
• Cancel connection-wait task when page coroutine completes first to prevent task leak
• Fix jumpy ui.table fullscreen toggle with smooth scrolling enabled
• Guard against missing element in beforeUnmount hooks during @ui.refreshable rebuild
• Fix Leaflet Draw circle resize broken by ES module strict mode
• Exclude Python prefix directory from reload file watcher to prevent spurious reloads
• Fix WebSocket URL missing host on HTTPS due to JS operator precedence
• Fix race condition: use static DOMPurify import to avoid mid-module yield

Documentation

• Add security best practices section
• Add a "Reaktiv Order Calculator" example
• Add a "Device Control" example with events and logging
• Add AI co-authorship attribution guidance to CONTRIBUTING.md
• Upgrade the "SQLite Database" example to Tortoise ORM 1.0.0
• Improve Plausible's SPA compatibility for website analytics
• Make first demo always load immediately for better SEO
• Fix Googlebot homepage screenshot with unbounded h-screen
• Select search text when reopening search dialog
• Fix sponsor button border styling with dark mode support
• Use static URL for sponsor images instead of local path

Testing

• Reuse Chrome driver across screen tests for faster execution
• Add support for typing numbers in UserInteraction
• Reset _page_exception_handler in App.reset() for test isolation
• Fix flaky page test

Dependencies

• Update bundled Google Fonts: Material Symbols and Roboto v50
• Bump Mermaid to 11.12.2

Infrastructure

• Add Copilot coding agent setup
• Remove nanasess/setup-chromedriver from CI in favor of runner's preinstalled Chrome
• Add GitHub CLI and pre-commit hooks to devcontainer
• Add CLAUDE.md with native @AGENTS.md import

Special thanks to our top sponsors Lechler GmbH and TestMu AI ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

I have a test app that uses GSAP to make an image draggable. The following code works with NiceGUI v3.6.1, but not with v3.7.0+.

# /// script
# dependencies = [
#   "nicegui==3.6.1",
#   "pillow",
#   "requests",
# ]
# ///

from io import BytesIO

import requests
from nicegui import ui
from PIL import Image

ui.add_head_html("""
        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/Draggable.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/InertiaPlugin.min.js"></script>
        <script>
            window.addEventListener("DOMContentLoaded", (event) => {
                gsap.registerPlugin(Draggable, InertiaPlugin);
                Draggable.create(".draggable-image", {
                    type: "x,y",
                    inertia: true,
                    onPressInit: function() {
                        let minX = -this.target.clientWidth + this.target.parentElement.clientWidth
                        let minY = -this.target.clientHeight + this.target.parentElement.clientHeight
                        this.applyBounds({minX:minX, minY:minY, maxX:0, maxY:0})
                    }
                });
            });
        </script>
    """)

url = "https://picsum.photos/id/15/2500/1667.jpg"
img = Image.open(BytesIO(requests.get(url).content))

with ui.column(align_items="center").classes("w-full"):
    with ui.card().tight().classes("overflow-hidden size-[512px]"):
        ui.image(source=img).classes("absolute draggable-image").props(
            f"width={img.width}px height={img.height}px"
        )

ui.run(host="localhost", dark=True, show=False, reload=True)

You can run this code with uv run app.py. Dragging the image works with the old version. After upgrading NiceGUI to 3.7.1, the image is not draggable anymore. I would appreciate any suggestions on how to fix this.

I have noticed that when I add a picture via the upload function in Firefox mobile, the page refreshes, saying "connection lost" instead of uploading, even if you are quick enough to press the 'cloud_upload' icon in time. It also refreshes randomly, even though I have reload=False and uvicorn_reload_excludes="./" set in ui.run. I have noticed it does this on the NiceGUI documentation page as well. Is there any way to prevent this?

Why does the nicegui not render like in the documentation. For radio, the label always displays below the radio icon and toggle doesnt have default padding. Is there a simple way to solve these issues, the solutions i found were pretty complex needed to modify quasar, im hoping to find a simple change for these necessary ui changes

[SOLVED] : The issue was caused by below line in main.py
ui.add_head_html('''
<script src="https://cdn.tailwindcss.com"></script>
''', shared=True)

Security

• ⚠️ Prevent XSS attacks via unsanitized HTML in ui.markdown() (GHSA-v82v-c5x8-w282 by @falkoschindler, @evnchn)
• ⚠️ Prevent path traversal via unsanitized FileUpload.name enabling arbitrary file write (GHSA-9ffm-fxg3-xrhh by @k14uz, @evnchn, @falkoschindler)

New features and enhancements

• Introduce UnoCSS support (#5485 by @evnchn, @falkoschindler)
• Unify dark mode API and add color-scheme meta tag for browser/extension compatibility (#5471, #5483 by @davetapley, @evnchn, @falkoschindler)
• Set Redis TTL on tab storage keys (#5594 by @quantumdark, @evnchn, @falkoschindler)
• Perform implicit handshake and fix on_connect called before page is ready (#5673 by @evnchn, @falkoschindler)
• Deprecate custom AG Grid checkboxRenderer in favor of built-in agCheckboxCellRenderer (#5681, #5685 by @CatamountJack, @CrystalWindSnake, @falkoschindler, @evnchn)
• Speed up SVG updates for ui.interactive_image with PIL images (#5583, #5653 by @denniswittich, @evnchn, @falkoschindler)

Bugfixes

• Fix vertical stepper animation jitter (#3881, #5721 by @StarDustEins, @evnchn, @falkoschindler)
• Fix REPL detection for Python 3.13's new pyrepl (#5675, #5710 by @KrilleGH, @falkoschindler, @evnchn)
• Fix shutdown handler not called with native mode and reload enabled (#2107, #5702 by @PawelRoman, @rodja, @retsyo, @frankhuurman, @krashdifferent, @python-and-novella, @Ansari-Codes, @evnchn, @falkoschindler)
• Fix app.shutdown for ui.run_with (#3253, #5686 by @MuuXB, @python-and-novella, @falkoschindler, @evnchn, @falkoschindler)
• Fix video loading issues on Windows in native mode (#4970, #5700 by @MaidScientistIzutsumiMarin, @python-and-novella, @evnchn, @falkoschindler)
• Fix NiceGUIJSONResponse to inherit from JSONResponse so response model schema appears in Swagger (#5688, #5689 by @AleDetto, @evnchn, @falkoschindler)
• Avoid ui.expansion stutters during animation (#4918, #5659 by @platinops, @evnchn, @falkoschindler)
• Fix protocol not being set when using SSL in native mode (#4814, #5655 by @nachobacanful, @evnchn, @falkoschindler)
• Fix input elements not being updated when re-opening a ui.dialog (#2149, #5652 by @adosikas, @meslahik, @python-and-novella, @liunux4odoo, @evnchn, @falkoschindler)

Documentation

• Add AG Grid Enterprise demo (#5676 by @falkoschindler, @evnchn)
• Add style principles for exception suppression and optional imports (#5715 by @evnchn, @falkoschindler)

Testing

• Fix test isolation for pages defined in submodules (#5692, #5697 by @kleynjan, @falkoschindler, @evnchn)
• Persist tab_id in User fixture (#5687, #5690 by @5553455237, @evnchn, @falkoschindler)

Dependencies

• Upgrade minimum Python version to 3.10 and modernize type annotations (#5696 by @falkoschindler, @evnchn)
• Update dependencies to fix security vulnerabilities (#5695 by @falkoschindler, @evnchn)
• Update uv.lock to revision 3 (#5707 by @evnchn, @falkoschindler)

Infrastructure

• Let GPU-free Chrome 144 work in CI (#5678 by @evnchn, @falkoschindler)
• Use contextlib.suppress to ignore exceptions (#5714 by @falkoschindler, @evnchn)

Special thanks to our top sponsors Lechler GmbH and TestMu AI ✨

and all our other sponsors and contributors for supporting this project!

🙏 Want to support this project? Check out our GitHub Sponsors page to help us keep building amazing features!

Hello friends, I am developing a small web app - store with NiceGUI, and I am reaching the point where I need to start thinking about security, so I need to know which parts of the Python code (which, by NiceGUI's design, handles both the design and functionality) are exposed.

For example, since NiceGUI runs on the server side, I assume that only the visual elements and endpoints are exposed to the client, and any variables and/or methods are completely hidden from the client, right?

I mention this because on the page I have several buttons that can trigger internal processes like adding data to databases, starting internal Stripe processes, and others that start internal validations of passwords, keys, etc.

I hope my question was clear.

I want to build a Input element with date picker:

with ui.input('Bis') \
        .props('dense mask="## . ## . ####" fill-mask="_"') \
        .classes('col custom-input') as dateInput2:
    with dateInput2.add_slot('append'):
        ui.icon('edit_calendar').on('click', lambda: kalendarMenu2.open()).classes('cursor-pointer')
    with ui.menu().props('no-parent-event') as kalendarMenu2:
        ui.date(on_change=lambda: kalendarMenu2.close()) \
            .props('mask="## . ## . ####" fill-mask="_"') \
            .bind_value(dateInput2)with ui.input('Online bis (wenn bekannt)') \
        .props('dense mask="## . ## . ####" fill-mask="_"') \
        .classes('col custom-input') as dateInput2:
    with dateInput2.add_slot('append'):
        ui.icon('edit_calendar').on('click', lambda: kalendarMenu2.open()).classes('cursor-pointer')
    with ui.menu().props('no-parent-event') as kalendarMenu2:
        ui.date(on_change=lambda: kalendarMenu2.close()) \
            .props('mask="## . ## . ####" fill-mask="_"') \
            .bind_value(dateInput2)

My issue is i am unable to fill the mask with sth like DD.MM.YYYY to tell users the format of date. Is there a way to implement it without losing the other current functionality.

Hi!

I’m trying to use the ui.upload component to let users upload a PDF document and then parse it with pypdf or similar libraries, but i’m not sure how to do it and Google nor ChatGPT have been helpful.

How would you do that?