Rules and context for AI coding agents working on streamlit-extras.
streamlit-extras is a community-driven collection of useful Streamlit components and utilities ("extras") that extend Streamlit's functionality. Each extra is a self-contained module providing widgets, layouts, or utilities not yet in core Streamlit.
Mission: Make it easy to discover, share, and use community Streamlit components.
src/streamlit_extras/: Main package where all extras live__init__.py: The@extradecorator (registers functions)<extra_name>/: Each extra is its own directory with an__init__.py
gallery/: Demo Streamlit app showcasing all extrastests/: Pytest tests (validates extra metadata)docs/: MkDocs documentation sourcepyproject.toml: Dependencies, ruff/mypy configscripts/hatch_build.py: Build hook that auto-compiles React frontendswork-tmp/: Temporary files, specs, and scripts (gitignored)
Setup:
uv sync: Install Python dependenciescd src/streamlit_extras/<extra>/frontend && npm install: Install npm deps for React extras
Development:
uv run streamlit run gallery/streamlit_app.py: Run demo appcd src/streamlit_extras/<extra>/frontend && npm run dev: Watch mode for React extras
Building:
uv build: Build wheel (auto-compiles React frontends via hatch hook)
Quality checks:
uv run pytest: Run testsuv run ruff check --fix: Lint + autofixuv run ruff format: Format codeuv run mypy: Type checkuv run ty check: Alternative type checker
Pre-commit (runs all checks):
pre-commit install: Setup hookspre-commit run --all-files: Run manually
- Python 3.10+ with uv for dependency management
- Streamlit (>=1.54.0) as the core framework
- Node.js (>=18 LTS) with npm for React-based extras
- Ruff for linting and formatting
- mypy + ty for type checking
- pytest for testing
- MkDocs for documentation
- Create
src/streamlit_extras/<extra_name>/__init__.py - Use the
@extradecorator on your main function - Add required metadata attributes (see table below)
- Run
uv run pytestto validate metadata - Test in gallery:
uv run streamlit run gallery/streamlit_app.py
| Attribute | Required | Type | Description |
|---|---|---|---|
__title__ |
Yes | str |
Display name of the extra |
__desc__ |
Yes | str |
Short description of what it does |
__icon__ |
Yes | str |
Emoji icon for the extra |
__author__ |
Yes | str |
Author name |
__examples__ |
Yes | list or dict |
Example functions (dict if multiple @extra funcs) |
__funcs__ |
Auto | list |
Auto-populated by @extra decorator |
__playground__ |
No | bool |
Enable playground in gallery |
__tests__ |
No | list |
Test functions to run |
__github_repo__ |
No | str |
GitHub repository URL |
__streamlit_cloud_url__ |
No | str |
Demo app URL (must contain "streamlit") |
__forum_url__ |
No | str |
Streamlit forum discussion URL |
__experimental_playground__ |
No | bool |
Enable experimental playground |
__experimental_playground_funcs__ |
No | list |
Functions for experimental playground |
__inputs__ |
No | dict |
Playground input config |
__pypi_name__ |
No | str |
PyPI package name (requires __package_name__) |
__package_name__ |
No | str |
Import name for external package |
__twitter_username__ |
No | str |
Author's Twitter handle |
__buymeacoffee_username__ |
No | str |
Buy Me a Coffee username |
from .. import extra
@extra
def my_function():
...
def example():
my_function()
__title__ = "My Extra"
__desc__ = "What it does"
__icon__ = "🎯"
__author__ = "Your Name"
__examples__ = [example]Some extras use React frontends via Streamlit's Custom Components v2 (CCv2) API. These require Node.js (>=18 LTS) and npm to build.
For detailed CCv2 documentation (directory structure, build process, registration, theming), see src/streamlit_extras/AGENTS.md.
Quick commands:
cd src/streamlit_extras/<extra>/frontend && npm install && npm run build- Build frontendcd src/streamlit_extras/<extra>/frontend && npm run dev- Watch mode for developmentuv build- Build wheel (auto-compiles all React frontends via hatch hook)
- Follow existing patterns in the codebase
- Use type hints on all functions (
disallow_untyped_defsis enabled) - Keep extras self-contained in their own directories
- Escape user input in HTML components (
html.escape()for XSS prevention)
Tests in tests/test_extras.py automatically validate all extras have:
- Required metadata (
__title__,__icon__,__desc__,__author__) - At least one example function
- Functions registered via
@extradecorator
Run uv run pytest -v to see per-extra test results.