CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-shiny

A web development framework for Python that enables building fast, beautiful, and interactive web applications using reactive programming principles.

Pending
Overview
Eval results
Files

ui.mddocs/

User Interface Components

Comprehensive set of UI functions for building layouts, input controls, output containers, and interactive elements. Shiny's UI system provides both high-level layout components and low-level HTML building blocks.

Capabilities

Page Layouts

High-level page layout functions that define the overall structure of your application.

def ui.page_fluid(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create a fluid container page layout.
    
    Args:
        *args: UI elements to include in the page.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Page container with fluid width.
    """

def ui.page_fixed(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create a fixed-width container page layout.
    
    Args:
        *args: UI elements to include in the page.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Page container with fixed width.
    """

def ui.page_fillable(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create a fillable page layout that expands to viewport.
    
    Args:
        *args: UI elements to include in the page.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Page container that fills viewport.
    """

def ui.page_sidebar(
    sidebar: Sidebar,
    *args: TagChild,
    title: str | Tag | TagList | None = None,
    fillable: bool = True,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a page layout with sidebar.
    
    Args:
        sidebar: Sidebar configuration.
        *args: Main content elements.
        title: Page title.
        fillable: Whether page should fill viewport.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Page with sidebar layout.
    """

def ui.page_navbar(
    *args: TagChild,
    title: str | Tag | TagList = "Shiny",
    id: str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a page layout with navigation bar.
    
    Args:
        *args: Navigation panels and content.
        title: Application title in navbar.
        id: Unique identifier for navbar.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Page with navigation bar layout.
    """

Usage Examples

# Fluid page layout
app_ui = ui.page_fluid(
    ui.h1("My Shiny App"),
    ui.layout_columns(
        ui.input_slider("n", "Number:", 1, 100, 50),
        ui.output_plot("plot")
    )
)

# Page with sidebar
app_ui = ui.page_sidebar(
    sidebar=ui.sidebar(
        ui.input_select("dataset", "Dataset:", choices=["mtcars", "iris"]),
        ui.input_numeric("obs", "Observations:", 10, 1, 100)
    ),
    ui.h2("Analysis Results"),
    ui.output_data_frame("data"),
    ui.output_plot("plot")
)

# Navbar page layout
app_ui = ui.page_navbar(
    ui.nav_panel("Data", 
        ui.h2("Data Input"),
        ui.input_file("file", "Choose CSV File")
    ),
    ui.nav_panel("Analysis",
        ui.h2("Data Analysis"),
        ui.output_plot("analysis_plot")
    ),
    title="Data Analysis App"
)

Layout Components

Components for organizing content within pages.

def ui.layout_columns(
    *args: TagChild,
    col_widths: int | Sequence[int] | None = None,
    row_heights: str | Sequence[str] | None = None,
    fill: bool = True,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a column-based layout.
    
    Args:
        *args: Elements to arrange in columns.
        col_widths: Column width specifications.
        row_heights: Row height specifications.
        fill: Whether to fill available space.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Column layout container.
    """

def ui.layout_column_wrap(
    *args: TagChild,
    width: str | float = 200,
    heights_equal: Literal["all", "row"] | None = None,
    fill: bool = True,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a wrapping column layout.
    
    Args:
        *args: Elements to arrange with wrapping.
        width: Minimum column width.
        heights_equal: Height equalization strategy.
        fill: Whether to fill available space.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Wrapping column layout.
    """

def ui.layout_sidebar(
    sidebar: Sidebar,
    *args: TagChild,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a sidebar layout container.
    
    Args:
        sidebar: Sidebar configuration.
        *args: Main content elements.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Sidebar layout container.
    """

Sidebar Components

Sidebar creation and management functions.

def ui.sidebar(
    *args: TagChild,
    width: int = 250,
    position: Literal["left", "right"] = "left",
    open: bool | Literal["desktop", "always"] = "desktop",
    id: str | None = None,
    **kwargs: TagAttr
) -> Sidebar:
    """
    Create a sidebar configuration.
    
    Args:
        *args: Sidebar content elements.
        width: Sidebar width in pixels.
        position: Sidebar position (left or right).
        open: Initial open state or open behavior.
        id: Unique identifier for programmatic control.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Sidebar configuration object.
    """

def ui.update_sidebar(
    id: str,
    *,
    show: bool | None = None,
    session: Session | None = None
) -> None:
    """
    Update sidebar visibility.
    
    Args:
        id: Sidebar identifier.
        show: Whether to show or hide sidebar.
        session: Session to update (current session if None).
    """

class Sidebar:
    """
    Sidebar configuration class.
    """
    def __init__(
        self,
        *args: TagChild,
        width: int = 250,
        position: Literal["left", "right"] = "left",
        open: bool | Literal["desktop", "always"] = "desktop",
        **kwargs: TagAttr
    ): ...

Card Components

Card-based layout components for grouping related content.

def ui.card(
    *args: TagChild,
    full_screen: bool = False,
    height: str | float | None = None,
    max_height: str | float | None = None,
    min_height: str | float | None = None,
    fill: bool = True,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a card container.
    
    Args:
        *args: Card content elements.
        full_screen: Enable full-screen toggle.
        height: Card height.
        max_height: Maximum card height.
        min_height: Minimum card height.
        fill: Whether card should fill available space.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Card container element.
    """

def ui.card_header(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create card header content.
    
    Args:
        *args: Header content elements.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Card header element.
    """

def ui.card_body(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create card body content.
    
    Args:
        *args: Body content elements.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Card body element.
    """

def ui.card_footer(*args: TagChild, **kwargs: TagAttr) -> Tag:
    """
    Create card footer content.
    
    Args:
        *args: Footer content elements.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Card footer element.
    """

Usage Examples

# Basic card
ui.card(
    ui.card_header("Analysis Results"),
    ui.card_body(
        ui.output_plot("main_plot"),
        ui.output_text("summary")
    ),
    ui.card_footer("Last updated: 2024-01-15")
)

# Card with full-screen capability
ui.card(
    ui.h3("Interactive Visualization"),
    ui.output_plot("complex_plot"),
    full_screen=True,
    height="400px"
)

# Multiple cards in layout
ui.layout_columns(
    ui.card(
        ui.card_header("Input Parameters"),
        ui.input_slider("alpha", "Alpha:", 0, 1, 0.5),
        ui.input_select("method", "Method:", ["A", "B", "C"])
    ),
    ui.card(
        ui.card_header("Results"),
        ui.output_table("results")
    )
)

Input Controls

User input components for collecting data and user interactions.

Text Input Controls

def ui.input_text(
    id: str,
    label: str,
    value: str = "",
    *,
    width: str | None = None,
    placeholder: str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a text input.
    
    Args:
        id: Input identifier.
        label: Input label.
        value: Initial value.
        width: Input width.
        placeholder: Placeholder text.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Text input element.
    """

def ui.input_text_area(
    id: str,
    label: str,
    value: str = "",
    *,
    width: str | None = None,
    height: str | None = None,
    rows: int | None = None,
    cols: int | None = None,
    placeholder: str | None = None,
    resize: Literal["none", "both", "horizontal", "vertical"] | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a multi-line text input.
    
    Args:
        id: Input identifier.
        label: Input label.
        value: Initial value.
        width: Input width.
        height: Input height.
        rows: Number of rows.
        cols: Number of columns.
        placeholder: Placeholder text.
        resize: Resize behavior.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Text area element.
    """

def ui.input_password(
    id: str,
    label: str,
    value: str = "",
    **kwargs: TagAttr
) -> Tag:
    """
    Create a password input.
    
    Args:
        id: Input identifier.
        label: Input label.
        value: Initial value.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Password input element.
    """

def ui.input_numeric(
    id: str,
    label: str,
    value: float | int | None,
    *,
    min: float | int | None = None,
    max: float | int | None = None,
    step: float | int | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a numeric input.
    
    Args:
        id: Input identifier.
        label: Input label.
        value: Initial numeric value.
        min: Minimum allowed value.
        max: Maximum allowed value.
        step: Step size for increment/decrement.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Numeric input element.
    """

Selection Controls

def ui.input_select(
    id: str,
    label: str,
    choices: list[str] | dict[str, str],
    *,
    selected: str | None = None,
    multiple: bool = False,
    selectize: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a select dropdown.
    
    Args:
        id: Input identifier.
        label: Input label.
        choices: Available choices as list or dict.
        selected: Initially selected value(s).
        multiple: Allow multiple selections.
        selectize: Use selectize.js for enhanced interface.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Select input element.
    """

def ui.input_selectize(
    id: str,
    label: str,
    choices: list[str] | dict[str, str],
    *,
    selected: str | list[str] | None = None,
    multiple: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a selectize dropdown with enhanced features.
    
    Args:
        id: Input identifier.
        label: Input label.
        choices: Available choices.
        selected: Initially selected value(s).
        multiple: Allow multiple selections.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Selectize input element.
    """

def ui.input_checkbox(
    id: str,
    label: str,
    value: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a checkbox input.
    
    Args:
        id: Input identifier.
        label: Checkbox label.
        value: Initial checked state.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Checkbox input element.
    """

def ui.input_checkbox_group(
    id: str,
    label: str,
    choices: list[str] | dict[str, str],
    *,
    selected: list[str] | None = None,
    inline: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a group of checkboxes.
    
    Args:
        id: Input identifier.
        label: Group label.
        choices: Available checkbox options.
        selected: Initially selected values.
        inline: Display checkboxes inline.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Checkbox group element.
    """

def ui.input_radio_buttons(
    id: str,
    label: str,
    choices: list[str] | dict[str, str],
    *,
    selected: str | None = None,
    inline: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a group of radio buttons.
    
    Args:
        id: Input identifier.
        label: Group label.
        choices: Available radio options.
        selected: Initially selected value.
        inline: Display radio buttons inline.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Radio button group element.
    """

def ui.input_switch(
    id: str,
    label: str,
    value: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a toggle switch input.
    
    Args:
        id: Input identifier.
        label: Switch label.
        value: Initial switch state.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Switch input element.
    """

Slider Controls

def ui.input_slider(
    id: str,
    label: str,
    min: float,
    max: float,
    value: float | list[float],
    *,
    step: float | None = None,
    ticks: bool = True,
    animate: bool | AnimationOptions = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a slider input.
    
    Args:
        id: Input identifier.
        label: Slider label.
        min: Minimum value.
        max: Maximum value.
        value: Initial value or range.
        step: Step size.
        ticks: Show tick marks.
        animate: Enable animation controls.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Slider input element.
    """

class AnimationOptions:
    """
    Animation options for sliders.
    """
    def __init__(
        self,
        interval: int = 1000,
        loop: bool = False,
        play_button: str | None = None,
        pause_button: str | None = None
    ): ...

Action Controls

def ui.input_action_button(
    id: str,
    label: str,
    *,
    icon: Tag | str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create an action button.
    
    Args:
        id: Input identifier.
        label: Button text.
        icon: Button icon.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Action button element.
    """

def ui.input_action_link(
    id: str,
    label: str,
    *,
    icon: Tag | str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create an action link.
    
    Args:
        id: Input identifier.
        label: Link text.
        icon: Link icon.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Action link element.
    """

def ui.input_task_button(
    id: str,
    label: str,
    *,
    icon: Tag | str | None = None,
    label_busy: str = "Processing...",
    icon_busy: Tag | str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a task button for extended operations.
    
    Args:
        id: Input identifier.
        label: Button text.
        icon: Button icon.
        label_busy: Text shown during processing.
        icon_busy: Icon shown during processing.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Task button element.
    """

Date and File Controls

def ui.input_date(
    id: str,
    label: str,
    value: str | date | None = None,
    *,
    min: str | date | None = None,
    max: str | date | None = None,
    format: str = "yyyy-mm-dd",
    **kwargs: TagAttr
) -> Tag:
    """
    Create a date input.
    
    Args:
        id: Input identifier.
        label: Input label.
        value: Initial date.
        min: Minimum allowed date.
        max: Maximum allowed date.
        format: Date display format.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Date input element.
    """

def ui.input_date_range(
    id: str,
    label: str,
    start: str | date | None = None,
    end: str | date | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a date range input.
    
    Args:
        id: Input identifier.
        label: Input label.
        start: Initial start date.
        end: Initial end date.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Date range input element.
    """

def ui.input_file(
    id: str,
    label: str,
    *,
    multiple: bool = False,
    accept: str | list[str] | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a file upload input.
    
    Args:
        id: Input identifier.
        label: Input label.
        multiple: Allow multiple file selection.
        accept: Accepted file types.
        **kwargs: Additional HTML attributes.
        
    Returns:
        File input element.
    """

Output Containers

Containers for displaying rendered output content.

def ui.output_text(
    id: str,
    inline: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a text output container.
    
    Args:
        id: Output identifier.
        inline: Display as inline element.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Text output container.
    """

def ui.output_text_verbatim(
    id: str,
    placeholder: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a verbatim text output container.
    
    Args:
        id: Output identifier.
        placeholder: Show placeholder when empty.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Verbatim text output container.
    """

def ui.output_code(
    id: str,
    placeholder: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a code output container.
    
    Args:
        id: Output identifier.
        placeholder: Show placeholder when empty.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Code output container.
    """

def ui.output_plot(
    id: str,
    width: str = "100%",
    height: str = "400px",
    *,
    click: bool | ClickOpts = False,
    dblclick: bool | DblClickOpts = False,
    hover: bool | HoverOpts = False,
    brush: bool | BrushOpts = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a plot output container.
    
    Args:
        id: Output identifier.
        width: Plot width.
        height: Plot height.
        click: Enable click events.
        dblclick: Enable double-click events.
        hover: Enable hover events.
        brush: Enable brush selection.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Plot output container.
    """

def ui.output_image(
    id: str,
    width: str = "auto",
    height: str = "auto",
    **kwargs: TagAttr
) -> Tag:
    """
    Create an image output container.
    
    Args:
        id: Output identifier.
        width: Image width.
        height: Image height.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Image output container.
    """

def ui.output_table(
    id: str,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a table output container.
    
    Args:
        id: Output identifier.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Table output container.
    """

def ui.output_data_frame(
    id: str,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a data frame output container.
    
    Args:
        id: Output identifier.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Data frame output container.
    """

def ui.output_ui(
    id: str,
    inline: bool = False,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a dynamic UI output container.
    
    Args:
        id: Output identifier.
        inline: Display as inline element.
        **kwargs: Additional HTML attributes.
        
    Returns:
        UI output container.
    """

Navigation Components

Components for creating navigation interfaces.

def ui.nav_panel(
    title: str,
    *args: TagChild,
    value: str | None = None,
    icon: Tag | str | None = None
) -> NavPanel:
    """
    Create a navigation panel.
    
    Args:
        title: Panel title.
        *args: Panel content.
        value: Panel value (defaults to title).
        icon: Panel icon.
        
    Returns:
        Navigation panel object.
    """

def ui.nav_menu(
    title: str,
    *args: NavPanel | NavMenu,
    value: str | None = None,
    icon: Tag | str | None = None
) -> NavMenu:
    """
    Create a navigation menu.
    
    Args:
        title: Menu title.
        *args: Menu items.
        value: Menu value.
        icon: Menu icon.
        
    Returns:
        Navigation menu object.
    """

def ui.navset_tab(
    *args: NavPanel | NavMenu,
    id: str | None = None,
    selected: str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a tabbed navigation set.
    
    Args:
        *args: Navigation items.
        id: Unique identifier.
        selected: Initially selected tab.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Tabbed navigation element.
    """

def ui.navset_pill(
    *args: NavPanel | NavMenu,
    id: str | None = None,
    selected: str | None = None,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a pill-style navigation set.
    
    Args:
        *args: Navigation items.
        id: Unique identifier.
        selected: Initially selected item.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Pill navigation element.
    """

Interactive Elements

Components for user interaction and feedback.

def ui.tooltip(
    trigger: Tag,
    content: str | Tag | TagList,
    *,
    id: str | None = None,
    placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
    **kwargs: TagAttr
) -> Tag:
    """
    Add a tooltip to an element.
    
    Args:
        trigger: Element that triggers the tooltip.
        content: Tooltip content.
        id: Unique identifier.
        placement: Tooltip placement.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Element with tooltip.
    """

def ui.popover(
    trigger: Tag,
    content: str | Tag | TagList,
    *,
    title: str | None = None,
    id: str | None = None,
    placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
    **kwargs: TagAttr
) -> Tag:
    """
    Add a popover to an element.
    
    Args:
        trigger: Element that triggers the popover.
        content: Popover content.
        title: Popover title.
        id: Unique identifier.
        placement: Popover placement.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Element with popover.
    """

def ui.modal(
    *args: TagChild,
    title: str | Tag | TagList | None = None,
    footer: Tag | TagList | None = None,
    size: Literal["s", "m", "l", "xl"] = "m",
    easy_close: bool = True,
    **kwargs: TagAttr
) -> Tag:
    """
    Create a modal dialog.
    
    Args:
        *args: Modal body content.
        title: Modal title.
        footer: Modal footer content.
        size: Modal size.
        easy_close: Allow closing by clicking outside.
        **kwargs: Additional HTML attributes.
        
    Returns:
        Modal dialog element.
    """

def ui.modal_show(modal: Tag, session: Session | None = None) -> None:
    """
    Show a modal dialog.
    
    Args:
        modal: Modal element to show.
        session: Session to use.
    """

def ui.modal_remove(session: Session | None = None) -> None:
    """
    Remove/hide the current modal.
    
    Args:
        session: Session to use.
    """

Usage Examples

# Complete UI example combining multiple components
app_ui = ui.page_sidebar(
    sidebar=ui.sidebar(
        ui.h4("Controls"),
        ui.input_select(
            "dataset",
            "Choose dataset:",
            choices=["mtcars", "iris", "diamonds"]
        ),
        ui.input_checkbox_group(
            "variables",
            "Select variables:",
            choices=["var1", "var2", "var3"],
            selected=["var1"]
        ),
        ui.input_slider(
            "sample_size",
            "Sample size:",
            min=10, max=1000, value=100
        ),
        ui.input_action_button(
            "update",
            "Update Analysis",
            class_="btn-primary"
        )
    ),
    
    # Main content area
    ui.h1("Data Analysis Dashboard"),
    
    ui.layout_columns(
        # Left column - data display
        ui.card(
            ui.card_header(
                ui.tooltip(
                    ui.h4("Dataset Preview"),
                    "Shows first few rows of selected dataset"
                )
            ),
            ui.output_data_frame("data_preview"),
            full_screen=True
        ),
        
        # Right column - visualization
        ui.card(
            ui.card_header("Visualization"),
            ui.output_plot(
                "main_plot",
                click=True,
                brush=True,
                height="400px"
            )
        )
    ),
    
    # Bottom section - detailed analysis
    ui.navset_tab(
        ui.nav_panel(
            "Summary Statistics",
            ui.output_table("summary_stats")
        ),
        ui.nav_panel(
            "Correlation Analysis",
            ui.output_plot("correlation_plot")
        ),
        ui.nav_panel(
            "Export",
            ui.h4("Export Options"),
            ui.download_button("download_data", "Download Data"),
            ui.download_button("download_report", "Download Report")
        ),
        id="analysis_tabs"
    ),
    
    title="Advanced Analytics"
)

Install with Tessl CLI

npx tessl i tessl/pypi-shiny

docs

app.md

express.md

index.md

reactive.md

render.md

session.md

types.md

ui.md

tile.json