zauberzeug · leocjj · Aug 15, 2025 · Aug 15, 2025 · Aug 15, 2025 · Aug 15, 2025
diff --git a/examples/3d_scene/README.md b/examples/3d_scene/README.md
@@ -0,0 +1,4 @@
+# 3D Scene
+Creates a webGL view and loads an STL mesh illuminated with a spotlight
+
+![Screenshot](screenshot.webp)
diff --git a/examples/3d_scene/screenshot.webp b/examples/3d_scene/screenshot.webp
diff --git a/examples/ai_interface/README.md b/examples/ai_interface/README.md
@@ -0,0 +1,4 @@
+# AI Interface
+Utilizes the [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion
+
+![Screenshot](screenshot.webp)
diff --git a/examples/ai_interface/screenshot.webp b/examples/ai_interface/screenshot.webp
diff --git a/examples/audio_recorder/README.md b/examples/audio_recorder/README.md
@@ -0,0 +1,4 @@
+# Audio Recorder
+Record audio, play it back or download it
+
+![Screenshot](screenshot.webp)
diff --git a/examples/audio_recorder/screenshot.webp b/examples/audio_recorder/screenshot.webp
diff --git a/examples/authentication/README.md b/examples/authentication/README.md
@@ -0,0 +1,6 @@
+# Authentication
+Shows how to use sessions to build a login screen
+
+![Screenshot](screenshot.webp)
+
+![Screenshot](screenshot_1.webp)
diff --git a/examples/authentication/screenshot.webp b/examples/authentication/screenshot.webp
diff --git a/examples/authentication/screenshot_1.webp b/examples/authentication/screenshot_1.webp
diff --git a/examples/chat_app/README.md b/examples/chat_app/README.md
@@ -0,0 +1,4 @@
+# Chat App
+A simple chat app
+
+![Screenshot](screenshot.webp)
diff --git a/examples/chat_app/screenshot.webp b/examples/chat_app/screenshot.webp
diff --git a/examples/chat_with_ai/README.md b/examples/chat_with_ai/README.md
@@ -0,0 +1,4 @@
+# Chat with AI
+A simple chat app with AI
+
+![Screenshot](screenshot.webp)
diff --git a/examples/chat_with_ai/screenshot.webp b/examples/chat_with_ai/screenshot.webp
diff --git a/examples/custom_binding/README.md b/examples/custom_binding/README.md
@@ -0,0 +1,4 @@
+# Custom Binding
+Create a custom binding for a label with a bindable background color
+
+![Screenshot](screenshot.webp)
diff --git a/examples/custom_binding/screenshot.webp b/examples/custom_binding/screenshot.webp
diff --git a/examples/custom_vue_component/README.md b/examples/custom_vue_component/README.md
@@ -1,6 +1,8 @@
 # Custom Vue Component
+Shows how to write and integrate a custom Vue component
+
+![Screenshot](screenshot.webp)
 
-This example demonstrates how to create and use custom Vue components in NiceGUI.
 One component is implemented using JavaScript, the other using Vue's Single-File Component (SFC) syntax.
 
 ## Counter Component (counter.js)

diff --git a/examples/custom_vue_component/screenshot.webp b/examples/custom_vue_component/screenshot.webp
diff --git a/examples/descope_auth/README.md b/examples/descope_auth/README.md
@@ -1,10 +1,11 @@
-# Descope Auth Example
+# Descope Auth
+Login form and user profile using [Descope](https://descope.com)
 
-Descope is an all-inclusive user authentication and user management platform.
+![Screenshot](screenshot.webp)
 
 ## Getting Started
 
 1. Create a [Descope](https://www.descope.com/) account.
 2. Setup a project and configure the "Login Flow" (first step in the Getting Started Wizard).
 3. Instead of following the "Integrate" instructions of the Wizard, use this example.
-4. Provide your Descope Project ID as environment variable: `DESCOPE_PROJECT_ID=<your_project_id> python3 main.py`
+4. Provide your Descope Project ID as environment variable: `DESCOPE_PROJECT_ID=P31sAvsSKptct5u66x0P2UKpiF9h python3 main.py`
diff --git a/examples/descope_auth/screenshot.webp b/examples/descope_auth/screenshot.webp
diff --git a/examples/docker_image/README.md b/examples/docker_image/README.md
@@ -1,4 +1,7 @@
-# Docker Example with NiceGUI
+# Docker Image
+Use the official [zauberzeug/nicegui](https://hub.docker.com/r/zauberzeug/nicegui) docker image
+
+![Screenshot](screenshot.webp)
 
 This README provides a walkthrough on how to utilize the NiceGUI release docker image, [zauberzeug/nicegui, available on Docker Hub](https://hub.docker.com/r/zauberzeug/nicegui).
 The image is configured using a `docker-compose.yml` file for ease of use.

diff --git a/examples/docker_image/screenshot.webp b/examples/docker_image/screenshot.webp
diff --git a/examples/download_text_as_file/README.md b/examples/download_text_as_file/README.md
@@ -0,0 +1,4 @@
+# Download Text as File
+Providing in-memory data like strings as file download
+
+![Screenshot](screenshot.webp)
diff --git a/examples/download_text_as_file/screenshot.webp b/examples/download_text_as_file/screenshot.webp
diff --git a/examples/editable_ag_grid/README.md b/examples/editable_ag_grid/README.md
@@ -0,0 +1,4 @@
+# Editable AG Grid
+Editable AG Grid allowing to add, edit, delete rows
+
+![Screenshot](screenshot.webp)
diff --git a/examples/editable_ag_grid/screenshot.webp b/examples/editable_ag_grid/screenshot.webp
diff --git a/examples/editable_ag_grid/screenshot_1.webp b/examples/editable_ag_grid/screenshot_1.webp
diff --git a/examples/editable_ag_grid/screenshot_2.webp b/examples/editable_ag_grid/screenshot_2.webp
diff --git a/examples/editable_table/README.md b/examples/editable_table/README.md
@@ -0,0 +1,4 @@
+# Editable table
+Editable table allowing to add, edit, delete rows
+
+![Screenshot](screenshot.webp)
diff --git a/examples/editable_table/screenshot.webp b/examples/editable_table/screenshot.webp
diff --git a/examples/editable_table/screenshot_1.webp b/examples/editable_table/screenshot_1.webp
diff --git a/examples/editable_table/screenshot_2.webp b/examples/editable_table/screenshot_2.webp
diff --git a/examples/fastapi/README.md b/examples/fastapi/README.md
@@ -0,0 +1,6 @@
+# FastAPI
+Illustrates the integration of NiceGUI with an existing FastAPI application
+
+![Screenshot](screenshot.webp)
+
+![Screenshot](screenshot_1.webp)
diff --git a/examples/fastapi/screenshot.webp b/examples/fastapi/screenshot.webp
diff --git a/examples/fastapi/screenshot_1.webp b/examples/fastapi/screenshot_1.webp
diff --git a/examples/ffmpeg_extract_images/README.md b/examples/ffmpeg_extract_images/README.md
@@ -0,0 +1,4 @@
+# FFmpeg Extract Images
+Example of using FFmpeg to extract images from a video file.
+
+![Screenshot](screenshot.webp)
diff --git a/examples/ffmpeg_extract_images/screenshot.webp b/examples/ffmpeg_extract_images/screenshot.webp
diff --git a/examples/fullcalendar/README.md b/examples/fullcalendar/README.md
@@ -0,0 +1,4 @@
+# FullCalendar
+Show an interactive calendar using the [FullCalendar library](https://fullcalendar.io/)
+
+![Screenshot](screenshot.webp)
diff --git a/examples/fullcalendar/screenshot.webp b/examples/fullcalendar/screenshot.webp
diff --git a/examples/generate_pdf/README.md b/examples/generate_pdf/README.md
@@ -0,0 +1,4 @@
+# Generate PDF
+Create an SVG preview and PDF download from input form elements
+
+![Screenshot](screenshot.webp)
diff --git a/examples/generate_pdf/screenshot.webp b/examples/generate_pdf/screenshot.webp
diff --git a/examples/global_worker/README.md b/examples/global_worker/README.md
@@ -0,0 +1,4 @@
+# Global Worker
+Demonstrates a global worker for heavy computations with progress feedback
+
+![Screenshot](screenshot.webp)
diff --git a/examples/global_worker/screenshot.webp b/examples/global_worker/screenshot.webp
diff --git a/examples/google_oauth2/README.md b/examples/google_oauth2/README.md
@@ -0,0 +1,4 @@
+# Google OAuth2
+Authenticate with Google OAuth2
+
+![Screenshot](screenshot.webp)
diff --git a/examples/google_oauth2/screenshot.webp b/examples/google_oauth2/screenshot.webp
diff --git a/examples/google_one_tap_auth/README.md b/examples/google_one_tap_auth/README.md
@@ -0,0 +1,4 @@
+# Google One-Tap Auth
+Authenticate users via Google One-Tap
+
+![Screenshot](screenshot.webp)
diff --git a/examples/google_one_tap_auth/screenshot.webp b/examples/google_one_tap_auth/screenshot.webp
diff --git a/examples/image_mask_overlay/README.md b/examples/image_mask_overlay/README.md
@@ -0,0 +1,4 @@
+# Image Mask Overlay
+Shows how to overlay an image with a mask
+
+![Screenshot](screenshot.webp)
diff --git a/examples/image_mask_overlay/screenshot.png b/examples/image_mask_overlay/screenshot.png
diff --git a/examples/image_mask_overlay/screenshot.webp b/examples/image_mask_overlay/screenshot.webp
diff --git a/examples/infinite_scroll/README.md b/examples/infinite_scroll/README.md
@@ -0,0 +1,4 @@
+# Infinite Scroll
+Presents an infinitely scrolling image gallery
+
+![Screenshot](screenshot.webp)
diff --git a/examples/infinite_scroll/screenshot.webp b/examples/infinite_scroll/screenshot.webp
diff --git a/examples/lightbox/README.md b/examples/lightbox/README.md
@@ -0,0 +1,4 @@
+# Lightbox
+A thumbnail gallery where each image can be clicked to enlarge
+
+![Screenshot](screenshot.webp)
diff --git a/examples/lightbox/screenshot.webp b/examples/lightbox/screenshot.webp
diff --git a/examples/local_file_picker/README.md b/examples/local_file_picker/README.md
@@ -0,0 +1,4 @@
+# Local File Picker
+Demonstrates a dialog for selecting files locally on the server
+
+![Screenshot](screenshot.webp)
diff --git a/examples/local_file_picker/screenshot.webp b/examples/local_file_picker/screenshot.webp
diff --git a/examples/menu_and_tabs/README.md b/examples/menu_and_tabs/README.md
@@ -0,0 +1,4 @@
+# Menu and Tabs
+Uses Quasar to create foldable menu and tabs inside a header bar
+
+![Screenshot](screenshot.webp)
diff --git a/examples/menu_and_tabs/screenshot.webp b/examples/menu_and_tabs/screenshot.webp
diff --git a/examples/modularization/README.md b/examples/modularization/README.md
@@ -0,0 +1,4 @@
+# Modularization
+Provides an example of how to modularize your application into multiple files and reuse code
+
+![Screenshot](screenshot.webp)
diff --git a/examples/modularization/screenshot.webp b/examples/modularization/screenshot.webp
diff --git a/examples/nginx_https/README.md b/examples/nginx_https/README.md
@@ -1,4 +1,10 @@
-# Serving an App with HTTPS Encryption behind a Reverse Proxy (NGINX)
+# NGINX HTTPS
+Use NGINX to serve a NiceGUI app with HTTPS
+
+![Screenshot](screenshot.webp)
+
+
+## Serving an App with HTTPS Encryption behind a Reverse Proxy (NGINX)
 
 This example shows how to serve NiceGUI with HTTPS encryption behind NGINX.
 For running the app under a subpath, have a look at https://github.com/zauberzeug/nicegui/blob/main/examples/nginx_subpath.

diff --git a/examples/nginx_https/screenshot.webp b/examples/nginx_https/screenshot.webp
diff --git a/examples/nginx_subpath/README.md b/examples/nginx_subpath/README.md
@@ -1,4 +1,10 @@
-# Serving an App Behind a Reverse Proxy Subpath
+
+# NGINX Subpath
+Shows the setup to serve an app behind a reverse proxy subpath
+
+![Screenshot](screenshot.webp)
+
+## Serving an App Behind a Reverse Proxy Subpath
 
 This example shows how to serve NiceGUI on a subpath behind a reverse proxy.
 Here we use Nginx.

diff --git a/examples/nginx_subpath/screenshot.webp b/examples/nginx_subpath/screenshot.webp
diff --git a/examples/node_module_integration/README.md b/examples/node_module_integration/README.md
@@ -1,3 +1,9 @@
+# Node Module Integration
+Use NPM to add dependencies to a NiceGUI app
+
+![Screenshot](screenshot.webp)
+
+
 # Use Bundled Node Modules as Third-party Dependencies
 
 This example demonstrates how to use multiple third-party node modules as dependencies in a NiceGUI app.

diff --git a/examples/node_module_integration/screenshot.webp b/examples/node_module_integration/screenshot.webp
diff --git a/examples/openai_assistant/README.md b/examples/openai_assistant/README.md
@@ -0,0 +1,4 @@
+# OpenAI Assistant
+Using OpenAI's Assistant API with async/await
+
+![Screenshot](screenshot.webp)
diff --git a/examples/openai_assistant/screenshot.webp b/examples/openai_assistant/screenshot.webp
diff --git a/examples/opencv_webcam/README.md b/examples/opencv_webcam/README.md
@@ -0,0 +1,4 @@
+# OpenCV Webcam
+Uses OpenCV to capture images from a webcam
+
+![Screenshot](screenshot.webp)
diff --git a/examples/opencv_webcam/screenshot.webp b/examples/opencv_webcam/screenshot.webp
diff --git a/examples/pandas_dataframe/README.md b/examples/pandas_dataframe/README.md
@@ -0,0 +1,4 @@
+# Pandas DataFrame
+Displays an editable [pandas](https://pandas.pydata.org) DataFrame
+
+![Screenshot](screenshot.webp)
diff --git a/examples/pandas_dataframe/screenshot.webp b/examples/pandas_dataframe/screenshot.webp
diff --git a/examples/placeholder.webp b/examples/placeholder.webp
diff --git a/examples/progress/README.md b/examples/progress/README.md
@@ -0,0 +1,4 @@
+# Progress
+Demonstrates a progress bar for heavy computations
+
+![Screenshot](screenshot.webp)
diff --git a/examples/progress/screenshot.webp b/examples/progress/screenshot.webp
diff --git a/examples/pyserial/README.md b/examples/pyserial/README.md
@@ -0,0 +1,4 @@
+# Pyserial
+Communicate with a serial device
+
+![Screenshot](screenshot.webp)
diff --git a/examples/pyserial/screenshot.webp b/examples/pyserial/screenshot.webp
diff --git a/examples/pytests/README.md b/examples/pytests/README.md
@@ -0,0 +1,4 @@
+# Pytests
+Test a NiceGUI app with pytest
+
+![Screenshot](screenshot.webp)
diff --git a/examples/pytests/screenshot.webp b/examples/pytests/screenshot.webp
diff --git a/examples/redis_storage/README.md b/examples/redis_storage/README.md
@@ -0,0 +1,4 @@
+# Redis Storage
+Use Redis storage to share data across multiple instances behind a reverse proxy or load balancer
+
+![Screenshot](screenshot.webp)
diff --git a/examples/redis_storage/screenshot.webp b/examples/redis_storage/screenshot.webp
diff --git a/examples/ros2/README.md b/examples/ros2/README.md
@@ -1,4 +1,7 @@
-# ROS2 Example
+# ROS2
+Using NiceGUI as web interface for a ROS2 robot
+
+![Screenshot](screenshot.webp)
 
 This example is a basic ROS2 implementation with NiceGUI.
 It starts up a user interface with virtual joystick and pose visualization reachable through http://127.0.0.1:8080.
@@ -7,8 +10,6 @@ ROS2 and NiceGUI are fully functional in this example.
 
 Over all it is a bit more complex than a super minimal example to allow auto-reloading of the NiceGUI ROS2 node.
 
-<img width="801" alt="Screen Shot 2023-06-26 at 09 36 47" src="https://github.com/zauberzeug/nicegui/assets/131391/ebb280a7-e365-4a11-9d5d-18dd4661b763">
-
 
 ## Usage
 

diff --git a/examples/ros2/screenshot.webp b/examples/ros2/screenshot.webp
diff --git a/examples/script_executor/README.md b/examples/script_executor/README.md
@@ -0,0 +1,4 @@
+# Script Executor
+Executes scripts on selection and displays the output
+
+![Screenshot](screenshot.webp)
diff --git a/examples/script_executor/screenshot.webp b/examples/script_executor/screenshot.webp
diff --git a/examples/search_as_you_type/README.md b/examples/search_as_you_type/README.md
@@ -0,0 +1,4 @@
+# Search as you type
+Using public API of [thecocktaildb.com](https://www.thecocktaildb.com/) to search for cocktails
+
+![Screenshot](screenshot.webp)
diff --git a/examples/search_as_you_type/screenshot.webp b/examples/search_as_you_type/screenshot.webp
diff --git a/examples/signature_pad/README.md b/examples/signature_pad/README.md
@@ -1,3 +1,9 @@
+# Signature Pad
+A custom element based on [signature_pad](https://www.npmjs.com/package/signature_pad)
+
+![Screenshot](screenshot.webp)
+
+
 # Use Node Modules as Third-party Dependencies
 
 This example demonstrates how to use third-party node modules as dependencies in a NiceGUI app.

diff --git a/examples/signature_pad/screenshot.webp b/examples/signature_pad/screenshot.webp
diff --git a/examples/simpy/README.md b/examples/simpy/README.md
@@ -0,0 +1,4 @@
+# Simpy
+SimPy Traffic Light Demo
+
+![Screenshot](screenshot.webp)
diff --git a/examples/simpy/screenshot.webp b/examples/simpy/screenshot.webp
diff --git a/examples/single_page_app/README.md b/examples/single_page_app/README.md
@@ -0,0 +1,4 @@
+# Single Page App
+Navigate without reloading the page
+
+![Screenshot](screenshot.webp)
diff --git a/examples/single_page_app/screenshot.webp b/examples/single_page_app/screenshot.webp
diff --git a/examples/slideshow/README.md b/examples/slideshow/README.md
@@ -0,0 +1,4 @@
+# Slideshow
+Implements a keyboard-controlled image slideshow
+
+![Screenshot](screenshot.webp)
diff --git a/examples/slideshow/screenshot.webp b/examples/slideshow/screenshot.webp
diff --git a/examples/slots/README.md b/examples/slots/README.md
@@ -0,0 +1,4 @@
+# Slots
+Shows how to use scoped slots to customize Quasar elements
+
+![Screenshot](screenshot.webp)
diff --git a/examples/slots/screenshot.webp b/examples/slots/screenshot.webp
diff --git a/examples/sqlite_database/README.md b/examples/sqlite_database/README.md
@@ -0,0 +1,4 @@
+# SQLite Database
+CRUD operations on a SQLite database with async-support through Tortoise ORM
+
+![Screenshot](screenshot.webp)
diff --git a/examples/sqlite_database/screenshot.webp b/examples/sqlite_database/screenshot.webp
diff --git a/examples/stripe/README.md b/examples/stripe/README.md
@@ -0,0 +1,4 @@
+# Stripe
+Use Stripe to process payments
+
+![Screenshot](screenshot.webp)
diff --git a/examples/stripe/screenshot.webp b/examples/stripe/screenshot.webp
diff --git a/examples/svg_clock/README.md b/examples/svg_clock/README.md
@@ -0,0 +1,4 @@
+# SVG Clock
+Displays an analog clock by updating an SVG with `ui.timer`
+
+![Screenshot](screenshot.webp)
diff --git a/examples/svg_clock/screenshot.webp b/examples/svg_clock/screenshot.webp
diff --git a/examples/table_and_slots/README.md b/examples/table_and_slots/README.md
@@ -0,0 +1,4 @@
+# Table and slots
+Shows how to use component slots in a table
+
+![Screenshot](screenshot.webp)
diff --git a/examples/table_and_slots/screenshot.webp b/examples/table_and_slots/screenshot.webp
diff --git a/examples/todo_list/README.md b/examples/todo_list/README.md
@@ -0,0 +1,4 @@
+# Todo list
+Shows a simple todo list with checkboxes and text input
+
+![Screenshot](screenshot.webp)
diff --git a/examples/todo_list/screenshot.webp b/examples/todo_list/screenshot.webp
diff --git a/examples/trello_cards/README.md b/examples/trello_cards/README.md
@@ -0,0 +1,4 @@
+# Trello Cards
+Shows Trello-like cards that can be dragged and dropped into columns
+
+![Screenshot](screenshot.webp)
diff --git a/examples/trello_cards/screenshot.webp b/examples/trello_cards/screenshot.webp
diff --git a/examples/webserial/README.md b/examples/webserial/README.md
@@ -0,0 +1,4 @@
+# Webserial
+Communicate with a serial device using the WebSerial API
+
+![Screenshot](screenshot.webp)
diff --git a/examples/webserial/screenshot.webp b/examples/webserial/screenshot.webp
diff --git a/examples/websockets/README.md b/examples/websockets/README.md
@@ -0,0 +1,4 @@
+# Websockets
+Use [websockets library](https://websockets.readthedocs.io/) to start a websocket server.
+
+![Screenshot](screenshot.webp)
diff --git a/examples/websockets/screenshot.webp b/examples/websockets/screenshot.webp
diff --git a/examples/zeromq/README.md b/examples/zeromq/README.md
@@ -1,4 +1,8 @@
-# Zeromq Example
+# ZeroMQ
+Simple ZeroMQ PUSH/PULL server and client
+
+![Screenshot](screenshot.webp)
+
 
 This example is a basic Zeromq implementation with NiceGUI.
 It shows how to stream data from a ZeroMQ socket to a NiceGUI plot.

diff --git a/examples/zeromq/screenshot.webp b/examples/zeromq/screenshot.webp