Collaborative Workspace IDE Docs

Embedenv's Web IDE is a fully-featured, sandboxed, and collaborative coding workspace designed to let teams write, execute, debug, and preview projects in real-time. Whether building command-line utilities, web servers, or graphical Tkinter/Pygame applications, the workspace provides zero-configuration development environments right in your browser.

1. Workspace & Projects Management

Projects are containerized workspaces mapped directly to secure cloud sandboxes. Every project contains a virtual file explorer, a Monaco editor pane, a terminal console, and preview drawers.

Creating and Loading Projects

1. Navigate to the **Projects Dashboard** via your main user sidebar.
2. Click **Create New Project**, select your template stack (e.g., Python Flask, Node Express, HTML5), and enter a unique name.
3. Open the project to load the complete Web IDE workspace.

Project Privacy and Settings

You can toggle your project between **Public** and **Private** visibility. Public projects allow anybody to view your editor files and test the live previews, whereas Private projects restrict access strictly to you and your invited collaborators.

2. Multi-Tab Sandbox Browser

The built-in web preview drawer contains a sandboxed browser layout that supports multiple tabs. This allows testing frontend UI pages alongside backend server routes (like /api/info) inside the same drawer.

Core Browser Features

• Automatic Tab Creation: Opening links with target="_blank" or calling window.open() inside the preview frame automatically spawns a new sandboxed tab inside the IDE browser row instead of escaping to your main system browser.
• Original URL Unpacking: The browser address bar and history manager automatically extract and display the clean target URL (e.g., http://localhost:5000) even when resolving through the backend secure gateway proxies.
• Dynamic Auto-Resize Layout: The browser pane uses a robust flexbox layout where iframe frames dynamically resize to fit the remaining drawer viewport when the Developer Console is toggled or resized.

3. Interactive Developer Console (REPL)

The Developer Console sits at the bottom of the Web Preview drawer and captures real-time outputs from your running website pages.

Capture Architecture

To avoid timing gaps, the backend proxy automatically injects an early-interceptor script at the very top of page HTML headers. This captures console prints (log, error, warn, info) and unhandled JavaScript page errors the moment they occur—even during initial page-load scripts—and posts them to the IDE.

Console Features

• Interactive REPL input: Type JavaScript commands (e.g., document.title or fetch('/data')) in the console input row and press Enter to evaluate them directly inside the active tab's page context.
• Navigation-Aware Clearing: The console log buffer and DOM list are cleared instantly upon page reload or navigation, ensuring you only see messages specific to the active page.
• Output Auto-Scroll: The console logs auto-scroll to the bottom as new logs arrive, with a scroll lock that pauses auto-scrolling when you manually scroll up to inspect previous lines.

4. Headless GUI (VNC Session)

Embedenv supports running graphical desktop applications (like Python Tkinter GUI windows, Turtle drawing graphics, Pygame, etc.) directly in the browser.

How It Works

The sandbox container runs a headless X-server (Xvfb) and a lightweight VNC proxy in the background. When your script executes a graphical window command, the display is captured by the headless server.

Running a GUI App

Simply write and run a graphical Python script in the editor. For example, copy the following Tkinter script and hit **Run**:

import tkinter as tk

root = tk.Tk()
root.title("Embedenv Desktop App")
root.geometry("300x150")

label = tk.Label(root, text="Hello from Headless Linux!", font=("Arial", 12))
label.pack(expand=True)

root.mainloop()

Once running, click the **Show GUI Session Panel** button in the IDE drawer. A live, responsive VNC frame will load, allowing you to interact with the Tkinter window in real-time.

5. Real-Time Collaboration

Work together on the same codebase with colleagues in real-time, just like in Google Docs.

Inviting Collaborators

1. Click the **Share** button in the IDE workspace header or navigate to **Collaborators** settings.
2. Enter the username of the developer you wish to invite and select their role (**Viewer** or **Editor**).
3. Alternatively, generate a secure invitation link and copy it to your clipboard.

Collaborative Synchronization

• Real-time Document Edits: Multiple cursors and text edits are synchronized in real-time inside the Monaco Editor configured via Layout Studio.
• State Syncing: Active file selections, terminal outputs, and running server statuses sync across all connected users' screens instantly.

6. Terminal & Packages Manager

Every workspace includes full terminal shell access powered by our WebSocket engine for running custom build scripts, package managers, and executing system processes.

Install Python/Node Packages

Use the integrated command line to run package management commands. For instance, to install third-party libraries:

# Install Python libraries
pip install requests beautifulsoup4

# Install Node.js packages
npm install express socket.io

Additionally, you can use the **Packages Manager Drawer** in the dashboard to search and request system packages or write custom requirements files (like requirements.txt or package.json) that persist across restarts.