ui.ace

Ace Editor

Use the Ace Editor to edit code in a textarea element.

Example:

from uiwiz import ui

ui.ace(name="editor")

Constructor

name: Optional= None
content: str= None
lang: Literal= python
sql_options: Optional= None
ace_options: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.aggrid

Aggrid

Use aggrid to display a DataFrame in a grid format.

Can be used anywhere in a @page_router.ui("") or @app.ui("")

Example:

from uiwiz import ui
import pandas as pd

df = pd.DataFrame({
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "City": ["New York", "Los Angeles", "Chicago"]
})
ui.aggrid(df)

Constructor

df: DataFrameNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
create_cols_and_rows(df: DataFrame, escape: bool) -> Tuple
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
response(df: DataFrame, headers: dict) -> JSONResponse
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.avatar

Display an avatar image.

:type path: str

:type size: int, optional

Constructor

path: strNo default required argument
size: int= 12

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Any
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.button

Create a button element, with the given title.

Can be used to trigger events.

Example:

:type title: str

from uiwiz import ui

@app.ui("/ui/toast/click")
def click_event():
    ui.toast("Button clicked").success()

ui.button("Click me").on_click(click_event, target="this", swap="none")

Constructor

title: strNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
on_click(func: Union, target: Union, swap: Optional, params: Optional) -> Button
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.checkbox

Checkbox element

Used for forms where a user can select one or more options.

:type name: str

:type checked: bool, optional

from uiwiz import ui

ui.checkbox("subscribe", checked=True)

Constructor

name: strNo default required argument
checked: bool= False

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.col

Col

Align children elements vertically in a column layout.

Example:

:type item_position: str, optional

:type gap: str, optional

:type padding: str, optional

from uiwiz import ui

with ui.col():
    ui.button("Button 1")
    ui.button("Button 2")

Constructor

item_position: str= items-start
gap: str= gap-4
padding: str= p-4

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.container

Container

A container element that centers a box in the middle of the screen.

Constructor

max_w: str= max-w-[960px]
padding: str= pt-4 pb-4
space_y: str= space-y-4

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.datepicker

Datepicker element

This element is used for date inputs

:type name: str

:type value: datetime, optional

from uiwiz import ui
from datetime import datetime

ui.datepicker("datepicker", datetime.now())

Constructor

name: strNo default required argument
value: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
default_date(date: Union) -> Datepicker
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.dict

Dict element

Will render a dict or list data as a formatted json in the browser

from uiwiz import ui

ui.dict({"name": "John Doe", "age": 50})
ui.dict({"name": "John Doe", "age": 50}, copy_to_clipboard=True).border_classes("")

{
  "name":
"John Doe"
,
  "age":
50
}
{
  "name":
"John Doe"
,
  "age":
50
}

Constructor

data: UnionNo default required argument
copy_to_clipboard: bool= False

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
No documentation provided
border_classes(classes: str) -> Any
No documentation provided
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
generate(data: Any) -> Any
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
key_classes(classes: Any) -> Any
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.
value_classes(classes: Any) -> Any
No documentation provided

ui.divider

Divider

Display a divider line between elements.

Example:

:type text: str, optional

from uiwiz import ui

with ui.col():
    ui.button("Button 1")
    ui.divider("or")
    ui.button("Button 2")
or

Constructor

text: str=

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
horizontal() -> Divider
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.drawer

Drawer

A drawer is a panel that slides in from the side of the screen. It can be used to display additional content or controls.

:type always_open: bool, optional

:type right: bool, optional

from uiwiz import ui

with ui.drawer() as drawer:
    with drawer.drawer_content():
        with ui.nav():
            drawer.drawer_button()

        with ui.col():
            ui.label("test1")
            ui.button("Click me")
            ui.label("test1")

    with drawer.drawer_side():
        with ui.element("li"):
            ui.link("Drawer-1", "/")

Constructor

always_open: bool= False
right: bool= False

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
always_open(value: bool) -> NoneType
Set the drawer to always open until the screen size is too small.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
drawer_button() -> Element
No documentation provided
drawer_content() -> Element
No documentation provided
drawer_side() -> Element
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
right(value: bool) -> NoneType
Set the drawer to open from the right side of the screen.
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.dropdown

