https://github.com/gabriel-msilva/streamlit-arborist
Streamlit component for creating tree views.
https://github.com/gabriel-msilva/streamlit-arborist
streamlit streamlit-component
Last synced: 5 months ago
JSON representation
Streamlit component for creating tree views.
- Host: GitHub
- URL: https://github.com/gabriel-msilva/streamlit-arborist
- Owner: gabriel-msilva
- License: mit
- Created: 2024-07-13T22:08:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-22T01:58:04.000Z (10 months ago)
- Last Synced: 2025-08-22T03:28:36.390Z (10 months ago)
- Topics: streamlit, streamlit-component
- Language: Python
- Homepage: https://streamlit-arborist.readthedocs.io
- Size: 475 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# streamlit-arborist
[](https://github.com/gabriel-msilva/streamlit-arborist/actions/workflows/test-build-release.yaml)
_streamlit-arborist_ is a [Streamlit](https://streamlit.io) component based on
[react-arborist](https://github.com/brimdata/react-arborist) for visualizing
hierarchical data structures as interactive tree views.
- Demo application: [st-arborist-example.streamlit.app](https://st-arborist-example.streamlit.app/)
- Documentation: [streamlit-arborist.readthedocs.io](https://streamlit-arborist.readthedocs.io/)
## Installation
```sh
pip install streamlit-arborist
```
## Basic usage
A minimal `app.py` file with sample data:
```python
from streamlit_arborist import tree_view
data = [
{
"id": "1",
"name": "Parent 1",
"children": [
{"id": "1.1", "name": "Child 1"},
{"id": "1.2", "name": "Child 2"}
]
},
{
"id": "2",
"name": "Parent 2",
"children": [
{"id": "2.1", "name": "Child 3"},
{"id": "2.2", "name": "Child 4"}
]
}
]
tree_view(data)
```
Run Streamlit:
```sh
streamlit run app.py
```
## Development
This repository is based on
[streamlit/component-template](https://github.com/streamlit/component-template) template.
Find details about
[custom components](https://docs.streamlit.io/develop/concepts/custom-components)
in Streamlit documentation.
The development environment requires
[uv](https://docs.astral.sh/uv/getting-started/installation/)
and [Node.js + npm](https://nodejs.org/en/download/current) installed.
### Setup
Install the `dev` Python environment defined in [pyproject.toml](./pyproject.toml)
and `npm` packages in [streamlit_arborist/frontend](./streamlit_arborist/frontend/):
```sh
make setup
```
### Running
While developing the frontend, set `_RELEASE = False` in [`__init__.py`](./streamlit_arborist/__init__.py).
1. Run the [app/example.py](./app/example.py) app file with Streamlit:
```sh
make backend
```
2. Start the component's frontend server:
```sh
make frontend
```
Open the app running at .
### Build
Set `_RELEASE = True` in [`__init__.py`](./streamlit_arborist/__init__.py) and run:
```sh
make build
```
### Documentation
The documentation files are located in [docs/](./docs/) directory and written with
[Sphinx](https://www.sphinx-doc.org/en/).
```sh
make docs
```