Web IDE

Introduction

Welcome to Web IDE - a powerful, browser-based integrated development environment designed for coding, testing, and running programs directly in your browser. This modern IDE offers a feature-rich coding experience without requiring any installation or setup.

Features

Core Features

• Multi-language Support: Code in multiple programming languages including C++, Python, Java, JavaScript, and more
• Monaco Editor Integration: Enjoy VS Code-like editing experience with syntax highlighting, code completion, and error detection
• Real-time Code Execution: Run your code instantly with the Judge0 API integration
• File Management: Create, edit, delete, and organize files and folders with an intuitive file explorer
• Drag-and-Drop Interface: Easily organize your workspace with drag-and-drop file management
• Dark/Light Theme: Choose between light and dark themes for comfortable coding in any environment

Advanced Features

• Test Case Management: Create, edit, and run test cases to validate your code
• Individual Test Execution: Run specific test cases to debug particular inputs
• Customizable Layout: Toggle between horizontal and vertical console layouts
• Keyboard Shortcuts: Enhance productivity with keyboard shortcuts for common operations
• Code Formatting: Format your code with a single click or keyboard shortcut
• Auto-save: Your work is automatically saved to your browser's local storage

Getting Started

Editor Interface

The IDE is divided into several key areas:

1. Toolbar: Access language selection, file operations, and run buttons
2. File Explorer: Navigate and manage your files and folders (toggle with the hamburger icon)
3. Editor: Write and edit your code
4. Console/Test Cases: View output, provide input, and manage test cases
5. Status Bar: See current status and execution information

Basic Operations

File Management

• Create a new file: Click the document-plus icon or use Ctrl+N
• Open a file: Click the folder icon or use Ctrl+O
• Save a file: Click the download icon or use Ctrl+S
• Close a file: Click the X on the file tab or use Ctrl+W
• Toggle file explorer: Click the hamburger icon or use Ctrl+B

Organizing Your Workspace

• Create folders: Right-click in the file explorer and select "New Folder"
• Drag and drop: Move files between folders by dragging them
• Rename files/folders: Right-click and select "Rename" or double-click the file tab
• Archive files: Move unused files to the Archive folder for better organization

Writing Code

• Change language: Select your desired language from the dropdown
• Format code: Click the code bracket icon or use Shift+Alt+F
• Change theme: Select from light, dark, or high contrast themes

Running Code

• Run code: Click the green play button or press F5
• Provide input: Enter input in the input panel before running
• View output: See results in the output panel
• Clear input/output: Use the clear buttons to reset the panels

Working with Test Cases

1. Create a test case:

   • Go to the "Test Cases" tab
   • Enter input and expected output
   • Click "Add Test Case"

2. Run test cases:

   • Run a single test case by clicking the "Run" button next to it
   • Run all test cases by clicking "Run All Test Cases"
   • View detailed results in the "Results" tab

3. Manage test cases:

   • Edit or delete test cases as needed
   • Test cases are saved automatically

Common Use Cases

Competitive Programming

Perfect for competitive programming practice:

1. Write your solution in the editor
2. Create test cases for sample inputs/outputs
3. Run test cases to verify your solution
4. Run with custom inputs for edge cases

Learning a New Language

1. Select your target language from the dropdown
2. Create basic programs to understand syntax
3. Run small code segments to see how they work
4. Use the console for input/output experimentation

Educational Use

Teachers and students can:

1. Share code through the save/load functionality
2. Create test cases to validate student solutions
3. Use the workspace organization to manage multiple assignments
4. Use the Archive folder to store reference solutions

Keyboard Shortcuts

• Ctrl+N: New file
• Ctrl+O: Open file
• Ctrl+S: Save file
• Ctrl+W: Close file
• F5: Run code
• Shift+Alt+F: Format code
• Ctrl+B: Toggle file explorer

Tips and Tricks

• Use the Archive folder to keep your workspace organized while maintaining access to reference files
• Create template files for frequently used code patterns
• Use test cases even for simple programs to ensure correctness
• Customize your layout based on whether you're working with input-heavy or output-heavy programs
• Drag the dividers to resize the file explorer and console panels

Troubleshooting

• If code execution fails, check the selected language and ensure it matches your code
• If test cases aren't running, verify that your code reads input in the expected format
• If the interface seems unresponsive, try refreshing the page (your work is auto-saved)

---

Enjoy coding with Web IDE! This project is under active development, and we welcome your feedback and suggestions for improvement.