diff --git a/nicegui/ui_run.py b/nicegui/ui_run.py
index 708fd87ba..467d60536 100644
--- a/nicegui/ui_run.py
+++ b/nicegui/ui_run.py
@@ -88,7 +88,7 @@ def run(*,
:param binding_refresh_interval: time between binding updates (default: `0.1` seconds, bigger is more CPU friendly)
:param reconnect_timeout: maximum time the server waits for the browser to reconnect (default: 3.0 seconds)
:param message_history_length: maximum number of messages that will be stored and resent after a connection interruption (default: 1000, use 0 to disable)
- :param fastapi_docs: enable FastAPI's automatic documentation with Swagger UI, ReDoc, and OpenAPI JSON (bool or dictionary as described `here`_, default: `False`)
+ :param fastapi_docs: enable FastAPI's automatic documentation with Swagger UI, ReDoc, and OpenAPI JSON (bool or dictionary as described `here `_, default: `False`)
:param show: automatically open the UI in a browser tab (default: `True`)
:param on_air: tech preview: `allows temporary remote access `_ if set to `True` (default: disabled)
:param native: open the UI in a native window of size 800x600 (default: `False`, deactivates `show`, automatically finds an open port)
diff --git a/website/documentation/content/overview.py b/website/documentation/content/overview.py
index 7ad92f347..d9cfbc2d4 100644
--- a/website/documentation/content/overview.py
+++ b/website/documentation/content/overview.py
@@ -162,6 +162,15 @@ def map_of_nicegui():
.map-of-nicegui code {
font-weight: bold;
}
+ .map-of-nicegui a code {
+ color: #3e6a94;
+ }
+ body.dark .map-of-nicegui a code {
+ color: #5898d4;
+ }
+ .map-of-nicegui a:has(code)::after {
+ display: none;
+ }
''')
ui.markdown('''
This overview shows the structure of NiceGUI.
@@ -173,16 +182,16 @@ def map_of_nicegui():
UI elements and other essentials to run a NiceGUI app.
- - `ui.element`: base class for all UI elements
+ - [`ui.element`](/documentation/element): base class for all UI elements
- customization:
- - `.props()` and `.default_props()`: add Quasar props and regular HTML attributes
- - `.classes()` and `.default_classes()`: add Quasar, Tailwind and custom HTML classes
- - `.tailwind`: convenience API for adding Tailwind classes
- - `.style()` and `.default_style()`: add CSS style definitions
- - `.tooltip()`: add a tooltip to an element
- - `.mark()`: mark an element for querying with an [ElementFilter](/documentation/element_filter)
+ - `.props()` and [`.default_props()`](/documentation/element#default_props): add Quasar props and regular HTML attributes
+ - `.classes()` and [`.default_classes()`](/documentation/element#default_classes): add Quasar, Tailwind and custom HTML classes
+ - [`.tailwind`](/documentation/section_styling_appearance#tailwind_css): convenience API for adding Tailwind classes
+ - `.style()` and [`.default_style()`](/documentation/element#default_style): add CSS style definitions
+ - [`.tooltip()`](/documentation/tooltip): add a tooltip to an element
+ - [`.mark()`](/documentation/element_filter#markers): mark an element for querying with an [ElementFilter](/documentation/element_filter)
- interaction:
- - `.on()`: add Python and JavaScript event handlers
+ - [`.on()`](/documentation/generic_events): add Python and JavaScript event handlers
- `.update()`: send an update to the client (mostly done automatically)
- `.run_method()`: run a method on the client side
- `.get_computed_prop()`: get the value of a property that is computed on the client side
@@ -193,141 +202,147 @@ def map_of_nicegui():
- `descendants`: an iterator over all child elements, grandchildren, etc.
- `slots`: a dictionary of named slots
- `add_slot`: fill a new slot with NiceGUI elements or a scoped slot with template strings
- - `clear`: remove all child elements
- - `move`: move an element to a new parent
+ - [`clear`](/documentation/section_page_layout#clear_containers): remove all child elements
+ - [`move`](/documentation/element#move_elements): move an element to a new parent
- `remove`: remove a child element
- `delete`: delete an element and all its children
- `is_deleted`: whether an element has been deleted
- elements:
- - `ui.aggrid`
- - `ui.audio`
- - `ui.avatar`
- - `ui.badge`
- - `ui.button`
- - `ui.button_group`
- - `ui.card`, `ui.card_actions`, `ui.card_section`
- - `ui.carousel`, `ui.carousel_slide`
- - `ui.chat_message`
- - `ui.checkbox`
- - `ui.chip`
- - `ui.circular_progress`
- - `ui.code`
- - `ui.codemirror`
- - `ui.color_input`
- - `ui.color_picker`
- - `ui.column`
- - `ui.context_menu`
- - `ui.date`
- - `ui.dialog`
- - `ui.dropdown_button`
- - `ui.echart`
- - `ui.editor`
- - `ui.expansion`
- - `ui.grid`
- - `ui.highchart`
- - `ui.html`
- - `ui.icon`
- - `ui.image`
- - `ui.input`
- - `ui.interactive_image`
+ - [`ui.aggrid`](/documentation/aggrid)
+ - [`ui.audio`](/documentation/audio)
+ - [`ui.avatar`](/documentation/avatar)
+ - [`ui.badge`](/documentation/badge)
+ - [`ui.button`](/documentation/button)
+ - [`ui.button_group`](/documentation/button_group)
+ - [`ui.card`](/documentation/card), `ui.card_actions`, `ui.card_section`
+ - [`ui.carousel`](/documentation/carousel), `ui.carousel_slide`
+ - [`ui.chat_message`](/documentation/chat_message)
+ - [`ui.checkbox`](/documentation/checkbox)
+ - [`ui.chip`](/documentation/chip)
+ - [`ui.circular_progress`](/documentation/circular_progress)
+ - [`ui.code`](/documentation/code)
+ - [`ui.codemirror`](/documentation/codemirror)
+ - [`ui.color_input`](/documentation/color_input)
+ - [`ui.color_picker`](/documentation/color_picker)
+ - [`ui.column`](/documentation/column)
+ - [`ui.context_menu`](/documentation/context_menu)
+ - [`ui.date`](/documentation/date)
+ - [`ui.dialog`](/documentation/dialog)
+ - [`ui.dropdown_button`](/documentation/button_dropdown)
+ - [`ui.echart`](/documentation/echart)
+ - [`ui.editor`](/documentation/editor)
+ - [`ui.expansion`](/documentation/expansion)
+ - [`ui.grid`](/documentation/grid)
+ - [`ui.highchart`](/documentation/highchart)
+ - [`ui.html`](/documentation/html)
+ - [`ui.icon`](/documentation/icon)
+ - [`ui.image`](/documentation/image)
+ - [`ui.input`](/documentation/input)
+ - [`ui.interactive_image`](/documentation/interactive_image)
- `ui.item`, `ui.item_label`, `ui.item_section`
- - `ui.joystick`
- - `ui.json_editor`
- - `ui.knob`
- - `ui.label`
- - `ui.leaflet`
- - `ui.line_plot`
- - `ui.linear_progress`
- - `ui.link`, `ui.link_target`
- - `ui.list`
- - `ui.log`
- - `ui.markdown`
- - `ui.matplotlib`
- - `ui.menu`, `ui.menu_item`
- - `ui.mermaid`
- - `ui.notification`
- - `ui.number`
- - `ui.pagination`
- - `ui.plotly`
- - `ui.pyplot`
- - `ui.radio`
- - `ui.range`
- - `ui.restructured_text`
- - `ui.row`
- - `ui.scene`, `ui.scene_view`
- - `ui.scroll_area`
- - `ui.select`
- - `ui.separator`
- - `ui.skeleton`
- - `ui.slider`
- - `ui.space`
- - `ui.spinner`
- - `ui.splitter`
- - `ui.step`, `ui.stepper`, `ui.stepper_navigation`
- - `ui.switch`
- - `ui.tabs`, `ui.tab`, `ui.tab_panels`, `ui.tab_panel`
- - `ui.table`
- - `ui.textarea`
- - `ui.time`
- - `ui.timeline`, `ui.timeline_entry`
- - `ui.toggle`
- - `ui.tooltip`
- - `ui.tree`
- - `ui.upload`
- - `ui.video`
- - special layout elements
+ - [`ui.joystick`](/documentation/joystick)
+ - [`ui.json_editor`](/documentation/json_editor)
+ - [`ui.knob`](/documentation/knob)
+ - [`ui.label`](/documentation/label)
+ - [`ui.leaflet`](/documentation/leaflet)
+ - [`ui.line_plot`](/documentation/line_plot)
+ - [`ui.linear_progress`](/documentation/linear_progress)
+ - [`ui.link`](/documentation/link), `ui.link_target`
+ - [`ui.list`](/documentation/list)
+ - [`ui.log`](/documentation/log)
+ - [`ui.markdown`](/documentation/markdown)
+ - [`ui.matplotlib`](/documentation/matplotlib)
+ - [`ui.menu`](/documentation/menu), `ui.menu_item`
+ - [`ui.mermaid`](/documentation/mermaid)
+ - [`ui.notification`](/documentation/notification)
+ - [`ui.number`](/documentation/number)
+ - [`ui.pagination`](/documentation/pagination)
+ - [`ui.plotly`](/documentation/plotly)
+ - [`ui.pyplot`](/documentation/pyplot)
+ - [`ui.radio`](/documentation/radio)
+ - [`ui.range`](/documentation/range)
+ - [`ui.restructured_text`](/documentation/restructured_text)
+ - [`ui.row`](/documentation/row)
+ - [`ui.scene`](/documentation/scene), [`ui.scene_view`](/documentation/scene#scene_view)
+ - [`ui.scroll_area`](/documentation/scroll_area)
+ - [`ui.select`](/documentation/select)
+ - [`ui.separator`](/documentation/separator)
+ - [`ui.skeleton`](/documentation/skeleton)
+ - [`ui.slider`](/documentation/slider)
+ - [`ui.space`](/documentation/space)
+ - [`ui.spinner`](/documentation/spinner)
+ - [`ui.splitter`](/documentation/splitter)
+ - [`ui.stepper`](/documentation/stepper), `ui.step`, `ui.stepper_navigation`
+ - [`ui.switch`](/documentation/switch)
+ - [`ui.tabs`](/documentation/tabs), `ui.tab`, `ui.tab_panels`, `ui.tab_panel`
+ - [`ui.table`](/documentation/table)
+ - [`ui.textarea`](/documentation/textarea)
+ - [`ui.time`](/documentation/time)
+ - [`ui.timeline`](/documentation/timeline), `ui.timeline_entry`
+ - [`ui.toggle`](/documentation/toggle)
+ - [`ui.tooltip`](/documentation/tooltip)
+ - [`ui.tree`](/documentation/tree)
+ - [`ui.upload`](/documentation/upload)
+ - [`ui.video`](/documentation/video)
+ - special layout [elements](/documentation/page_layout):
- `ui.header`
- `ui.footer`
- `ui.drawer`, `ui.left_drawer`, `ui.right_drawer`
- `ui.page_sticky`
- special functions and objects:
- - `ui.add_body_html` and `ui.add_head_html`: add HTML to the body and head of the page
- - `ui.add_css`, `ui.add_sass` and `ui.add_scss`: add CSS, SASS and SCSS to the page
- - `ui.clipboard`: interact with the browser's clipboard
- - `ui.colors`: define the main color theme for a page
+ - [`ui.add_body_html`](/documentation/section_pages_routing#add_html_to_the_page) and
+ [`ui.add_head_html`](/documentation/section_pages_routing#add_html_to_the_page): add HTML to the body and head of the page
+ - [`ui.add_css`](/documentation/add_style#add_css_style_definitions_to_the_page),
+ [`ui.add_sass`](/documentation/add_style#add_sass_style_definitions_to_the_page) and
+ [`ui.add_scss`](/documentation/add_style#add_scss_style_definitions_to_the_page): add CSS, SASS and SCSS to the page
+ - [`ui.clipboard`](/documentation/clipboard): interact with the browser's clipboard
+ - [`ui.colors`](/documentation/colors): define the main color theme for a page
- `ui.context`: get the current UI context including the `client` and `request` objects
- - `ui.dark_mode`: get and set the dark mode on a page
- - `ui.download`: download a file to the client
- - `ui.keyboard`: define keyboard event handlers
- - `ui.navigate`: let the browser navigate to another location
- - `ui.notify`: show a notification
- - `ui.on`: register an event handler
- - `ui.page_title`: change the current page title
- - `ui.query`: query HTML elements on the client side to modify props, classes and style definitions
- - `ui.run` and `ui.run_with`: run the app (standalone or attached to a FastAPI app)
- - `ui.run_javascript`: run custom JavaScript on the client side (can use `getElement()`, `getHtmlElement()`, and `emitEvent()`)
- - `ui.teleport`: teleport an element to a different location in the HTML DOM
- - `ui.timer`: run a function periodically or once after a delay
+ - [`ui.dark_mode`](/documentation/dark_mode): get and set the dark mode on a page
+ - [`ui.download`](/documentation/download): download a file to the client
+ - [`ui.keyboard`](/documentation/keyboard): define keyboard event handlers
+ - [`ui.navigate`](/documentation/navigate): let the browser navigate to another location
+ - [`ui.notify`](/documentation/notification): show a notification
+ - [`ui.on`](/documentation/generic_events#custom_events): register an event handler
+ - [`ui.page_title`](/documentation/page_title): change the current page title
+ - [`ui.query`](/documentation/query): query HTML elements on the client side to modify props, classes and style definitions
+ - [`ui.run`](/documentation/run) and `ui.run_with`: run the app (standalone or attached to a FastAPI app)
+ - [`ui.run_javascript`](/documentation/run#run_custom_javascript_on_the_client_side): run custom JavaScript on the client side (can use `getElement()`, `getHtmlElement()`, and `emitEvent()`)
+ - [`ui.teleport`](/documentation/teleport): teleport an element to a different location in the HTML DOM
+ - [`ui.timer`](/documentation/timer): run a function periodically or once after a delay
- `ui.update`: send updates of multiple elements to the client
- decorators:
- - `ui.page`: define a page (in contrast to the automatically generated "auto-index page")
- - `ui.refreshable`, `ui.refreshable_method`: define refreshable UI containers (can use `ui.state`)
+ - [`ui.page`](/documentation/page): define a page (in contrast to the automatically generated "auto-index page")
+ - [`ui.refreshable`](/documentation/refreshable), `ui.refreshable_method`: define refreshable UI containers
+ (can use [`ui.state`](/documentation/refreshable#refreshable_ui_with_reactive_state))
#### `app`
App-wide storage, mount points and lifecycle hooks.
- - storage:
+ - [`app.storage`](/documentation/storage):
- `app.storage.tab`: stored in memory on the server, unique per tab
- `app.storage.client`: stored in memory on the server, unique per client connected to a page
- `app.storage.user`: stored in a file on the server, unique per browser
- `app.storage.general`: stored in a file on the server, shared across the entire app
- `app.storage.browser`: stored in the browser's local storage, unique per browser
- - lifecycle hooks:
+ - [lifecycle hooks](/documentation/section_action_events#events):
- `app.on_connect()`: called when a client connects
- `app.on_disconnect()`: called when a client disconnects
- `app.on_startup()`: called when the app starts
- `app.on_shutdown()`: called when the app shuts down
- `app.on_exception()`: called when an exception occurs
- - `app.shutdown()`: shut down the app
+ - [`app.shutdown()`](/documentation/section_action_events#shut_down_nicegui): shut down the app
- static files:
- - `app.add_static_files()`, `app.add_static_file()`: serve static files
- - `app.add_media_files()`, `app.add_media_file()`: serve media files (supports streaming)
- - `app.native`: configure the app when running in native mode
+ - [`app.add_static_files()`](/documentation/section_pages_routing#add_a_directory_of_static_files),
+ `app.add_static_file()`: serve static files
+ - [`app.add_media_files()`](/documentation/section_pages_routing#add_directory_of_media_files),
+ `app.add_media_file()`: serve media files (supports streaming)
+ - [`app.native`](/documentation/section_configuration_deployment#native_mode): configure the app when running in native mode
#### `html`
- Pure HTML elements:
+ [Pure HTML elements](/documentation/html#other_html_elements):
`a`,
`abbr`,
@@ -442,8 +457,8 @@ def map_of_nicegui():
Run IO and CPU bound functions in separate threads and processes.
- - `run.cpu_bound()`: run a CPU-bound function in a separate process
- - `run.io_bound()`: run an IO-bound function in a separate thread
+ - [`run.cpu_bound()`](/documentation/section_action_events#running_cpu-bound_tasks): run a CPU-bound function in a separate process
+ - [`run.io_bound()`](/documentation/section_action_events#running_i_o-bound_tasks): run an IO-bound function in a separate thread
#### `observables`
@@ -458,6 +473,6 @@ def map_of_nicegui():
Write automated UI tests which run in a headless browser (slow) or fully simulated in Python (fast).
- - `Screen` fixture: start a real (headless) browser to interact with your application
- - `User` fixture: simulate user interaction on a Python level (fast)
+ - [`Screen`](/documentation/section_testing#screen_fixture) fixture: start a real (headless) browser to interact with your application
+ - [`User`](/documentation/section_testing#user_fixture) fixture: simulate user interaction on a Python level (fast)
''').classes('map-of-nicegui arrow-links bold-links')