The Ultimate Single-File Pro App & Game Prototyping Weapon
Build, test, lint, and deploy 60 FPS HTML5 Canvas/WebGL games, mobile PWAs, SaaS dashboards, and full-stack software directly in your browser.
- Live App URL: https://qamotech.github.io/codeforge/
- Repository:
qamotech/codeforge - License: MIT License
Choose from the world's leading generative AI models with built-in adapter routing:
- Google Gemini 2.0 Flash (Recommended, ultra-fast 1M context)
- DeepSeek R1 Reasoning (Deep architectural logic & multi-step planning)
- Anthropic Claude 3.5 Sonnet (High-precision frontend code generation)
- OpenAI GPT-4o Omnimodal (Industry standard code synthesis)
- Groq Llama 3.3 70B (Ultra-low latency 220 tokens/sec)
- Ollama Qwen 2.5-Coder 32B (100% private local GPU offline execution)
Inject high-performance game, 3D physics, UI, and audio libraries with 1-click checkboxes:
- Game & 3D Engines:
Three.js(WebGL 3D),Phaser 3(2D Arcade),PixiJS(2D WebGL),Matter.js(2D Physics),Babylon.js(3D),P5.js(Creative Coding) - UI & Web Frameworks:
Tailwind CSS,Alpine.js,HTMX,Lodash,FontAwesome,Animate.css - Web Audio & Music:
Howler.js,Tone.js(Web Audio Synth) - Data & Animation:
Chart.js,D3.js,GSAP(Pro Animation),Canvas Confetti
Never blocked by offline status or missing API keys. CodeForge includes an offline local synthesizer engine that generates 300+ lines of production-ready, interactive code:
- For Games: Renders a complete 60 FPS HTML5 canvas physics game engine with particle explosion emitters, health bars, high scores, restart overlays, and Web Audio SFX.
- For Apps: Renders a dark glassmorphic mobile app/dashboard with real-time telemetry feeds, stats cards, and touch audio feedback.
Test responsive layouts inside real device bezels with live hot-reloading:
- iPhone 15 (390px Mobile Viewport)
- Galaxy S24 (360px Mobile Viewport)
- iPad Air (768px Tablet Viewport)
- Desktop Laptop (100% Fullscreen Viewport)
- Live Console Feed: Captures
console.log,console.error, andconsole.warnfrom inside the sandbox frame.
- Visual Level Designer: Paint custom game level maps (Walls 🧱, Players 🚀, Enemies 👾, Coins ⭐) directly into the prompt specification!
- 3D Holographic Cube: Real-time WebGL/Canvas 3D holographic matrix rendering active architecture state.
- Visual Architecture Flow Diagram: Dynamic SVG node chart illustrating client target, tech stack, and packaging.
- Prompt Archetypes: Choose from pre-configured prompt profiles (
60FPS Physics Game Engine,Cyberpunk Telemetry HUD,Enterprise SaaS Platform,Mobile Ergonomic PWA). - Voice Dictation: Built-in speech-to-text dictation for hands-free prompt input.
- Chip Cloud Tags: Quick-insert tags like
#60FPSGameLoop,#TouchDPad,#WebAudioSynth, and#ThreeJS3D.
- Code Theater Editor: Live syntax highlighting with line numbers, search & replace (
Ctrl+F), and code formatter. - AST Security Linter: Scans generated files for missing DOCTYPE, unclosed braces, or
eval()calls. - Export Options:
- 📄 Single-File Standalone HTML Bundle
- 📦 Multi-File Zip Package
- 🐳 Docker Compose Container Stack (
Dockerfile+docker-compose.yml) - 📱 PWA Manifest & Service Worker Bundle
| Shortcut | Action |
|---|---|
Ctrl + K / Cmd + K |
Open Command Palette |
Ctrl + F / Cmd + F |
Search & Replace in Code Theater |
Tab 1 |
Jump to Forge Wizard |
Tab 2 |
Open 50 Quantum Blueprints |
Tab 3 |
View Build History & Snapshots |
T |
Cycle Deep Space Visual Themes |
Q |
Open Mobile QR Code Share |
L |
Open Prompt Archetype Lab |
M |
AI Model Performance Benchmark Matrix |
K |
Web Audio Synth Keyboard |
- Open Settings: Click
⚙ API Keysin the top right header. - Enter Key:
- OpenRouter: Get key at openrouter.ai/keys
- Groq: Get key at console.groq.com/keys
- Anthropic: Get key at console.anthropic.com
- Ollama Local: Run
ollama run qwen2.5-coder:32bon your machine.
- Verify Key: Click
🧪 Verifyto test key connectivity. - Permanent Storage: Verified keys are saved automatically to
localStorage(cf_keys).
Designed and engineered for maximum browser prototyping speed.
Licensed under the MIT License.