.png)
1 day ago
1
Lightweight, sandbox-free dev preview environment — powered by Hono
A minimal and self-contained system for local preview environments.
Each app gets a unique subdomain URL, automatic hot reload, and live console capture — all without containers or sandboxes.
Modern online IDEs (like Sandpack, Lovable.dev, or Replit) are powerful but complex and heavy.
This system offers a lightweight alternative — built on Hono and standard Node.js — ideal for:
- Local development previews
- Multi-app testing
- AI coding agents that need ephemeral preview URLs
It’s not a sandbox. It’s a controlled iframe + proxy system for dev previews.
Important
Star Us, You will receive all release notifications from GitHub without any delay ~ ⭐️
- 🌀 Subdomain-based routing → my-app.localhost:9100
- 🔥 Instant hot reload → Detects app reloads and updates iframes automatically
- 🪄 Console capture → See your app’s console.log() output in the parent frame
- 🔗 WebSocket proxying → Works seamlessly with Vite HMR
- 🧱 Multi-app management → Run multiple isolated apps at once
- 🧰 100% standalone → No Docker, no VMs, no external dependencies
Important
This is not a sandbox. It’s meant for controlled dev previews (safe environments, trusted code).
Server starts at http://localhost:9100
Add an app (HTML or Vite):
Now open: ➡️ http://my-first-app.localhost:9100
Automatically injected into every HTML response:
- Captures console logs
- Sends them to the parent window (postMessage)
- Detects reloads and signals iframe refresh
- Manages iframe navigation (back/forward/reload)
- App triggers reload (e.g. Vite HMR)
- Shim detects beforeunload
- Sends "will-reload" message to parent
- Parent clears console logs + reloads iframe
.env example:
src/server/constants.js (custom domains):
Simple and free-tier friendly.
- Push your repo to GitHub
- Create a Web Service on Render
- Build Command → npm install
- Start Command → npm start
- Add environment variables
- Deploy 🎉
Detailed steps in docs/render-deployment.md
Covers:
- Subdomain URL generation
- Proxy routing
- Shim injection
- Console message flow
Contributions are very welcome!
If you want to:
- Improve stability or add tests
- Enhance iframe–proxy communication
- Add integrations (e.g. R2, Cloudflare Workers)
Then feel free to:
- Fork this repository
- Create a new branch (feat/your-feature)
- Open a pull request
Before submitting a PR, make sure all tests pass: npm test
MIT © 2025 César G. Leañez
Iframe Hot-Reload System — A minimal preview layer built with Hono for the next generation of AI coding agents.
