NiceGuiAsyncElement

Async element wrapper for NiceGUI with proper typing support. Create UI elements that require asynchronous initialization while maintaining full type hints and IDE support.

Installation

Install directly from GitHub using uv or pip:

# Using uv
uv add git+https://github.com/yourusername/NiceGuiAsyncElement.git

# Using pip
pip install git+https://github.com/yourusername/NiceGuiAsyncElement.git

Usage

Basic Example

from nicegui import ui
from niceguiasyncelement import AsyncElement, AsyncColumn, AsyncCard

# Create an async element that fetches data
class UserCard(AsyncElement[ui.column]):
    async def build(self, user_id: int) -> None:
        # Simulate async data fetching
        user_data = await fetch_user(user_id)

        with self:
            with ui.card():
                ui.label(user_data['name'])
                ui.label(user_data['email'])

# Use in your NiceGUI app
@ui.page('/')
async def main():
    # Creates the element and returns a properly typed ui.column
    user_card = await UserCard.create(user_id=123)
    user_card.classes('w-full')  # Full IDE support!

Using Inheritance

For even better typing, inherit from specific element types:

class DataTable(AsyncColumn):
    async def build(self, api_endpoint: str) -> None:
        # Fetch data asynchronously
        data = await fetch_data(api_endpoint)

        with self:
            ui.table(columns=data['columns'], rows=data['rows'])

# Usage
data_table = await DataTable.create(api_endpoint="/api/users")
# data_table is fully typed as DataTable/AsyncColumn

Features

• Async Initialization: Build UI elements that require async operations (API calls, database queries, etc.)
• Full Type Support: Maintains complete typing for IDE autocomplete and type checking
• Context Manager Support: Works seamlessly with NiceGUI's context manager pattern
• Multiple Approaches: Choose between generic AsyncElement or inherit from specific element types

Development

Run the example:

python example.py

License

MIT