WebIDE

A modern, lightweight web-based IDE built with Rust and React.

---

✨ Features

• Monaco Editor - VS Code editing experience in the browser
• Multi-file Editing - Tabs, split views, markdown preview
• Integrated Terminal - Full PTY terminal with multiple sessions
• Git Integration - Status, commit, push, pull, branch management
• File Management - Tree view, create, rename, delete, search
• Workspace Support - Multiple isolated project workspaces
• Theme Support - Light/Dark/System theme modes
• Fast & Lightweight - Rust backend with minimal resource usage

---

📸 Screenshots

Coming soon

---

🚀 Quick Start

Using Docker (Recommended)

# Clone the repository
git clone https://github.com/your-org/web-ide.git
cd web-ide

# Start with Docker Compose
docker compose up

# Open in browser
open http://localhost:8080

Development Setup

# Terminal 1: Start Backend
cd backend
cp .env.example .env
cargo run

# Terminal 2: Start Frontend (with hot reload)
cd frontend
npm install
npm run dev

# Open http://localhost:5173

---

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                         Browser                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │  React 19 + TypeScript + Vite                       │    │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐   │    │
│  │  │ Monaco  │ │ xterm.js│ │ File    │ │ Git     │   │    │
│  │  │ Editor  │ │ Terminal│ │ Tree    │ │ Panel   │   │    │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘   │    │
│  │  ┌─────────────────────────────────────────────┐   │    │
│  │  │ Zustand State │ shadcn/ui │ Tailwind CSS    │   │    │
│  │  └─────────────────────────────────────────────┘   │    │
│  └─────────────────────────────────────────────────────┘    │
│                          │ HTTP/WS/Socket.IO                 │
└──────────────────────────┼──────────────────────────────────┘
                           │
┌──────────────────────────┼──────────────────────────────────┐
│                    Rust Backend                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │  Axum HTTP Server                                   │    │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐   │    │
│  │  │ File    │ │ Git     │ │Terminal │ │ WS      │   │    │
│  │  │ API     │ │ API     │ │ PTY     │ │ Events  │   │    │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘   │    │
│  │  ┌─────────────────────────────────────────────┐   │    │
│  │  │ SQLite   │ git2     │ portable-pty │ tokio  │   │    │
│  │  └─────────────────────────────────────────────┘   │    │
│  └─────────────────────────────────────────────────────┘    │
│                          │                                   │
└──────────────────────────┼──────────────────────────────────┘
                           │
                    ┌──────┴──────┐
                    │  Workspace  │
                    │  Directory  │
                    └─────────────┘

---

📁 Project Structure

web-ide/
├── backend/                 # Rust backend (Axum)
│   ├── src/
│   │   ├── api/            # HTTP API handlers
│   │   ├── db/             # SQLite database
│   │   ├── git/            # Git operations (git2)
│   │   ├── terminal/       # PTY terminal (portable-pty)
│   │   ├── ws/             # WebSocket handlers
│   │   └── main.rs
│   ├── migrations/         # SQLx migrations
│   └── Cargo.toml
├── frontend/               # React frontend (Vite)
│   ├── src/
│   │   ├── api/            # API client layer
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom hooks
│   │   ├── stores/         # Zustand stores
│   │   └── main.tsx
│   ├── package.json
│   └── vite.config.ts
├── docs/                   # Documentation
│   ├── README.md          # Documentation index
│   ├── backend/           # Backend architecture docs
│   └── frontend/          # Frontend architecture docs
├── docker-compose.yml
├── Dockerfile
├── CHANGELOG.md
└── README.md

---

🔧 Configuration

Backend Environment

Variable	Default	Description
PORT	8080	HTTP server port
WORKSPACE_DIR	/workspace	Base workspace directory
DATABASE_URL	sqlite:webide.db	SQLite database path
RUST_LOG	info	Log level

Frontend Environment

Variable	Default	Description
VITE_API_URL	http://localhost:8080	Backend API URL
VITE_FILE_WATCHER_ENABLED	false	Enable file watcher WebSocket

---

📡 API Overview

REST Endpoints

Endpoint	Description
GET /api/workspaces	List all workspaces
GET /api/workspaces/:key/files	List files in workspace
PUT /api/workspaces/:key/files/content	Save file
GET /api/workspaces/:key/git/status	Git status
POST /api/workspaces/:key/git/commit	Git commit

Real-time

Protocol	Endpoint	Purpose
WebSocket	/ws/:key	File watcher events
Socket.IO	/socket.io	Terminal I/O

Full API documentation: issues/ISSUES.md

---

🐳 Docker

Production

# Full stack (backend + frontend)
docker compose up webide

# Access at http://localhost:8080

Development

# Backend only + Frontend dev server with hot reload
docker compose --profile dev up

# Backend at :8080, Frontend at :5173

---

🧪 Testing

# Backend tests
cd backend
cargo test

# Frontend tests
cd frontend
npm test

---

📝 Documentation

• Issue Tracker - Current issues and backlog
• Changelog - Development history

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-feature)
3. Commit your changes (git commit -m 'Add new feature')
4. Push to the branch (git push origin feature/new-feature)
5. Open a Pull Request

---

📄 License

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

---

🙏 Acknowledgments

• Monaco Editor - Code editor
• xterm.js - Terminal emulator
• shadcn/ui - UI components
• Axum - Web framework
• git2 - Git library for Rust