CodeCanvas

A high-performance, browser-based sandbox combining a multi-language client-side code editor, real-time live preview, and an interactive spatial whiteboard for architecture planning and UI mockups.

---

Overview

Modern web prototyping often suffers from context-switching between separate diagramming tools, code editors, and preview windows. CodeCanvas solves this by unifying a real-time reactive sandbox with an architectural whiteboard directly in the browser with zero build steps or server dependencies.

Key Capabilities

• Unified Dual-Pane Workspace: Code side-by-side with your architectural sketchpad without switching tabs.
• Client-Side Live Execution: Zero-latency compilation and real-time execution in an isolated sandbox iframe.
• Infinite Architecture Canvas: Integrated spatial whiteboard for wireframing, component diagrams, and logic flows.
• Zero Backend Footprint: Fully static single-page architecture that runs entirely client-side via GitHub Pages.

System Architecture

+-------------------------------------------------------------+
|                         CodeCanvas                          |
|                                                             |
|   +-----------------------+     +-----------------------+   |
|   |   Monaco/Code Editor  |     |  Interactive Whiteboard|   |
|   |   (HTML / CSS / JS)   |     |  (Spatial Vector Pan) |   |
|   +-----------------------+     +-----------------------+   |
|               |                             |               |
|               +--------------+--------------+               |
|                              |                              |
|                              v                              |
|               +-----------------------------+               |
|               |    Isolated Sandboxed DOM   |               |
|               |    (Live Reactive Preview)  |               |
|               +-----------------------------+               |
+-------------------------------------------------------------+

Tech Stack

• Core Runtime: Modern Vanilla JavaScript (ES6+), HTML5 Canvas API
• Styling: Responsive CSS3 / Modern Flex & Grid UI
• Deployment: GitHub Pages CI/CD

Getting Started

Online Demo

Open the live deployment directly in your browser:
https://prashanth-karanam.github.io/CodeCanvas/

Local Setup

No build tools, bundlers, or npm install required:

git clone https://github.com/prashanth-karanam/CodeCanvas.git
cd CodeCanvas
# Open index.html directly or serve locally:
python -m http.server 8000

Then visit http://localhost:8000 in your browser.

Roadmap

• Export canvas diagrams to PNG/SVG
• LocalStorage state persistence for multi-project workflows
• Syntax autocomplete & multi-theme toggle

License

This project is licensed under the MIT License.