FrameLab

FrameLab is a modern, browser-based frontend playground for experimenting with:

• HTML, CSS, and JavaScript
• React and JSX
• Angular and TypeScript

Each framework runs in its own isolated Sandpack runtime. The app includes live preview, console output, responsive device previews, starter templates, local autosave, shareable URLs, theme switching, and ZIP export.

The plain web workspace follows CodePen-style panel semantics: index.html may contain only body markup, while styles.css and index.js are injected automatically into a sandboxed preview. Full HTML documents are supported too. Paste compiled CSS into styles.css; raw SCSS syntax requires compilation first.

Run locally

npm install
npm run dev

Create a production build with:

npm run build

How the playground works

1. Pick a runtime from the left rail.
2. Edit an existing file or use New file to add components, scripts, styles, or nested paths. Web .js and .css files are registered in index.html automatically; framework files run when imported normally.
3. Press Run or Ctrl/⌘ + Enter.
4. Inspect the rendered result and browser console.

Your latest files are saved in browser storage. Use Share to copy the current playground into a URL, or Download to export its files as a ZIP.

Architecture

• React + TypeScript application shell
• Vite development and production build
• CodeSandbox Sandpack for isolated in-browser bundling and preview
• Accessible, persistent resizable panels for the editor, preview, and console
• CSS design system without an additional UI framework

The original proof of concept injected all frameworks into one iframe. FrameLab separates the runtimes, avoiding dependency collisions while keeping the product fully client-side.

Every preview preloads a small, version-pinned compatibility set: jQuery 3.7.1, Lodash 4.17.21, and Hammer.js 1.0.6. The plain runtime inserts these scripts before user code; React and Angular receive the same resources through Sandpack. Their framework packages remain isolated and are never duplicated by CDN globals. A project that explicitly includes one of these exact URLs is not loaded twice.

Browser regression checks

Install Chromium once, then run the Playwright suite. The test command starts the Vite server automatically:

npx playwright install chromium
npm run test:e2e

The automated checks cover script and stylesheet execution, runtime library order, repeated runs, persistent storage, editing and autosave, long-file scrolling, resizable and collapsible panels, the responsive file drawer, mobile project actions, and horizontal-overflow regressions. GitHub Actions runs both the production build and browser suite on every pull request.