# alex22201/streamlit-elements architecture

> Architecture diagram of the GitHub repository alex22201/streamlit-elements, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/alex22201/streamlit-elements
- Repository: https://github.com/alex22201/streamlit-elements

## Overview

Streamlit Elements lets a Python Streamlit app declare a nested UI frame, serialize it into a component payload, and render it in a React frontend. The frontend resolves element modules for widgets, dashboards, charts, editors, events, HTML, and media; callbacks send event data back for Python dispatch. The README establishes the broader element catalog, while several Python wrappers and frontend modules were not sampled, so their internal wiring is represented only at the documented module level.

Main entry points: [`streamlit_elements/core/frame.py`](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/frame.py) (Frame builder), [`streamlit_elements/frontend/components/ElementsApp.tsx`](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/ElementsApp.tsx) (Elements app), [`streamlit_elements/__init__.py`](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/__init__.py) (Elements API), [`streamlit_elements/core/callback.py`](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/callback.py) (Callback manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_python["Python API and runtime"]
  node_api["Elements API<br/>[__init__.py]"]
  node_frame["Frame builder<br/>[frame.py]"]
  node_element["Element tree<br/>[element.py]"]
  node_render["Component render<br/>[render.py]"]
end

subgraph group_frontend["Frontend rendering"]
  node_frontend_app["Elements app<br/>[ElementsApp.tsx]"]
end

subgraph group_widgets["Element capabilities"]
  node_mui_py["MUI wrappers<br/>[mui.py]"]
  node_dashboard_py["Dashboard API<br/>[dashboard.py]"]
  node_nivo_py["Nivo API<br/>[nivo.py]"]
  node_editors_py["Editor API<br/>[editors.py]"]
  node_html_py["HTML API<br/>[html.py]"]
  node_media_py["Media API<br/>[media.py]"]
  node_events_py["Events API<br/>[events.py]"]
  node_mui_front["MUI renderer<br/>[Elements.tsx]"]
  node_grid_front["Dashboard grid<br/>[Grid.tsx]"]
  node_nivo_front["Nivo charts<br/>[Nivo.tsx]"]
  node_editor_front["Monaco editor<br/>[Monaco.tsx]"]
  node_html_front["HTML renderer<br/>[HTML.tsx]"]
  node_media_front["Media player<br/>[Player.tsx]"]
  node_hotkey_front["Hotkey handler<br/>[Hotkey.tsx]"]
end

subgraph group_callbacks["Event callbacks"]
  node_callback["Callback manager<br/>[callback.py]"]
end

node_app(("Streamlit app"))
node_streamlit(("Streamlit runtime"))

node_app -->|"declares UI"| node_api
node_api -->|"opens frame"| node_frame
node_api -->|"exposes modules"| node_mui_py
node_frame -->|"builds tree"| node_element
node_frame -->|"registers callbacks"| node_callback
node_frame -->|"renders payload"| node_render
node_render -->|"registers component"| node_streamlit
node_streamlit -->|"supplies component data"| node_frontend_app
node_frontend_app -->|"dispatches elements"| node_mui_front
node_frontend_app -->|"dispatches elements"| node_grid_front
node_frontend_app -->|"dispatches elements"| node_nivo_front
node_frontend_app -->|"dispatches elements"| node_editor_front
node_frontend_app -->|"dispatches elements"| node_html_front
node_frontend_app -->|"dispatches elements"| node_media_front
node_frontend_app -->|"dispatches elements"| node_hotkey_front
node_dashboard_py -->|"creates elements"| node_frame
node_nivo_py -->|"creates elements"| node_frame
node_editors_py -->|"creates elements"| node_frame
node_html_py -->|"creates elements"| node_frame
node_media_py -->|"creates elements"| node_frame
node_events_py -->|"creates elements"| node_frame
node_mui_py -->|"creates elements"| node_frame
node_frontend_app -->|"sends event data"| node_streamlit
node_streamlit -->|"triggers dispatch"| node_callback
node_callback -->|"invokes user callback"| node_app

click node_api "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/__init__.py"
click node_frame "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/frame.py"
click node_element "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/element.py"
click node_render "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/render.py"
click node_frontend_app "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/ElementsApp.tsx"
click node_mui_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/mui.py"
click node_dashboard_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/dashboard.py"
click node_nivo_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/nivo.py"
click node_editors_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/editors.py"
click node_html_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/html.py"
click node_media_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/media.py"
click node_events_py "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/events.py"
click node_mui_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/mui/Elements.tsx"
click node_grid_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/dashboard/Grid.tsx"
click node_nivo_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/charts/Nivo.tsx"
click node_editor_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/editors/Monaco.tsx"
click node_html_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/html/HTML.tsx"
click node_media_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/media/Player.tsx"
click node_hotkey_front "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/events/Hotkey.tsx"
click node_callback "https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/callback.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_api,node_frame,node_element,node_render toneBlue
class node_frontend_app toneAmber
class node_mui_py,node_dashboard_py,node_nivo_py,node_editors_py,node_html_py,node_media_py,node_events_py,node_mui_front,node_grid_front,node_nivo_front,node_editor_front,node_html_front,node_media_front,node_hotkey_front toneMint
class node_callback toneRose
class node_app,node_streamlit toneIndigo
```

## Components

### Python API and runtime

- [Elements API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/__init__.py): `streamlit_elements/__init__.py`
- [Frame builder](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/frame.py): `streamlit_elements/core/frame.py`
- [Element tree](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/element.py): `streamlit_elements/core/element.py`
- [Component render](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/render.py): `streamlit_elements/core/render.py`

### Frontend rendering

- [Elements app](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/ElementsApp.tsx): `streamlit_elements/frontend/components/ElementsApp.tsx`

### Element capabilities

- [MUI wrappers](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/mui.py): `streamlit_elements/modules/mui.py`
- [Dashboard API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/dashboard.py): `streamlit_elements/modules/dashboard.py`
- [Nivo API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/nivo.py): `streamlit_elements/modules/nivo.py`
- [Editor API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/editors.py): `streamlit_elements/modules/editors.py`
- [HTML API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/html.py): `streamlit_elements/modules/html.py`
- [Media API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/media.py): `streamlit_elements/modules/media.py`
- [Events API](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/modules/events.py): `streamlit_elements/modules/events.py`
- [MUI renderer](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/mui/Elements.tsx): `streamlit_elements/frontend/components/modules/mui/Elements.tsx`
- [Dashboard grid](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/dashboard/Grid.tsx): `streamlit_elements/frontend/components/modules/dashboard/Grid.tsx`
- [Nivo charts](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/charts/Nivo.tsx): `streamlit_elements/frontend/components/modules/charts/Nivo.tsx`
- [Monaco editor](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/editors/Monaco.tsx): `streamlit_elements/frontend/components/modules/editors/Monaco.tsx`
- [HTML renderer](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/html/HTML.tsx): `streamlit_elements/frontend/components/modules/html/HTML.tsx`
- [Media player](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/media/Player.tsx): `streamlit_elements/frontend/components/modules/media/Player.tsx`
- [Hotkey handler](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/frontend/components/modules/events/Hotkey.tsx): `streamlit_elements/frontend/components/modules/events/Hotkey.tsx`

### Event callbacks

- [Callback manager](https://github.com/alex22201/streamlit-elements/blob/main/streamlit_elements/core/callback.py): `streamlit_elements/core/callback.py`

### Other components

- **Streamlit app**
- **Streamlit runtime**

## Connections

- Streamlit app → Elements API: declares UI
- Elements API → Frame builder: opens frame
- Elements API → MUI wrappers: exposes modules
- Frame builder → Element tree: builds tree
- Frame builder → Callback manager: registers callbacks
- Frame builder → Component render: renders payload
- Component render → Streamlit runtime: registers component
- Streamlit runtime → Elements app: supplies component data
- Elements app → MUI renderer: dispatches elements
- Elements app → Dashboard grid: dispatches elements
- Elements app → Nivo charts: dispatches elements
- Elements app → Monaco editor: dispatches elements
- Elements app → HTML renderer: dispatches elements
- Elements app → Media player: dispatches elements
- Elements app → Hotkey handler: dispatches elements
- Dashboard API → Frame builder: creates elements
- Nivo API → Frame builder: creates elements
- Editor API → Frame builder: creates elements
- HTML API → Frame builder: creates elements
- Media API → Frame builder: creates elements
- Events API → Frame builder: creates elements
- MUI wrappers → Frame builder: creates elements
- Elements app → Streamlit runtime: sends event data
- Streamlit runtime → Callback manager: triggers dispatch
- Callback manager → Streamlit app: invokes user callback