Dropdown

A dropdown is a list in which the selected item is always visible, and the others are visible on demand.

:type name: str

:type items: list[str]

:type placeholder: str, optional

from uiwiz import ui

ui.dropdown("dropdown", ["Option 1", "Option 2", "Option 3"], "Select an option")
ui.dropdown("dropdown", ["Option 1", "Option 2", "Option 3"], "Option 1") # Option 1 is selected by default

Constructor

name: strNo default required argument
items: listNo default required argument
placeholder: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.echart

EChart element

See https://echarts.apache.org/examples/en/index.html for examples

on how to use ECharts

Example usage:

from uiwiz import ui

options = {
    "title": {"text": "ECharts entry example"},
    "tooltip": {},
    "legend": {"data": ["Sales"]},
    "xAxis": {"data": ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]},
    "yAxis": {},
    "series": [{"name": "Sales", "type": "bar", "data": [5, 20, 36, 10, 10, 20]}],
}

ui.echart(options)

Constructor

options: dictNo default required argument
height: str= h-80

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
container_classes(input: str) -> EChart
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
response(data: dict, headers: dict) -> JSONResponse
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.element

Element

Represents an HTML element. This class is used to create HTML elements.

It is possible to create a custom element by subclassing this class.

Content of any element will be escaped by default. If you want to render

the content as HTML, you can use the ui.html(content="<div>html content</div>") element.

The rendering of the element is done by calling the render method.

If some work needs to be done before or after rendering, the before_render

and after_render methods can be overridden.

The element attributes can be accessed and modified through the attributes property.

The content of an attribute can either be a string or a callable that returns a string.

Example:

:type tag: str

:type content: str, optional

:type render_html: bool, optional

:type oob: bool, optional

:type kwargs: dict[str, str], optional

from uiwiz import ui

ui.element("h1", "Hello World")

Hello World

Constructor

tag: Literal= div
content: str=
render_html: bool= True
oob: bool= False
kwargs: OptionalNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.footer

Footer

A footer is a section at the bottom of a page that contains information about the page.

from uiwiz import ui

with ui.footer():
    ui.label("Footer content")

Constructor

ui.form

Form

A form is a section of a document containing input elements.

from uiwiz import ui

@app.ui("/ui/form/submit")
async def ui_form_submit():
    ui.toast("Form submitted successfully!").success()

with ui.form().on_submit(ui_form_submit):
    ui.input(name="name", placeholder="Name")
    ui.button("Submit")

Constructor

ui.fullwidth

FullWidth

This element is used to create a full-width container.

from uiwiz import ui

with ui.full_width():
    ui.text("This is a full-width container")

Constructor

ui.hiddeninput

HiddenInput

This element is used for hidden input data that should not be visible to the user.

But it will be sent back to the server when the form is submitted.

Example:

:type name: str

:type value: Any

from uiwiz import ui
from pydantic import BaseModel

class HiddenInputExample(BaseModel):
    csrf_token: str
    age: int


@app.ui("/ui/hiddeninput/submit")
async def ui_hiddeninput_submit(data_input: HiddenInputExample):
    with ui.toast().set_auto_close(False).success():
        ui.dict(data_input.dict()).border_classes("")

with ui.form().on_submit(ui_hiddeninput_submit):
    ui.hiddenInput(name="csrf_token", value="hidden_csrf_token")
    ui.input("age", None, "Enter your age")
    ui.button("Submit")

Constructor

name: strNo default required argument
value: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.html

Html element

Will render a raw htlm string. This is useful for embedding custom HTML content directly into the UI.

:type content: str

from uiwiz import ui

ui.html("<strong>Hello World</strong>")
Hello World

Constructor

ui.input

Input

This element is used for input data

:type name: str, optional

:type value: str, optional

:type placeholder: str, optional

from uiwiz import ui

ui.input("username", "default_value", "Enter your username")

Constructor

