INTAB: Zero Servers, Zero Compromises. A WebAssembly IDE in Your Browser.

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I built INTAB, a high-performance, fully in-browser Integrated Development Environment (IDE) powered by WebAssembly, Web Workers, React, Vite, and Monaco.

The overarching goal was simple: "Zero servers. Zero installs. Zero compromises."

It started as an ambitious experiment to see if we could completely eliminate the need for remote backend instances or containers just to write and run code. We ended up integrating WASM-based local execution for JavaScript, TypeScript, Python, C, C++, Postgres, and SQLite! It also scales up to function as a desktop app via an Electron wrapper.

For me (and our team, 4 Bytes), INTAB represents removing friction. It allows anyone, regardless of local computing power, network quality, or OS setup, to jump straight into a capable code playground right from their browser.

Demo

intab.vercel.app

The Comeback Story

INTAB was a massive initial undertaking, but midway through development, we hit a plateau balancing the complexity of the Virtual File System (VFS) and the user experience. Before the Finish-Up challenge, we had foundational OPFS (Origin Private File System) persistence and a basic file tree, but crucial features were missing or buggy:

• If a browser didn't support OPFS, the application simply failed.
• Files couldn't be easily organized via drag-and-drop.
• There was no bridge to import from or export to the real local filesystem effectively.
• The VS Code-like Extensions marketplace UI and Version Control flows were buggy.

To finish it up, I implemented a massive sprint to harden the architecture and UX:

Bulletproof VFS

I implemented a robust IndexedDB fallback for environments where OPFS isn't available, preserving the user's workspace reliably.

Quality of Life

I added intuitive drag-and-drop movement for files and folders directly inside the tree structure, and hardened recursive file deletion to clean up active tabs.

Local File Bridges

I built an import pipeline from the real filesystem (using hidden inputs) and an export pipeline (showSaveFilePicker with a download fallback).

Editor Enhancements

I shipped massive extension UI improvements, repaired syntax highlighting, polished the workspace switching interface, and thoroughly debugged the Git/version control integrations.

My Experience with GitHub Copilot

GitHub Copilot was the ultimate pair programmer for getting INTAB over the finish line.

Bridging the VFS gap

Writing the IndexedDB fallback logic and matching it to our OPFS adapter contract would have been hours of tedious boilerplate. Copilot essentially read our adapter interfaces and predicted the entire fallback class structure perfectly.

Taming Complex UI

Implementing tree-based drag-and-drop is notoriously finicky. Copilot massively simplified this by suggesting the correct React state management and the complex recursive cleanup logic required when moving or deleting active editor tabs.

Seamless Context

Whether I was jumping between Electron IPC listeners in main.cjs, debugging our C++ Emception worker in emceptionRuntime.worker.ts, or styling the ExtensionsPanel.tsx, Copilot retained the context of the architecture and suggested idiomatic code for that specific layer. It confidently helped me debug version control anomalies and shipped extensions flawlessly.