New Feature Implementation Guide
For understanding the underlying architecture (backend runtime, frontend rendering, WebSocket communication, element tree), see the understanding-streamlit-architecture skill.
Most features need implementation in three areas:
-
Backend: lib/streamlit/
-
Frontend: frontend/
-
Protobufs: proto/
New features should include:
-
Python unit tests in lib/tests
-
Vitest unit tests
-
E2E Playwright tests in e2e_playwright/
Order of Implementation
Protobuf changes in proto/ then run make protobuf
-
New elements: add to proto/streamlit/proto/Element.proto
Backend in lib/streamlit/
-
New elements: add to lib/streamlit/init.py
Python unit tests in lib/tests
-
Run: uv run pytest lib/tests/streamlit/the_test_name.py
-
New elements: add to lib/tests/streamlit/element_mocks.py
Frontend in frontend/
-
New elements: add to frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx
Vitest tests in *.test.tsx
-
Run: cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx
E2E Playwright tests in e2e_playwright/
-
Run: make run-e2e-test e2e_playwright/name_of_the_test.py
Autofix formatting and linting: make autofix
Verify the implementation: make check