name: Optional= None
value: Optional= None
placeholder: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
set_floating_label(label: Optional) -> Input
No documentation provided
set_placeholder(value: str) -> Input
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.label

Label

This element is used for labels that can be bound to form elements.

:type text: str, optional

:type for_: Element, optional

from uiwiz import ui

with ui.element().classes("flex flex-row gap-4"):
    label = ui.label("Username")
    input = ui.input("username")
    label.set_for(input)

with ui.col():
    ui.label().combined_label("Password", ui.input("Password"))
    ui.label().combined_label("Type", ui.dropdown("dropdown", ["Option 1", "Option 2", "Option 3"], "Select an option"))
    ui.label().combined_label_end("Age", ui.input("Age"))

Constructor

text: Optional= None
for_: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
bind_text_from(element: Element, trigger: Union, swap: Optional) -> Any
Bind the text of this element to data of another element.
Requires the other element to have a name attribute.
:param element: Element to bind to
:param trigger: Event trigger to bind to
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
combined_label(text: str, for_: Element) -> Label
Create a label with text and bind it to an element (label first).
combined_label_end(text: str, for_: Element) -> Label
Create a label with text and bind it to an element (element first).
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
set_for(for_: Element) -> Label
No documentation provided
set_text(text: str) -> Label
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.link

Link element

Link element that can be used to navigate to a different page.

Can be used as a button or a link.

Example:

:type text: str

:type link: Union[Callable[[], str], str]

from uiwiz import ui

ui.link("Click me", "/some/path").classes("btn btn-primary")
Click me

Constructor

text: strNo default required argument
link: UnionNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> NoneType
No documentation provided
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.markdown

Markdown

This element is used to render markdown content.

:type content: str

:type extras: list, optional

from uiwiz import ui

ui.markdown("### Hello World This is a markdown content.")

Hello World This is a markdown content.

Constructor

ui.modelform

ModelForm

Create a form from a pydantic model. The form will be rendered with the fields from the model.

The model can also be a pydantic model instance. The form will be prefilled with the instance data.

Example:

from pydantic import BaseModel
from uiwiz import ui


class DataInput(BaseModel):
    name: str
    age: int

@app.ui("/handle-submit")
async def handle_submit(data: DataInput):
    ui.toast(f"Name: {data.name}, Age: {data.age}").success()

ui.modelForm(DataInput).on_submit(handle_submit)

Constructor

model: BaseModelNo default required argument
compact: bool= True
card_classes: str= border border-base-content rounded-lg shadow-lg w-full
label_classes: str= flex-auto w-52
size: Literal= md

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
extend_kwargs(kwargs: dict, ele_args: list, key: str, field_arg: str, ele: Element) -> bool
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
get_type_and_uianno(args: Tuple) -> Optional
No documentation provided
on_submit(args: Any, kwargs: Any) -> ModelForm
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
render_element(ele: Element, key: str, classes: Optional, field_arg: Optional, kwargs: Any) -> NoneType
No documentation provided
render_element_dropdown(field_class: type, key: str, placeholder: Optional) -> NoneType
No documentation provided
render_element_radio(ele: UiAnno, key: str, field_args: Tuple) -> NoneType
No documentation provided
render_key_override(args: Tuple, key: str, kwargs: Any) -> NoneType
No documentation provided
render_model(kwargs: Any) -> Form
No documentation provided
render_model_attributes(key: Any, field_type: Any, kwargs: Any) -> ModelForm
No documentation provided
render_type_hint_without_args(args: Tuple, annotated: bool, field_type: Any, key: Any) -> Element
No documentation provided
render_with_args_annotated(args: Tuple, annotated: bool, field_type: Tuple, key: str) -> Element
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.nav

Nav

This element is used for navigation bars

from uiwiz import ui

with ui.nav():
    ui.link("Home", "/")
    ui.link("Docs", "/docs")

Constructor

ui.number

number

This element is used for number inputs

from uiwiz import ui

ui.number("value", 50, 0, 100, 1)

Constructor

name: strNo default required argument
value: intNo default required argument
min: intNo default required argument
max: intNo default required argument
step: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.radio

Radio

This element is used for radio buttons

