streamlit-arborist 0.2.1

Streamlit component for creating tree views

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, set _RELEASE = False in __init__.py.

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

   make backend
   

2. Start the component's frontend server:

   make frontend
   

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

Build

Set _RELEASE = True in __init__.py and run:

make build

Documentation

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

make docs