1. What is the Web Sandbox and Why It Exists
When you ask Accelerated Logic AI to "Build a dashboard", static markdown code blocks are not enough. You need an interactive environment to test UI states, verify responsive layouts, and inspect browser errors.
The Web Sandbox runs 100% locally in your browser inside a sandboxed iframe. If AI-generated code encounters an infinite loop or runtime error, it only affects the preview container without freezing your active chat session, file explorer, or sidebar.
2. The Sandbox UI — 3 Main Panels
Project selector dropdown, device viewports (Desktop, Tablet 768px, Mobile 375px), Console drawer toggle, Open in New Tab, ZIP Download, and Push to GitHub.
Virtual file system tree (index.html, src/App.tsx, src/index.css) paired with an embedded code editor for real-time adjustments.
Live rendering iframe on the right and an expandable Console Drawer at the bottom to inspect console.log output, React key warnings, and missing imports.
3. Web Projects & Local Persistence
Every generated preview is saved as a discrete project in local browser memory:
- Project Names: Auto-generated by timestamp, editable at any time via the top dropdown.
- Instant Switch: Jump between projects seamlessly from the top bar dropdown menu.
- Cloud Sync Integration: When Google Drive backup is enabled, project state files sync automatically to cloud storage.
4. Hot Reloading & Surgical Code Editing
0.5s Debounced Hot Reload: Editing code in the left file panel instantly updates the right iframe preview without requiring a full browser page refresh.
Surgical Chat Diffs: When you request follow-up tweaks in chat (e.g., "Add dark mode toggle to the navbar"), the Finalizer agent performs targeted diff replacements on existing virtual project files.
5. Viewport Testing & Console Debugging
Switch between Desktop, Tablet (768px), and Mobile (375px) device frames to test responsive Tailwind breakpoints (sm:, md:, lg:). Expand the bottom Console Drawer to catch missing module imports or unhandled promises.
6. Preview Limitations & "Open in New Tab"
Because preview frames run inside a restricted sandbox, certain browser APIs (such as modal alert() popups, top-level camera/mic permissions, or cross-origin port requests) are restricted. Click Open in New Tab to pop out the sandbox into a full top-level browser context.
7. Exporting Code & GitHub Integration
Packages all virtual project files into a Vite-ready .zip archive containing package.json and full source directories.
Authenticate with a GitHub Personal Access Token (PAT) to commit and push virtual files directly to public or private repositories.
8. Sandbox Troubleshooting Tips
- White Screen: Verify that
src/App.tsxhas a validexport defaultstatement. - Tailwind Styles Missing: Ensure
src/index.cssincludes standard Tailwind directive imports. - Console Errors: Open the bottom Console Drawer to verify missing dependencies or syntax errors.