Skip to content

README.md

Latest commit

 

History

History
184 lines (128 loc) · 3.78 KB

README.md

File metadata and controls

184 lines (128 loc) · 3.78 KB

VoidCode Ace – 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 Ace 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. Open the standalone build:
dist/voidcode-ace.html
  1. Run it in any modern browser
  • Works offline
  • No installation required

Option 2 — Development Mode

  1. Clone the repository
  2. Open:
src/index.html
  1. Edit files inside the src/ directory
  2. Build the project when needed:
python scripts/build.py

Recommended for development, customization, and learning.

Features

  • Ace 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-ace/
│
├── index.html              # Entry / landing page (if used)
│
├── src/                    # Development source code
│   ├── index.html
│   ├── script.js
│   └── style.css
│
├── dist/                   # Final build (for users)
│   └── voidcode-ace.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)
  • Ace 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

Try it here: https://akpandey-dev.github.io/voidcode-ace

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.