🎨 Streamlit Theta - Open Source Visual Editors Suite for Streamlit

Open source Streamlit Editor suite for documents, presentations, spreadsheets, and custom modules. Enhance your Streamlit apps with visual editing tools.

Streamlit Theta provides twelve powerful, interactive visual editors that bring modern editing experiences directly to your web applications. Create presentations, documents, spreadsheets, charts, images, forms, mind maps, diagrams, newsletters, and more with intuitive drag-and-drop interfaces and flexible formatting tools.

🎉 Version 1.0.4 - Fully refactored with comprehensive fixes! All critical issues resolved and stability greatly improved.

🛠️ Recent Fixes:

✅ Issue #1: CSV and Spreadsheet editor buttons now fully responsive

✅ Issue #2: PowerPoint canvas positioning completely fixed

✅ Issue #3: Enhanced download functionality with multiple formats

✅ Stability: Comprehensive error handling and input validation added

✅ Documentation: Extensive code documentation and comments added

✨ Features

🎯 Slide Editor - Visual presentation editor
📝 Word Editor - Document editor with rich formatting
📊 Spreadsheet Editor - Full-featured spreadsheet with formulas and cell navigation
📋 CSV Editor - Data table editor with import/export functionality
🎵 Audio Editor - Audio player with effects and playback controls
🎬 Video Editor - Video player with filters, effects, and timeline controls
📈 Chart Editor - Interactive chart and graph creation tool
🖼️ Image Editor - Image manipulation and editing suite
📝 Form Builder - Drag-and-drop form creation tool
🧠 Mind Map Editor - Visual mind mapping and brainstorming tool
📐 Diagram Editor - Flowchart and diagram creation tool
📧 Newsletter Editor - Email and newsletter design tool

🚀 Key Capabilities

Modern UI/UX - Clean, intuitive interfaces
Real-time Editing - Instant visual feedback and live updates
File Downloads - Save work directly to your computer in standard formats
Drag & Drop - Intuitive element manipulation (slides, text, etc.)
Rich Formatting - Comprehensive text styling and layout options
Cross-Platform - Works on Windows, Mac, and Linux
Mobile Responsive - Adapts to different screen sizes

📦 Installation

Via pip (Recommended)

pip install streamlit-theta

From Source

git clone https://github.com/CelsiaSolaraStarflare/Streamlit-Theta.git
cd Streamlit-Theta
pip install -e .

From source

git clone https://github.com/your-repo/streamlit-theta
cd streamlit-theta
pip install -e .

🛠️ Recent Fixes & Improvements (v1.0.4)

✅ Issue #1: CSV and Spreadsheet Responsiveness FIXED

Problem: Add/delete row/column buttons were not responding
Solution:
- Added comprehensive error handling to JavaScript functions
- Improved DOM manipulation and table rendering
- Enhanced grid updates for dynamic content changes
- Added proper validation for array operations

✅ Issue #2: PowerPoint Canvas Positioning FIXED

Problem: Elements would shift out of position relative to screen proportions
Solution:
- Implemented canvas-relative positioning system
- Fixed zoom calculations for accurate positioning
- Added boundary constraints to keep elements within canvas bounds
- Improved drag and resize operations

✅ Issue #3: Download Functionality ENHANCED

Problem: Downloads needed better file format support
Solution:
- Enhanced CSV/spreadsheet export with better formatting
- Added HTML export format for PowerPoint presentations
- Improved error handling for download operations
- Added timestamped filenames to prevent conflicts

🔒 Additional Improvements

Security: Comprehensive input validation and sanitization
Stability: Robust error handling throughout the codebase
Documentation: Extensive code documentation and inline comments
Testing: Comprehensive test suite covering all functionality

🚀 Quick Start

Demo Application

Test all the fixes and improvements:

git clone https://github.com/CelsiaSolaraStarflare/Streamlit-Theta.git
cd Streamlit-Theta
streamlit run demo.py

