streamlit-arborist

streamlit-arborist

streamlit-arborist is a Streamlit component based on react-arborist for visualizing hierarchical data structures as interactive tree views.

• Demo application: st-arborist-example.streamlit.app
• Documentation: streamlit-arborist.readthedocs.io

Installation

pip install streamlit-arborist

Basic usage

A minimal app.py file with sample data:

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:

streamlit run app.py

Development

This repository is based on streamlit/component-template template. Find details about custom components in Streamlit documentation.

The development environment requires uv and Node.js + npm installed.

Setup

Install the dev Python environment defined in pyproject.toml and npm packages in streamlit_arborist/frontend:

make setup

Running

While developing the frontend, you must set the environment variable STREAMLIT_ARBORIST_DEV=true. (this is done in make commands)

• Run the app/example.py app file with Streamlit:

  make backend
  

• Start the component's frontend server:

  make frontend
  

Open the app running at http://localhost:8501.

Build

Build the React frontend at streamlit_arborist/frontend/build/ directory and the Python package wheels at dist/.

make build

Documentation

The documentation files are located in docs/ directory and written with Sphinx.

make docs