██╗███╗   ██╗████████╗ █████╗ ██████╗ 
██║████╗  ██║╚══██╔══╝██╔══██╗██╔══██╗
██║██╔██╗ ██║   ██║   ███████║██████╔╝
██║██║╚██╗██║   ██║   ██╔══██║██╔══██║
██║██║ ╚████║   ██║   ██║  ██║██████╔╝
╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝╚═════╝ 

INTAB

High-Performance, WebAssembly-Powered, Fully In-Browser IDE.

🚀 Launch InTab →

 

InTab is a local-first Integrated Development Environment built with React, Vite, Monaco, Web Workers, and WebAssembly. It allows you to edit files, compile, and run code entirely within your browser or as a desktop application via Electron, bypassing the need for traditional remote backend instances.

---

Capabilities

• Local Execution: Run JavaScript, TypeScript, Python, C, C++, SQLite, and Postgres directly in the browser via Web Workers and WASM.
• Persistent Workspaces: Local-first storage utilizing the Origin Private File System (OPFS) with profile isolation.
• Extensible Editor: Features Monaco Editor with an integrated file tree, tabs, syntax highlighting, and activity bar.
• Embedded Terminal: Real-time terminal powered by xterm.js, with an integrated Linux VM via v86.
• Desktop Mode: Optional Electron wrapper to access the local file system and execute full PTY shell commands.
• Offline Capable: Robust Service Worker integration for caching runtime assets and the application shell.

---

Getting Started

Prerequisites

• Node.js 20+
• npm (v10+)
• A modern Chromium-based browser (Chrome, Edge, Brave) is highly recommended for full OPFS and SharedArrayBuffer support.

Installation

1. Clone the repository:

git clone <repository-url>
cd intab

2. Install dependencies:

npm install

Note: If you only want to develop for the browser and wish to skip the heavy native Electron post-install hooks, use npm install --ignore-scripts instead.

3. Start the Development Server (Browser Mode):

npm run dev

Navigate to http://localhost:5173.

4. Start Electron Mode (Desktop Mode):

npm run electron:dev

---

Architecture

InTab strictly isolates the frontend presentation layer from the heavy computational local runtimes.

Data Flow & Execution Pipeline

1. User Action: User dispatches a Run command from the editor.
2. Routing: App Router identifies the target language/runtime via the file extension.
3. Dispatch: Code payload is proxied to the appropriate Web Worker or Emception Client.
4. Execution: The isolated worker evaluates the WASM/JS and captures standard streams (stdout / stderr).
5. Output: Formatted messages are posted back to the main thread and rendered interactively by xterm.js.

Directory Structure

├── electron/
│   ├── ipc/                 # Electron filesystem and PTY terminal bridge
│   └── main.cjs             # Desktop entry point
├── public/
│   ├── sw.js                # Service Worker for offline caching
│   ├── vscode-icons/        # Bundled static file icon assets
│   └── cdn/                 # Local fallbacks for Emception & Pyodide assets
├── src/
│   ├── components/          # React components (Terminal, Linux panel, Activity Bar)
│   ├── core/                # Core domain types and utilities
│   ├── lib/                 # Storage adapters, CLI clients, Preview builders
│   ├── vs/                  # High-level IDE Shell (Workbench, EditorPart, Sidebar)
│   ├── workers/             # Web Workers for isolated runtime execution
│   ├── App.tsx              # Main application orchestrator
│   └── index.css            # Tailwind & Theme definition
├── index.html               # Main HTML entry point
└── package.json             # Core dependencies and scripts

Core Modules

• Storage & Workspaces (src/lib/storage.ts): Uses OPFS (Origin Private File System) to isolate browser workspaces per profile.
• Editor & Workbench (src/vs/): Built on monaco-editor, mirroring standard industrial IDE layouts.
• Web Workers & Runtimes (src/workers/): Employs dedicated Web Workers to offload heavy compilation. Includes Python (Pyodide), C/C++ (Emception), SQL (sql.js, PGlite), and a Linux OS (v86).
• Electron Bridge (electron/): Injects the window.intabElectron interface, allowing the React frontend to execute native commands via node-pty.

---

Command Registry

Command	Description
npm run dev	Start the Vite development server for the browser interface.
npm run build	Create a production-ready static build of the InTab.
npm run preview	Serve the production build locally.
npm run lint	Run ESLint across the codebase.
npm run electron:dev	Start the IDE in Electron desktop mode.
npm run electron:build	Build the web app and package it into desktop installers.

---

Diagnostics & Troubleshooting

SharedArrayBuffer and WASM Cross-Origin Errors

InTab requires strict Cross-Origin Isolation to utilize SharedArrayBuffer for synchronous operations in Web Workers. If runtimes fail to load, ensure your host emits the following headers:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Electron Install Hook Failures

Native modules require Python and C-compilers to build on your native OS. If npm install crashes while trying to build node-pty, you can bypass the build step for browser-only development:

npm install --ignore-scripts

Asset Resolution Failures

If you see 404 Not Found or Failed to fetch in the console for .wasm files (Pyodide/Emception), verify that the public/cdn/ directory was successfully populated. Running npm run build once usually copies the necessary static assets.

Corrupted OPFS Storage

If the file tree fails to hydrate, you can gracefully delete the active profile inside the InTab File Explorer. Alternatively, force a reset via Chrome/Edge DevTools (F12): Application -> Storage -> Click Clear site data.

---

_{Developed by Unit 4 Bytes}