Streamlit Plot Explorer — Project Roadmap

A visually structured roadmap for the Streamlit Plot Explorer project, showcasing its phased development with tasks, deliverables, and progress tracking. Built using HTML, CSS, Plotly.js, and CodeMirror.

---

Overview

Streamlit Plot Explorer is a web-based tool designed to explore and render Streamlit chart types in an interactive and developer-friendly interface. The project is organized into 3 phases with a total of ~18 tasks, providing incremental features from a static chart viewer to a fully interactive editing and exporting environment.

Current Status

• Phase 1: In Progress — Foundation & Static Viewer
• Stack: HTML · JS · Plotly · CodeMirror

---

Project Phases

Phase 1 — Foundation & Static Viewer (Active)

Description:
Core layout scaffolding, a curated set of Streamlit chart types rendered via Plotly.js, syntax-highlighted code panels, and a polished navigation sidebar. Everything is read-only — the live editing layer comes in Phase 2.

Key Features / Tasks:

• Layout & Design

  • Two-panel layout — syntax-highlighted code on the left, live chart on the right
  • Sidebar navigator with chart type categories and search filter
  • Responsive design with collapsible sidebar on mobile

• Chart Gallery

  • 6 initial chart types: Line, Bar, Scatter, Area, Histogram, Pie
  • Plotly.js rendering to visually match Streamlit's chart output
  • Streamlit Python code snippets with syntax highlighting

Deliverables:

• app_phase1.html
• Plotly.js charts
• Static code viewer
• 6 chart types

---

Phase 2 — Live Code Editing (Upcoming)

Description:
Transform the read-only code pane into a fully editable CodeMirror editor. Code changes trigger instant chart re-renders via a Python → Plotly bridge, with error handling and a status console.

Planned Features / Tasks:

• Code Editor

  • Integrate CodeMirror 6 with Python language support and theme
  • Debounced live updates (re-render the chart on code change)
  • Inline error highlighting and bottom console for parse errors

• Expanded Chart Library

  • Add Heatmap, Box plot, Violin, and 3D Scatter chart types
  • Streamlit widget stubs (st.slider, st.selectbox, st.checkbox)
  • Reset to default code button with animated diff highlight

Deliverables:

• CodeMirror editor
• Live re-render
• Error console
• 10+ chart types

---

Phase 3 — Polish & Advanced Features (Upcoming)

Description:
Export, sharing, performance, and a Streamlit-accurate widget layer. The finished product aims to be a first-class developer reference tool.

Planned Features / Tasks:

• Export & Sharing

  • Export charts as PNG / SVG / interactive HTML
  • Shareable URLs encoding current code and chart type
  • Copy-to-clipboard button for code snippets

• Performance & Quality

  • Lazy-load Plotly chart modules to reduce initial bundle size
  • Full Streamlit color theme — dark and light mode toggles
  • Full-screen chart view with presentation mode

Deliverables:

• Export PNG/SVG
• Share URLs
• Theme switcher
• Presentation mode

---

Summary

Metric	Count
Phases	3
Total tasks	18
Chart types in Phase 1	6

---

Project Layout

• HTML / JS: Core static and interactive components
• Plotly.js: Render charts in browser
• CodeMirror: Editable code panels (Phase 2+)
• CSS: Custom dark theme with grid and timeline layout

---

License

MIT License © 2026

---

Note: Phase 1 is currently in progress. Future phases will introduce live code editing, advanced chart types, and export/sharing capabilities.