```python
import streamlit as st
import streamlit_theta

st.title("My App with Professional Editors")

# Slide Editor - Create presentations
slides = streamlit_theta.slide_editor(
    slides=[],
    width=900,
    height=600
)

# Word Editor - Rich text documents
document = streamlit_theta.word_editor(
    content="<h1>Welcome</h1><p>Start typing here...</p>",
    width=800,
    height=600
)

# Excel Editor - Spreadsheets with formulas
spreadsheet = streamlit_theta.excel_editor(
    data=[["Name", "Age"], ["Alice", "25"], ["Bob", "30"]],
    width=900,
    height=500
)

# Chart Editor - Interactive charts and graphs
chart_data = streamlit_theta.chart_editor(
    width=900,
    height=600
)

# Form Builder - Create custom forms
form_config = streamlit_theta.form_builder(
    width=900,
    height=700
)

# Mind Map Editor - Visual brainstorming
mindmap_data = streamlit_theta.mindmap_editor(
    width=1000,
    height=700
)

📖 Detailed Usage

🎯 Slide Editor

Create PowerPoint/Keynote-style presentations with drag-and-drop elements:

import streamlit_theta

# Initialize with sample data
initial_slides = [
    {
        "id": "slide_1",
        "title": "Welcome Slide",
        "elements": [
            {
                "type": "text",
                "id": "title_1",
                "content": "My Presentation",
                "x": 50, "y": 100,
                "width": 500, "height": 80,
                "fontSize": 36,
                "fontFamily": "Arial",
                "color": "#000000",
                "bold": True
            }
        ],
        "background": "#ffffff"
    }
]

# Create the editor
slides = streamlit_theta.slide_editor(
    slides=initial_slides,
    width=900,
    height=600
)

Features:

Drag-and-drop text elements
Real-time property editing (fonts, colors, sizes)
Multiple slide support
Professional slide thumbnails
Downloads as JSON with complete presentation data

📝 Word Editor

Microsoft Word-style document editing with rich formatting:

# Rich HTML content supported
content = """
<h1>Document Title</h1>
<p>This is a <strong>bold</strong> paragraph with <em>italic</em> text.</p>
<ul>
    <li>Bullet point 1</li>
    <li>Bullet point 2</li>
</ul>
"""

document = streamlit_theta.word_editor(
    content=content,
    width=800,
    height=600
)

Features:

WYSIWYG editing with toolbar
Font selection and sizing
Text formatting (bold, italic, underline)
Paragraph alignment and spacing
A4 page layout with proper margins
Live word and character count
Downloads as HTML with embedded styling

📊 Excel Editor

Full-featured spreadsheet with Excel-like functionality:

# Sample spreadsheet data
data = [
    ["Product", "Price", "Quantity", "Total"],
    ["Widget A", "10.50", "5", "=B2*C2"],
    ["Widget B", "15.75", "3", "=B3*C3"],
    ["TOTAL", "", "", "=SUM(D2:D3)"]
]

spreadsheet = streamlit_theta.excel_editor(
    data=data,
    width=900,
    height=500
)

Features:

26 columns (A-Z) with unlimited rows
Cell navigation with arrow keys
Formula bar for data entry
Add/remove rows and columns
Cell formatting options
Downloads as CSV with clean data export

📋 CSV Editor

Data table editor with import/export capabilities:

# Table data with headers
data = [
    ["Name", "Age", "City"],
    ["Alice", "25", "New York"],
    ["Bob", "30", "Los Angeles"]
]

headers = ["Name", "Age", "City"]

csv_result = streamlit_theta.csv_editor(
    data=data,
    headers=headers,
    width=900,
    height=500
)

Features:

Editable headers and data cells
Add/remove rows and columns
CSV file import functionality
Data validation and cleaning
Downloads as CSV with headers and proper formatting

🎵 Audio Editor

Audio player with effects and controls:

audio_settings = streamlit_theta.audio_editor(
    width=800,
    height=400
)

Features:

File upload support (MP3, WAV, OGG, etc.)
Playback controls (play, pause, stop, seek)
Volume and speed adjustment
Pitch shifting controls
Waveform visualization
Downloads audio settings as JSON

🎬 Video Editor

Video player with filters and effects:

video_settings = streamlit_theta.video_editor(
    width=900,
    height=600
)

Features:

Video file upload (MP4, WebM, etc.)
Playback controls with timeline
Visual effects (brightness, contrast, saturation)
Color filters (grayscale, sepia, blur)
Timeline scrubbing
Downloads video settings as JSON

📈 Chart Editor

Interactive chart and graph creation tool with multiple chart types:

chart_data = streamlit_theta.chart_editor(
    width=900,
    height=600
)

Features:

Multiple chart types (line, bar, pie, scatter, area)
Interactive data input and editing
Customizable colors, labels, and legends
Real-time chart preview
Export options for charts
Downloads chart data as JSON

🖼️ Image Editor

Comprehensive image manipulation and editing suite:

image_settings = streamlit_theta.image_editor(
    width=800,
    height=600
)

Features:

Image upload and basic editing tools
Filters and effects (brightness, contrast, saturation)
Crop, resize, and rotate functionality
Drawing tools and annotations
Layer management
Downloads edited image settings as JSON

📝 Form Builder

Drag-and-drop form creation tool for interactive forms:

form_config = streamlit_theta.form_builder(
    width=900,
    height=700
)

Features:

Drag-and-drop form elements (input, select, checkbox, radio)
Real-time form preview
Field validation rules
Custom styling options
Form submission handling
Downloads form configuration as JSON

🧠 Mind Map Editor

Visual mind mapping and brainstorming tool:

mindmap_data = streamlit_theta.mindmap_editor(
    width=1000,
    height=700
)

Features:

Interactive node creation and editing
Hierarchical mind map structure
Customizable node colors and styles
Connection lines and relationships
Zoom and pan functionality
Downloads mind map data as JSON

📐 Diagram Editor

Professional flowchart and diagram creation tool:

diagram_data = streamlit_theta.diagram_editor(
    width=1000,
    height=700
)

Features:

Flowchart shapes and connectors
Drag-and-drop interface
Multiple diagram types (flowchart, org chart, network)
Shape styling and customization
Auto-layout and alignment tools
Downloads diagram data as JSON

📧 Newsletter Editor

Email and newsletter design tool with professional templates:

newsletter_content = streamlit_theta.newsletter_editor(
    width=900,
    height=800
)

Features:

Professional email templates
Drag-and-drop content blocks
Rich text editing
Image and media insertion
Mobile-responsive design
Downloads newsletter HTML

💾 Download Functionality

All editors support downloading your work in professional formats:

Editor	Format	File Name Pattern	Content
Slide	JSON	`presentation_YYYY-MM-DD-HHMMSS.json`	Complete presentation data
Word	HTML	`document_YYYY-MM-DD-HHMMSS.html`	Formatted document with styles
Excel	CSV	`spreadsheet_YYYY-MM-DD-HHMMSS.csv`	Clean spreadsheet data
CSV	CSV	`data_YYYY-MM-DD-HHMMSS.csv`	Table data with headers
Audio	JSON	`audio-settings_YYYY-MM-DD-HHMMSS.json`	Audio configuration
Video	JSON	`video-settings_YYYY-MM-DD-HHMMSS.json`	Video settings and effects
Chart	JSON	`chart-data_YYYY-MM-DD-HHMMSS.json`	Chart configuration and data
Image	JSON	`image-settings_YYYY-MM-DD-HHMMSS.json`	Image editing settings
Form	JSON	`form-config_YYYY-MM-DD-HHMMSS.json`	Form structure and validation
Mind Map	JSON	`mindmap_YYYY-MM-DD-HHMMSS.json`	Mind map nodes and connections
Diagram	JSON	`diagram_YYYY-MM-DD-HHMMSS.json`	Diagram shapes and flow
Newsletter	HTML	`newsletter_YYYY-MM-DD-HHMMSS.html`	Complete newsletter HTML

Download Features:

✅ Automatic timestamps prevent file overwrites
✅ Standard formats compatible with other applications
✅ Client-side processing - no data sent to servers
✅ Instant downloads - files appear in your Downloads folder
✅ Cross-platform - works on all operating systems
✅ No dependencies - uses native browser APIs
✅ Production ready - thoroughly tested and stable

🎮 Demo Application

Run the comprehensive demo to try all editors:

# Clone and install
git clone https://github.com/your-repo/streamlit-theta
cd streamlit-theta
pip install -e .

# Run the demo
streamlit run theta_demo.py

The demo includes:

Interactive examples for all 12 editors
Sample data and templates
Feature demonstrations
Download testing
Usage instructions

🔧 API Reference

Common Parameters

All editors support these common parameters:

width: int - Editor width in pixels (default: varies by editor)
height: int - Editor height in pixels (default: varies by editor)
key: str - Unique component key (optional, for advanced use)

Return Values

Due to Streamlit version compatibility, editors return DeltaGenerator objects rather than data. Use the download functionality to save your work in standard formats.

🔗 Integration Examples

With Streamlit Pages

import streamlit as st
import streamlit_theta

# Multi-page app
pages = {
    "Presentations": lambda: streamlit_theta.slide_editor(width=900, height=600),
    "Documents": lambda: streamlit_theta.word_editor(width=800, height=600),
    "Spreadsheets": lambda: streamlit_theta.excel_editor(width=900, height=500)
}

selected_page = st.sidebar.selectbox("Choose Editor", list(pages.keys()))
pages[selected_page]()

With Custom Styling

# Custom CSS for editor container
st.markdown("""
<style>
.theta-editor-container {
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    padding: 20px;
    background: #f8f9fa;
}
</style>
""", unsafe_allow_html=True)

with st.container():
    st.markdown('<div class="theta-editor-container">', unsafe_allow_html=True)
    streamlit_theta.word_editor(width=800, height=500)
    st.markdown('</div>', unsafe_allow_html=True)

🏗️ Architecture

Technology Stack

Frontend: HTML5, CSS3, JavaScript (ES6+)
Backend: Python 3.7+ with Streamlit Components API
Styling: Modern CSS with Flexbox/Grid layouts
File Handling: Blob API for client-side downloads
Browser Support: Chrome, Firefox, Safari, Edge (modern versions)

Component Structure

streamlit_theta/
├── __init__.py          # Main package exports
└── editor/
    ├── __init__.py      # Editor exports
    ├── slide.py         # Slide editor component
    ├── word.py          # Word editor component
    ├── excel.py         # Excel editor component
    ├── csv.py           # CSV editor component
    ├── audio.py         # Audio editor component
    └── video.py         # Video editor component

🔒 Security & Privacy

Client-side processing - All editing happens in your browser
No data transmission - Files are created and downloaded locally
No server storage - Nothing is saved on external servers
Standard formats - Uses common file types (HTML, CSV, JSON)

🐛 Troubleshooting

Common Issues

Import Error: ModuleNotFoundError: No module named 'streamlit_theta'

# Ensure package is installed
pip install -e . 
# or
pip install streamlit-theta

Download Not Working: Files not downloading to computer

Check browser popup blockers
Ensure JavaScript is enabled
Try in an incognito/private window
Check your browser's Downloads folder
Verify file permissions in download directory

Component Not Displaying: Blank space where editor should be

Check browser console for JavaScript errors
Ensure Streamlit version compatibility (1.0+)
Try refreshing the page

Browser Compatibility

Browser	Version	Support
Chrome	90+	✅ Full
Firefox	88+	✅ Full
Safari	14+	✅ Full
Edge	90+	✅ Full

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📧 Support

Documentation: Check this README and inline code comments
Issues: Open an issue on GitHub for bugs or feature requests
Discussions: Use GitHub Discussions for questions and ideas

🚗 Roadmap

File Import - Load existing files into editors
Template System - Pre-built templates for common use cases
Collaboration - Real-time collaborative editing
Export Options - Additional export formats (PDF, DOCX, XLSX)
Plugin System - Custom editor extensions
Cloud Storage - Integration with cloud storage providers

Built with ❤️ by CelsiaSolaraStarflare

Transform your Streamlit apps with open source visual editing capabilities that your users will love!

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.github/workflows		.github/workflows
streamlit_theta.egg-info		streamlit_theta.egg-info
streamlit_theta		streamlit_theta
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
COMPLETE_SETUP_GUIDE.md		COMPLETE_SETUP_GUIDE.md
ENHANCEMENT_DETAILS.md		ENHANCEMENT_DETAILS.md
ENHANCEMENT_SUMMARY.md		ENHANCEMENT_SUMMARY.md
LICENSE		LICENSE
MANIFEST.in		MANIFEST.in
README.md		README.md
build_and_install.py		build_and_install.py
demo.py		demo.py
enhanced_demo.py		enhanced_demo.py
pyproject.toml		pyproject.toml
version_manager.py		version_manager.py

Folders and files

Latest commit

History

Repository files navigation

🎨 Streamlit Theta - Open Source Visual Editors Suite for Streamlit

✨ Features

🚀 Key Capabilities

📦 Installation

Via pip (Recommended)

From Source

From source

🛠️ Recent Fixes & Improvements (v1.0.4)

✅ Issue #1: CSV and Spreadsheet Responsiveness FIXED

✅ Issue #2: PowerPoint Canvas Positioning FIXED

✅ Issue #3: Download Functionality ENHANCED

🔒 Additional Improvements

🚀 Quick Start

Demo Application

📖 Detailed Usage

🎯 Slide Editor

📝 Word Editor

📊 Excel Editor

📋 CSV Editor

🎵 Audio Editor

🎬 Video Editor

📈 Chart Editor

🖼️ Image Editor

📝 Form Builder

🧠 Mind Map Editor

📐 Diagram Editor

📧 Newsletter Editor

💾 Download Functionality

Download Features:

🎮 Demo Application

🔧 API Reference

Common Parameters

Return Values

🔗 Integration Examples

With Streamlit Pages

With Custom Styling

🏗️ Architecture

Technology Stack

Component Structure

🔒 Security & Privacy

🐛 Troubleshooting

Common Issues

Browser Compatibility

📄 License

🤝 Contributing

📧 Support

🚗 Roadmap

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 2

Languages

Packages