VoidCode Monaco – Lightweight Web Code Editor

A lightweight, browser-based code editor built using pure HTML, CSS, and JavaScript. It focuses on multi-language editing, clean DOM-based logic, and a modular structure that keeps the project easy to read, modify, and extend.

VoidCode Monaco runs fully offline, adapts smoothly to different screen sizes, and can be used instantly in any modern browser. It follows a structured versioning approach with both standalone and modular builds, making it suitable for learning, experimentation, and iterative development.

---

⚠️ Disclaimer This project is currently under active development. It is not fully stable, and some features may be incomplete or behave inconsistently. Minor bugs, edge cases, or logic gaps may exist and are intentionally left as opportunities for exploration, debugging, and improvement.

---

🚀 Usage

🟢 Option 1 — Quick Use (Recommended)

1. Download the standalone build:

dist/voidcode-monaco.html

2. Open it in any modern browser

• Works offline
• No installation required

---

🧪 Option 2 — Development Mode

1. Clone the repository
2. Open:

src/index.html

3. Edit files inside the src/ directory
4. Build the project when needed:

python scripts/build.py

Recommended for development, customization, and learning.

---

✨ Features

• Monaco Editor integration

  • Syntax highlighting
  • Autocompletion
  • Snippets
  • Command palette

• Multi-language support

• Runtime language switching

• File operations

  • Open local files
  • Save files locally
  • Create new files

• Clipboard operations (copy, cut, paste with fallback handling)

• Editor controls

  • Font size adjustment
  • Word wrap toggle
  • Go to line
  • Theme switching
  • Fullscreen mode

• HTML execution

  • Run in new tab
  • Run inside iframe preview

• Keyboard shortcuts for faster workflow

• Fully client-side execution

• Offline support (once cached)

---

🏗 Project Structure

voidcode-monaco/
│
├── index.html              # Entry / landing page (if used)
│
├── src/                    # Development source code
│   ├── index.html
│   ├── script.js
│   └── style.css
│
├── dist/                   # Final build (for users)
│   └── voidcode-monaco.html   # Single-file app
│
├── scripts/                # Build tools
│   └── build.py
│
├── versions/               # Versioned releases / archives
│
├── README.md
├── LICENSE
└── .gitignore

---

⚙️ Build System

python scripts/build.py

This will:

• Combine HTML, CSS, and JavaScript
• Bundle everything into a single file
• Output the final build into the dist/ directory

---

🧠 Architecture Overview

This project uses two modes:

🟢 Development Mode

• Modular structure inside src/
• Easier debugging and editing
• Ideal for learning and extending editor logic

🔵 Production Mode

• Single-file build inside dist/
• Fully portable
• Offline-ready with no dependencies

The build script transforms modular source files into a self-contained HTML file for distribution.

---

🧰 Technology Stack

• HTML5
• CSS3
• Vanilla JavaScript (DOM manipulation)
• Monaco Editor (client-side engine)

---

⚠️ Limitations

• Not a full IDE
• No backend execution for non-HTML languages
• No project/file tree system
• Limited persistence features
• Some features may be experimental or incomplete
• Browser behavior may vary across environments
• UI is intentionally minimal for clarity and learning

---

🌐 Live Demo

https://akpandey-dev.github.io/voidcode-monaco

---

🤝 Contributing

• Open for learning and experimentation
• Bugs may exist due to ongoing development
• Improvements, suggestions, and fixes are welcome

---

📜 License

This project is open for learning, modification, and experimentation.