We Built a Full Game IDE in a Browser Tab and Our CPU Barely Complained

Description and use

Limn Studio is a browser‑only 2D game IDE built as a single HTML file, featuring a lightweight vanilla JS editor, dt‑based engine, and optimized animation loop, with cloud sync via Supabase.

Problem

Developers wanted a lightweight, browser‑only 2D game IDE without npm, webpack, or heavy dependencies, and needed efficient CPU usage for animations.

Outcome

Limn Studio offers a fully functional, browser‑only 2D game IDE with minimal dependencies, efficient CPU usage, and cloud sync, enabling rapid prototyping and publishing without local tooling.

Workflow

• 1. Create a single HTML file with <style> and <script> tags. 2. Build a two‑layer code editor: <pre> for syntax highlighting and <textarea> for input. 3. Implement a character‑by‑character tokenizer and bracket analyzer. 4. Add a minimap and console with REPL using iframe.contentWindow.eval(). 5. Develop epic.js engine with dt‑based update loop. 6. Optimize animation loop to reduce CPU usage. 7. Provide 15 starter templates and custom UI components (dropdowns, color pickers). 8. Implement cloud sync via Supabase or localStorage. 9. Add sharing, Arcade gallery, and auto‑generated thumbnails. 10. Test on mobile, removing padding to maximize screen real estate.

Evidence

We built a 400‑line vanilla JavaScript code editor that stacks a <pre> and <textarea> to mimic a real editor.

Source

The animation loop was refactored to stop hammering the CPU into submission.

Source

Cloud sync uses Supabase if logged in, otherwise localStorage.

Source