I Built 4 Streamlit Custom Components for Mathematical Optimization (and Published Them on PyPI)

Custom Components
,
1

I developed four Streamlit custom components—three focused on mathematical optimization visualization and one for web embedding—and packaged each as a standalone PyPI library. This post walks through what I built, why I built it, and how you can use them in your own projects.

Background: The Gap Between Optimization Algorithms and Real Users

Mathematical optimization (MO) is a powerful method for solving real-world decision-making problems—delivery routing, production scheduling, workforce assignment. Yet despite decades of academic research, MO remains largely inaccessible to practitioners without specialized knowledge.

I’ve spent years trying to close this gap: building Streamlit apps for MO problems, teaching Operations Research at Hosei University, and publishing tutorials on Qiita. Along the way, I kept running into the same limitation: Streamlit’s built-in components weren’t designed for the specific visual interactions that MO education and practice require.

That’s why I decided to build my own.

What I Built

1. streamlit-feasible-region — Linear Programming Feasible Region Visualizer

The problem it solves: When teaching linear programming, the hardest concept to convey is how constraints shape the feasible region. Static diagrams don’t cut it—students need to manipulate constraints and watch the region change in real time.

What it does:

  • Drag constraint lines interactively on a 2D canvas
  • Adjust coefficients a, b, c via sliders
  • Toggle constraints on/off
  • Add or remove constraints dynamically
  • Display feasible region area
  • Show warnings when the feasible region becomes empty (infeasible)

Who it’s for: Educators teaching linear programming, students building intuition for constraint geometry, practitioners validating model formulations.

import streamlit as st
from streamlit_feasible_region import feasible_region

result = feasible_region(
    constraints=[
        {"a": 1, "b": 1, "c": 4},
        {"a": 2, "b": 1, "c": 6}
    ]
)
st.write(result)

2. streamlit-gantt-chart-editor — Interactive Gantt Chart

The problem it solves: Scheduling problems produce task assignments as data—but reviewing and tweaking a schedule in a plain dataframe is unintuitive. Users need to see the timeline and edit it visually.

What it does:

  • Display tasks as an editable Gantt chart
  • Edit task names, assignees, durations, and progress rates interactively
  • Return edited results to Python for downstream processing (e.g., re-optimization)

Who it’s for: Operations researchers building scheduling apps, project managers prototyping planning tools, anyone who wants a visual schedule editor inside a Streamlit app.

from streamlit_gantt_chart_editor import gantt_chart_editor

tasks = [
    {"task": "Design", "assignee": "Alice", "start": "2026-01-01", "end": "2026-01-05", "progress": 100},
    {"task": "Build",  "assignee": "Bob",   "start": "2026-01-06", "end": "2026-01-15", "progress": 60},
]

updated_tasks = gantt_chart_editor(tasks)
st.dataframe(updated_tasks)

3. streamlit-network-graph-editor — Graph Editor with Dijkstra Shortest Path

The problem it solves: Network optimization problems (shortest path, routing, flow) are best understood visually—but there’s no easy way to let users build and edit a graph inside a Streamlit app and immediately see the optimal path.

What it does:

  • Add, delete, and edit nodes and edges interactively
  • Drag nodes to reposition them on the canvas
  • Handle directed weighted graphs
  • Compute shortest path between selected nodes using Dijkstra’s algorithm
  • Visualize the shortest path with distance display

Who it’s for: Data scientists demonstrating routing algorithms, educators teaching graph theory, engineers prototyping network analysis tools.

from streamlit_network_graph_editor import network_graph_editor

result = network_graph_editor(
    nodes=[{"id": "A"}, {"id": "B"}, {"id": "C"}],
    edges=[{"from": "A", "to": "B", "weight": 2},
           {"from": "B", "to": "C", "weight": 3}]
)
st.write("Shortest path:", result["shortest_path"])
st.write("Distance:", result["distance"])

4. streamlit-web-page-viewer — iframe Web Page Embedder

The problem it solves: When building reference dashboards or documentation apps, it’s useful to embed external web pages directly within a Streamlit app—without forcing users to open a new tab.

What it does:

  • Accept URL input and normalize it
  • Embed the target page via iframe
  • Return display state to Python

Important note: Some sites block iframe embedding via X-Frame-Options or Content-Security-Policy headers. This is a browser security constraint, not a component bug—and the component handles this gracefully with a user-facing message.

from streamlit_web_page_viewer import web_page_viewer

result = web_page_viewer(url="https://example.com")
st.write("Display state:", result)

Architecture: One Pattern for All Four Components

All four components follow the same architecture:

React Frontend
      ↓
Python Wrapper (st.components.v1)
      ↓
PyPI Package
      ↓
Streamlit App

This separation of concerns means:

  • Component libraries are independently versioned and reusable across projects
  • App code stays clean—just pip install and import
  • Local development uses editable install (pip install -e .) for instant feedback
  • Production deployment simply swaps the editable reference for the PyPI package name

A run_app.ps1 PowerShell script in each app folder handles environment setup and launch in one command:

# run_app.ps1
python -m pip install --upgrade pip
python -m pip install -r requirements.txt
python -m streamlit run app.py

Why Package as PyPI Libraries?

When I first built these components, they lived inside individual app folders. Every time I wanted to reuse a component in a new app, I was copying files manually—a maintenance nightmare.

Packaging as PyPI libraries solved this:

Before (copy-paste) After (PyPI library)
Duplicate code across projects Single source of truth
Manual updates in each app pip install --upgrade
Hard to share with others pip install streamlit-feasible-region
No versioning Semantic versioning

The investment in packaging pays off quickly once you’re building more than one app in the same domain.

Real-World Impact

These components didn’t stay as experiments. They’ve been deployed in:

  • Education: Used in Operations Research lectures at Hosei University (112 students/year) to demonstrate LP feasible regions and shortest-path algorithms interactively
  • Community events: The network graph editor was featured at Streamlit Meetup Tokyo 2026 and PyCon JP 2025
  • Corporate prototypes: The Gantt chart editor has been used to prototype scheduling optimization tools for telecom infrastructure maintenance

Try It Yourself

Install any component with pip:

pip install streamlit-feasible-region
pip install streamlit-gantt-chart-editor
pip install streamlit-network-graph-editor
pip install streamlit-web-page-viewer

Full source code and sample apps are available on GitHub:
:backhand_index_pointing_right: mshdtksk · GitHub

What’s Next

  1. Input validation and error handling improvements across all four components
  2. Sample data and expanded documentation for each library
  3. CI/CD pipeline for automated build verification and PyPI release
  4. English + Japanese bilingual tutorials on YouTube covering each component

If you’re working on mathematical optimization apps with Streamlit and have feature requests or feedback, I’d love to hear from you—drop a comment below or reach out on the Streamlit forum (@masahide).

About the Author

Masahide TAKASUKA — Data Scientist at NTT West Japan, Operations Research lecturer at Hosei University, PhD in Informatics (Nagoya University). Organizer of the SnowVillage Streamlit Channel and Mathematical Optimization Research Group. Passionate about bridging the gap between academic optimization research and real-world deployment.

Thank you!!

2 Likes