OpenPad

A modern, open-source online IDE with real-time collaboration, instant code execution, and zero setup required.

Overview

OpenPad is a full-featured cloud IDE packed into your browser. Write, run, share, and collaborate on code without installing anything. Built with modern technologies including Spring Boot, React, and Monaco Editor.

OpenPad is an open-source alternative to CodePad, offering similar functionality for writing, running, and collaborating on code online, but with complete transparency and community-driven development. Unlike proprietary solutions, OpenPad gives you full control over your data and the ability to self-host.

Screenshots

Home Page

Code Editor in Action

Features

Code Execution

• Multi-language support: Java, Python, C++, PHP, and HTML/CSS/JavaScript
• Instant execution: Run code directly in the browser with cloud-powered execution
• Real-time output: See results instantly as your code runs

Real-time Collaboration

• Live cursors: See where your collaborators are editing in real-time
• Presence indicators: Know who's online and actively editing
• CRDT-powered sync: Conflict-free editing with automatic synchronization
• Built-in live chat: Discuss code changes without leaving the editor

Editor Features

• Monaco Editor: VS Code-quality editing experience
• Syntax highlighting: Full support for all supported languages
• Autocomplete: Intelligent code completion
• Bracket colorization: Easy code navigation
• Minimap: Quick code overview

Code Management

• Code snapshots: Save and restore code at any point
• Visual diff viewer: Compare changes between snapshots
• Multi-file projects: Build full projects with multiple files
• Markdown preview: Write documentation with live-rendered preview

Sharing & Visibility

• Unique URLs: Every pad gets a shareable link
• Embed support: Embed your code anywhere with an iframe
• Visibility controls: Public, unlisted, or private pads
• Discovery page: Browse featured, recent, and popular pads

User Experience

• Zero setup: No downloads or installations required
• Anonymous usage: Start coding without creating an account
• Customizable settings: Theme, font size, tab size, word wrap, and more
• Responsive design: Works on desktop and tablet devices

Tech Stack

Backend

• Java 21+
• Spring Boot 4.x
• Spring Security with JWT authentication
• Spring Data JPA for data persistence
• WebSocket for real-time communication
• Docker support for code execution

Frontend

• React 19 with TypeScript
• Vite for fast development and builds
• TanStack Query for server state management
• Tailwind CSS for styling
• Monaco Editor for code editing
• Yjs for real-time collaboration (CRDT)

Getting Started

Prerequisites

• Java 21 or higher
• Node.js 18 or higher
• npm or yarn

Backend Setup

# Clone the repository
git clone https://github.com/halilugur/openpad.git
cd openpad

# Build the project
./mvnw clean install

# Run the application
./mvnw spring-boot:run

Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:5173

Project Structure

openpad/
  ├── src/                    # Backend source code
  │   └── main/
  │       ├── java/           # Java source files
  │       └── resources/      # Application properties and static resources
  ├── frontend/               # Frontend React application
  │   ├── src/
  │   │   ├── components/     # React components
  │   │   ├── pages/          # Page components
  │   │   ├── contexts/       # React contexts
  │   │   ├── hooks/          # Custom hooks
  │   │   ├── lib/            # Utilities and API clients
  │   │   └── types/          # TypeScript type definitions
  │   └── public/             # Static assets
  ├── docs/                   # Documentation and screenshots
  └── pom.xml                 # Maven configuration

API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login and receive JWT token
• GET /api/auth/me - Get current user information

Pads

• GET /api/pads - List user's pads
• POST /api/pads - Create a new pad
• GET /api/pads/{slug} - Get pad by slug
• PUT /api/pads/{id} - Update pad
• DELETE /api/pads/{id} - Delete pad
• POST /api/pads/{id}/execute - Execute pad code

Discovery

• GET /api/discovery/featured - Get featured pads
• GET /api/discovery/recent - Get recent pads
• GET /api/discovery/popular - Get popular pads
• GET /api/discovery/search - Search pads

Contributing

We welcome contributions! Please follow these steps:

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

Development Guidelines

• Follow the existing code style
• Write tests for new features
• Update documentation as needed
• Keep PRs focused and atomic

Roadmap

• AI-powered code suggestions
• Additional language support (Go, Rust, Ruby)
• Code templates and snippets library
• Team workspaces
• Integrated terminal
• Git integration
• Mobile app

License

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

Acknowledgments

• Monaco Editor - The code editor that powers VS Code
• Yjs - CRDT framework for real-time collaboration
• Spring Boot - Backend framework
• React - Frontend framework
• Tailwind CSS - Utility-first CSS framework

---

Built with care by halilugur and AgentAI team.