Collaborative IDE

Code together in real-time with the built-in editor

Collaborative IDE

The Collaborative IDE is a powerful feature that allows multiple developers to code together in real-time within an audio room. It features CodeMirror editor with full syntax highlighting, smart autocomplete, auto-closing brackets, and collaborative editing. Build full web applications and preview them directly in the IDE!

Enabling the IDE

  1. Create or join an audio room
  2. As the host, click the "IDE" button in the room controls
  3. The IDE panel will appear below the audio controls

Features

Code Editor

  • CodeMirror Editor: Full-featured code editor with syntax highlighting for all major languages
  • Smart Autocomplete: Context-aware suggestions for variables, functions, and language keywords - press Tab or Enter to accept
  • Auto-Closing Brackets: Automatically closes parentheses, braces, brackets, and quotes (just like VS Code)
  • Language Auto-Detection: Automatically detects your code language as you type
  • Real-Time Collaboration: See other participants' cursors (with colored labels) and edits in real-time
  • Typing Indicators: See who's typing with colored username labels
  • File Explorer: Browse your workspace files in the collapsible sidebar
  • Line Numbers: Navigate code easily with line numbers

File Explorer

The file explorer sidebar lets you navigate and manage your workspace:

  • Browse Files: See all files and folders in your workspace
  • Open Files: Click any file to open it in the editor
  • Create Files: Click the 📄 button to create a new file. Enter the filename and it will be created and opened automatically
  • Create Folders: Click the 📁 button to create a new folder. Enter the folder name to create it
  • Upload Files: Click the 📤 button to upload files from your computer, or drag and drop files directly onto the file explorer
  • Drag & Drop: Drag files from your computer and drop them onto the file explorer to upload them instantly
  • Search Files: Use the search box at the top of the file explorer to quickly find files by name or path
  • Rename Files: Right-click on any file to rename it
  • Delete Files: Right-click on any file or folder to delete it (with confirmation)
  • Collapsible Sidebar: Click the collapse button (◀) to hide the sidebar and maximize coding space
  • Refresh: Click the refresh button to reload the file list
  • Auto-Detection: File language is automatically detected when opened

View Tab - Web App Preview

Build and preview full web applications directly in the IDE:

  • Rails Apps: Run: 
    gem install rails
rails new myapp
rails s
    Then switch to the View tab
  • Node.js Apps: Run: 
    npm start
    Then switch to the View tab
  • Django Apps: Run: 
    python manage.py runserver
    Then switch to the View tab
  • PHP Apps: Run: 
    php -S localhost:8000
    Then switch to the View tab
  • Server Controls: Start, stop, and refresh your web app from the View tab
  • Live Preview: See your web application running in real-time without leaving the IDE

Terminal

The integrated terminal provides a full command-line experience with Git integration, package management, and advanced features:

  • Interactive Terminal: Run code and see output in real-time
  • Input Support: Handle interactive programs that require user input
  • Code Execution: Execute code in various languages (Ruby, Python, JavaScript, Rust, PHP, C++, etc.)
  • Package Installation: Install packages with: 
    pip install package-name
gem install gem-name
npm install package-name
cargo add package-name
composer require package-name
  • Git Integration: Run standard Git commands: 
    git init
git clone https://github.com/user/repo.git
git add .
git commit -m "Your message"
git push
  • Persistent Workspace: Your files and Git repositories persist across sessions
  • Long-Running Servers: Start web servers that run in the background (Rails, Node.js, Django, PHP)
  • Command History: Use arrow keys (↑/↓) to navigate through your command history
  • Command History Persistence: Your command history is automatically saved and persists across browser sessions
  • Command Autocomplete: Press Tab to autocomplete commands. If multiple matches exist, a dropdown will appear for you to select from
  • Terminal Tabs: Open multiple terminal sessions simultaneously:
    • Click the "+" button in the terminal header to create a new terminal tab
    • Click on any terminal tab to switch between sessions
    • Each terminal tab maintains its own command history and output
    • Click the "✕" on a tab to close it (you must keep at least one terminal open)
  • Terminal Themes: Customize your terminal appearance:
    • Click the 🎨 button in the terminal header to open the theme selector
    • Choose from multiple themes:
      • Default: Classic dark green on black
      • Dark: Pure black with bright green text
      • Light: White background with black text
      • Matrix: Matrix-style green on black
      • Ocean: Deep blue background with cyan text
      • Fire: Dark red background with orange text
    • Your theme preference is saved and will be applied to all terminal tabs
  • Clear Command: Click "Clear" button or type: 
    clear
  • Expand/Collapse: Click the chevron icon next to "TERMINAL" to expand the terminal to full height or collapse it back
  • Compilation Status: See "Compiling..." status for compiled languages (Rust, C++)

