How alex22201/streamlit-elements works
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: frame.py Frame builder · ElementsApp.tsx Elements app · __init__.py Elements API · callback.py Callback manager
Components 22
Python API and runtime
- Elements API
streamlit_elements/__init__.py - Frame builder
streamlit_elements/core/frame.py - Element tree
streamlit_elements/core/element.py - Component render
streamlit_elements/core/render.py
Frontend rendering
- Elements app
streamlit_elements/frontend/components/ElementsApp.tsx
Element capabilities
- MUI wrappers
streamlit_elements/modules/mui.py - Dashboard API
streamlit_elements/modules/dashboard.py - Nivo API
streamlit_elements/modules/nivo.py - Editor API
streamlit_elements/modules/editors.py - HTML API
streamlit_elements/modules/html.py - Media API
streamlit_elements/modules/media.py - Events API
streamlit_elements/modules/events.py - MUI renderer
streamlit_elements/frontend/components/modules/mui/Elements.tsx - Dashboard grid
streamlit_elements/frontend/components/modules/dashboard/Grid.tsx - Nivo charts
streamlit_elements/frontend/components/modules/charts/Nivo.tsx - Monaco editor
streamlit_elements/frontend/components/modules/editors/Monaco.tsx - HTML renderer
streamlit_elements/frontend/components/modules/html/HTML.tsx - Media player
streamlit_elements/frontend/components/modules/media/Player.tsx - Hotkey handler
streamlit_elements/frontend/components/modules/events/Hotkey.tsx
Event callbacks
- Callback manager
streamlit_elements/core/callback.py
Other components
- Streamlit app
- Streamlit runtime
Connections 25
- 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