from uiwiz import ui

with ui.form():
    ui.radio("group1", checked=True)
    ui.radio("group1")

Constructor

name: strNo default required argument
checked: bool= False

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.range

Range

This element is used for range inputs

from uiwiz import ui

ui.range("range", 50, 0, 100, 1)

Constructor

name: strNo default required argument
value: intNo default required argument
min: intNo default required argument
max: intNo default required argument
step: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.row

Row

Align children elements vertically.

from uiwiz import ui

with ui.row():
    ui.label("Hello")
    ui.label("World")

Constructor

wrap: str= flex-wrap
item_position: str= items-start
gap: str= gap-4
padding: str=

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.spinner

Spinner

Show a spinner while making a request

Example:

from uiwiz import ui

@app.ui("/some/endpoint")
def some_endpoint():
    import time
    time.sleep(1)  # Simulate a long-running request
    ui.toast("Button clicked").success()

with ui.button("Click me").on_click(some_endpoint, swap="none") as btn:
    ui.spinner(btn)

Constructor

args: ElementNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
ball() -> Spinner
No documentation provided
bars() -> Spinner
No documentation provided
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
dots() -> Spinner
No documentation provided
extra_small() -> Spinner
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
infinity() -> Spinner
No documentation provided
large() -> Spinner
No documentation provided
medium() -> Spinner
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
ring() -> Spinner
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.
small() -> Spinner
No documentation provided
spinner() -> Spinner
No documentation provided

ui.tab

Tab

This element is used for tab navigation

and should be used inside a :class:Tabs element.

The first tab will be active by default if no active tab is set.

from uiwiz import ui

with ui.tabs():
    with ui.tab("Tab 1").active():
        ui.label("Content of Tab 1")
    with ui.tab("Tab 2"):
        ui.label("Content of Tab 2")
    with ui.tab("Tab 3"):
        ui.label("Content of Tab 3")

Constructor

title: strNo default required argument
active: Optional= None

Methods

active() -> Tab
No documentation provided
after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.table

Creates a table from a list of pydantic models

Example:

:return: The current instance of the element.

from uiwiz import ui
from pydantic import BaseModel

class User(BaseModel):
    id: int
    name: str
    email: str

data = [
    User(id=1, name="John Doe", email="[email protected]"),
    User(id=1, name="John Doe", email="[email protected]"),
]
ui.table(data, id_column_name="id")
idnameemail
1John Doe[email protected]
1John Doe[email protected]

Constructor

data: ListNo default required argument
id_column_name: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> NoneType
No documentation provided
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
create_row(create: Union) -> Table
Enable creation functionality for a table row.
This method assigns the endpoint to handle the "Create" action for a row
in the table.
:param create: The endpoint that is triggered when the "Delete" action is performed.
:type create: FUNC_TYPE
:return: Returns the `Table` instance with the "Delete" functionality enabled.
:rtype: Table
Example:
>>> table = Table(data).create_row(create=create_endpoint)
delete_row(delete: Union) -> Table
Enable deletion functionality for a table row.
This method assigns the endpoint to handle the "Delete" action for rows
in the table. It requires that `id_column_name` be set to identify rows uniquely.
:param delete: The endpoint that is triggered when the "Delete" action is performed.
The callback should accept parameters required to handle the deletion logic.
:type delete: FUNC_TYPE
:return: Returns the `Table` instance with the "Delete" functionality enabled.
:rtype: Table
:raises ValueError: If `id_column_name` is not set, as it is required to identify rows
for the "Delete" operation.
Example:
>>> table = Table(data, id_column_name="id").delete_row(delete=delete_endpoint)
edit_row(edit: Union) -> Table
Enable editing functionality for a table row.
This method assigns the endpoint to handle the "Edit" action for rows
in the table. It requires that `id_column_name` be set to identify rows uniquely.
:param edit: The endpoint that is triggered when the "Edit" action is performed.
The callback should accept parameters required to handle the editing logic.
:type edit: FUNC_TYPE
:return: Returns the `Table` instance with the "Edit" functionality enabled.
:rtype: Table
:raises ValueError: If `id_column_name` is not set, as it is required to identify rows
for the "Edit" operation.
Example:
>>> table = Table(data, id_column_name="id").edit_row(edit=edit_endpoint)
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
set_border(border_classes: str) -> Table
Set the border classes for the table
:param border_classes: The border classes to set
:return: The current instance of the element.
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.tabs

