🔥 BLAZE IDE — Professional Python Engine

BLAZE IDE is a modern, browser-based Python development environment powered by Pyodide (WASM runtime). It provides a smooth coding experience with a real-time execution engine, built-in terminal, file handling, and graphical output support.

---

🚀 Features

🧠 Python Engine (Pyodide)

• Runs Python directly in the browser using WebAssembly
• No backend required
• Supports libraries like matplotlib, numpy, etc.

📝 Code Editor

• Built using CodeMirror
• Syntax highlighting for Python
• Clean and responsive UI
• Download your code instantly

💻 Terminal Output

• Real-time console output
• Error handling display
• Clear terminal option

📁 File Support

• Upload .csv and .db files
• Mount files into runtime
• Download modified files
• File modification indicator

📊 Graphical Output

• Supports matplotlib
• Graphs rendered in overlay UI
• Smooth visualization experience

⚡ Modern UI/UX

• Skeleton loading screen
• Smooth animations
• Mobile responsive layout
• Clean, futuristic design

---

📂 Project Structure

BLAZE-IDE/
│
├── index.html      # Main HTML structure
├── style.css       # UI styling & animations
├── script.js       # Core logic & engine handling
├── logo.png        # App logo

---

🎨 style.css Overview

The style.css file is responsible for the complete visual design of BLAZE IDE.

Key Sections:

• Global Styles

  • CSS variables (--primary, --border, etc.)
  • Font and base layout

• Skeleton Loader

  • Shimmer animation
  • Loading UI while Pyodide initializes

• Header & Footer

  • Navigation bar styling
  • Status indicators

• Editor Panel

  • CodeMirror customization
  • Dark theme integration

• Terminal Panel

  • Console output styling
  • Scrollable logs

• Buttons & UI Components

  • Primary / Secondary buttons
  • Icons and hover effects

• File Status Bar

  • Mounted file display
  • Action icons

• Plot Overlay

  • Modal-style graph container
  • Responsive layout for charts

• Responsive Design

  • Mobile tab switching (Editor / Console)
  • Flexible layout system

---

⚙️ script.js Overview

The script.js file handles all functionality and logic of the IDE.

Core Functionalities:

🔹 Engine Initialization

• Loads Pyodide runtime
• Displays loading screen
• Enables "Run" button after ready

🔹 Code Execution

• Runs Python code from editor
• Captures stdout & stderr
• Displays output in terminal

🔹 Editor Setup

• Initializes CodeMirror
• Syncs content with execution engine

🔹 Terminal Management

• Print output dynamically
• Clear console feature

🔹 File Handling

• Upload and mount files into Pyodide
• Track file changes
• Download/remove files

🔹 Graph Rendering

• Detects matplotlib usage
• Renders plots in overlay (#plot-overlay)
• Close/open plot UI

🔹 UI Controls

• Tab switching (mobile view)
• Button state updates
• Status indicators (Engine loading, ready)

---

🛠️ How to Run

1. Download or clone the project
2. Keep all files in the same directory
3. Open index.html in your browser

⚠️ First load may take time due to Pyodide caching

---

📌 Requirements

• Modern browser (Chrome, Edge, Firefox)
• Internet connection (for CDN resources)

---

🌟 Future Improvements

• Multi-file support
• Auto-save projects
• Package installer UI (pip support)
• Themes customization
• AI code assistant integration (BlazeAI 👀)

---

👨‍💻 Author

Nandhakumar B Data Entry Specialist & Web Developer India 🇮🇳

---

💡 Inspiration

Built to create a fast, powerful, and fully client-side Python IDE with a modern developer experience.