The Zero-Config, Sandbox-IDE (PWA) Browser Workstation
A lightweight, fully functional Web IDE contained entirely within the browser. Write code, manage virtual files, compile Markdown, and preview your web applications with a built-in proxied developer console—all without starting a local server. Fully mobile-responsive and installable natively on your device.
Features • Quick Start • How to Use • Under the Hood • Contributing
- 📦 Zero-Server Architecture: Runs purely in the browser. No Node.js, no Webpack, no local servers required.
- 📱 PWA & Offline Support: Installable natively on iOS, Android, and Desktop. Service Workers ensure the IDE functions 100% offline.
- 💾 Auto-Save Persistence: Every keystroke is saved to
localStorage. Never lose your work to an accidental refresh. - 🗂️ Virtual File System: Create, edit, and link multiple HTML, CSS, and JS files just like a real local project.
- 🔄 On-the-Fly Bundler: Automatically intercepts
<script src="...">and<link href="...">tags and injects your virtual files dynamically before rendering. - 🖥️ Integrated Smart Console: Intercepts standard
console.logcalls from the preview and displays them in the IDE. Includes custom serialization for complex DOM elements (like<canvas>) and Web APIs. - 📦 Drag, Drop & Export: Drag local files directly into the browser to import them, and export your entire workspace as a
.ziparchive. - 📝 Markdown Compilation: Natively converts and previews
.mdfiles instantly. - 🎨 SOTA Editor Experience: Powered by CodeMirror (Dracula theme) with syntax highlighting, line numbers, and a dedicated ⇥ TAB button tailored for mobile touch-keyboards.
Because SandboxIDE is completely standalone, setup takes seconds:
- Host or open the
index.htmlfile in any modern browser (Chrome, Firefox, Safari, Edge). - Start coding immediately.
- Optional: Click the install icon in your browser's address bar to install it as a standalone Desktop App.
- Navigate to the hosted URL on your device.
- Tap "Share" (iOS) or "Menu" (Android) and select "Add to Home Screen".
- Launch SandboxIDE from your home screen for a full-screen, native-app experience!
On the left-hand side (or the top swipeable bar on mobile) is your File Explorer.
- Click the
+button to create a new file (e.g.,style.cssorapp.js). - Drag and drop existing
.js,.html,.css, or.mdfiles into the window to import them. - Click the
↺button to reset the environment to the default boilerplate.
SandboxIDE acts exactly like a real web server. You can link the files you create in your virtual file system directly inside your index.html file.
Example index.html:
<!DOCTYPE html>
<html>
<head>
<!-- SandboxIDE will bundle this automatically! -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="game"></canvas>
<!-- SandboxIDE will bundle this automatically! -->
<script src="index.js"></script>
</body>
</html>Unlike standard iframes that hide logs in your browser's F12 dev tools, SandboxIDE features a built-in console panel that accurately serializes Complex Objects.
Example index.js:
const game = document.getElementById("game");
console.log("Canvas Element:", game); // Outputs actual <canvas id="game"> element!
const ctx = game.getContext("2d");
console.log("Canvas Context:", ctx); // Natively serialized, prevents "[object Object]"- Hit the
▶ Runbutton to parse your HTML, inject your local scripts/styles, and render the Live Preview. - Hit the
📦 Export ZIPbutton to bundle your entire virtual file system into a.zipfile for external deployment.
Curious how a multi-file IDE works entirely client-side? Here is the magic:
1. The Virtual File System & Auto-Save
All files are stored in a JavaScript Dictionary object (`const files = {}`) and synced instantly to the browser's
localStorage. When you switch tabs, CodeMirror's value is dynamically swapped and persisted.
2. RegEx Bundling
When you click Run, the app uses Regular Expressions to parse your HTML string. It looks for
<script src="[filename]"></script>. If [filename] exists in the VFS dictionary, it replaces the network request with an inline script containing your exact code.
3. Iframe Console Proxying
Before injecting the code into the
<iframe> via srcdoc, SandboxIDE prepends an Interceptor Script. This script hijacks console.log, warn, error, and window.onerror. It intercepts the arguments, serializes them, and uses window.parent.postMessage to securely send the data back to the main IDE UI.
- Virtual File System creation
- Syntax Highlighting via CodeMirror
- Iframe Live Preview & Smart Console
- Mobile Responsiveness & PWA implementation
- Auto-save to
localStorage - Drag-and-drop file imports
- Support for Markdown rendering
- Export project as a
.zipfile - Add Prettier code auto-formatting integration
- GitHub Gist Import/Export capabilities
- Multiple UI/Editor Themes
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.