Tabs

This element is used for tab navigation.

It should be used as a context manager to create tabs.

from uiwiz import ui

with ui.tabs():
    with ui.tab("Tab 1").active():
        ui.label("Content of Tab 1")
    with ui.tab("Tab 2"):
        ui.label("Content of Tab 2")
    with ui.tab("Tab 3"):
        ui.label("Content of Tab 3")

Constructor

ui.textarea

TextArea

This element is used for text area inputs

from uiwiz import ui

ui.textarea("textarea", "Hello World", "Type something here")

Constructor

name: Optional= None
value: Optional= None
placeholder: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.themeselector

Theme Selector

A dropdown to select a theme for the application.

The selected theme will be stored in a cookie named "data-theme".

Example:

from uiwiz import ui

ui.themeSelector(["light", "dark", "nord", "cupcake", "pastel", "bumblebee"])

Constructor

themes: Optional= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
setup_listener() -> Any
No documentation provided
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.toast

Toast

Display a toast message on the client side.

Can be used anywhere in a @page_router.ui("") or @app.ui("")

To persist the toast message, set auto_close to False

@app.ui("/some/path")
async def some_path():
    ui.toast("This is a toast message").info()

Constructor

message: str=
svg: Literal= None

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
No documentation provided
classes(input: str) -> Toast
No documentation provided
error() -> Toast
No documentation provided
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
info() -> Toast
No documentation provided
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
set_auto_close(auto_close: bool) -> Toast
Set auto close
:param auto_close: True or False. Auto close False will keep the toast open until the user closes it
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.
success() -> Toast
No documentation provided
svg(svg: Literal) -> Toast
No documentation provided
warning() -> Toast
No documentation provided

ui.toggle

Toggle

This element is used for toggle inputs

from uiwiz import ui

ui.toggle("toggle", checked=True)

Constructor

name: strNo default required argument
checked: bool= False

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.

ui.upload

Upload

This element is used for file uploads

from uiwiz import ui
from fastapi import UploadFile

@app.ui("/upload/endpoint")
async def handle_upload(file: UploadFile):
    file_output = await file.read()
    ui.toast(file_output.decode("utf-8")).success()

ui.upload("file").on_upload(on_upload=handle_upload, swap="none")

Constructor

name: strNo default required argument

Methods

after_render(html: str) -> str
This method is called after the element is rendered.
:param html: The rendered HTML of the element.
before_render() -> Any
This method is called before the element is rendered.
classes(input: str) -> Self
Set tailwind classes for the element.
:param input: The tailwind classes to apply to the element.
:return: The current instance of the element.
get_classes() -> str
Get html classes of the element.
:return: The classes of the element.
:type: str
on(trigger: Union, func: Union, target: Union, swap: Optional, params: Optional) -> OnEvent
Register the type of event to listen for and the function to call when the event is triggered.
:param trigger: The type of event to listen for. This can be any valid html event type.
:param func: The function/endpoint to call when the event is triggered.
:param target: The target element that will be swaped with the response from the server.
:param swap: The type of swap to perform. Set to 'none' to disable swapping.
:param params: The parameters to pass to the function/endpoint. This could be a dynamic value that the function needs to execute. /some/path/{id}
:return: The current instance of the element.
on_upload(on_upload: Union, target: Union, trigger: Union, swap: Optional) -> Upload
:param on_upload: The function to call when the upload event is triggered or the endpoint to call
:param target: The target to swap the response to
:param trigger: The event to trigger the function
:param swap: The swap event to use
render(render_script: bool) -> str
Render the element as HTML.
:param render_script: If any element has a javascript script, it will be rendered as well.
:type render_script: bool
size(size: Literal) -> Self
Set the size of the element.
:param size: The size of the element.
:return: The current instance of the element.
GitHub