Installing Libraries

You can install packages for all supported languages directly in the terminal:

  • Python: 
    pip install package-name
    Example: 
    pip install requests
  • Ruby: 
    gem install gem-name
    Examples: 
    gem install rails
gem install nokogiri
  • Node.js: 
    npm install package-name
# or
yarn add package-name
  • Rust: 
    cargo add package-name
# or
cargo install package-name
  • PHP: 
    composer require package-name
  • C++: System libraries are installed automatically via apt-get when needed
  • Installed packages are automatically available when you run your code
  • Packages are tracked per session and will be installed before code execution

Terminal Commands

Common terminal commands you can use:

  • Clear terminal: 
    clear
  • Install Python package: 
    pip install package-name
  • Install Ruby gem: 
    gem install gem-name
  • Git commands: 
    git status
git add .
git commit -m "message"
git push
  • Navigation: Use Arrow Up (↑) and Arrow Down (↓) to navigate command history

Running Code

  1. Write or paste your code in the editor
  2. Select the appropriate language from the language dropdown
  3. Click the "Run" button (green button with play icon)
  4. View the output in the terminal below

Saving Code

  • Click "Save" to save your code to the room's IDE document
  • Changes are automatically synced to all participants
  • Code persists even after leaving and rejoining the room

    • Exporting Code

    1. Click the "Export" button
    2. Choose to export to GitHub Gist
    3. Authenticate with GitHub if needed
    4. Your code will be exported as a public or private Gist

    Board View - Interactive Whiteboard

    Switch to Board view to create flow diagrams and visual representations of your code logic:

    • Drawing Tools:
      • Rectangle: Click to create boxes and containers
      • Text: Click to add labels and annotations
      • Line: Draw connections between elements
      • Select/Move: Click and drag shapes to reposition them
    • Panning:
      • Right-click and drag anywhere to pan the canvas in all directions
      • Spacebar + drag to pan (hold Spacebar, then click and drag)
      • Large canvas (4000x6000px) gives you plenty of space to work
    • Export Options:
      • Export PNG: Download your board as an image
      • Download JSON: Save your board structure for later
    • Clear: Remove all shapes from the board

    Collaboration Tips

    • Communicate with voice while coding to explain your thought process
    • Use comments in code to document your changes
    • Take turns editing to avoid conflicts
    • Use the chat to share links, resources, or additional context
    • Save frequently to preserve your work

    Supported Languages

    The IDE supports syntax highlighting and execution for many languages including:

    • Ruby - Full support with gem installation
    • Python - Full support with pip installation
    • JavaScript/Node.js - Full support with npm/yarn
    • Rust - Full support with Cargo package management
    • PHP - Full support with Composer
    • Java - Syntax highlighting and execution
    • C/C++ - Full support with system library installation
    • Shell/Bash - Command execution
    • HTML/CSS - Syntax highlighting
    • And many more...

    Example: Building a Rails App

    Here's a complete example of building a Rails application in the IDE:

    1. Open an audio room and switch to the IDE tab
    2. In the terminal, install Rails: 
      gem install rails
    3. Create a new Rails app: 
      rails new myapp
cd myapp
    4. Start the Rails server: 
      rails s
    5. Switch to the View tab to see your Rails app running!
    6. Your workspace persists, so you can continue working on your app in future sessions