Hi DEV community! 👋
I want to share a project I've been working on: IA Code Studio (https://ia-codestudio.com). It is a next-generation interactive WebGL playground and IDE designed to make building Three.js scenes, 3D widgets, and interactive websites as fast and collaborative as possible.
#
Here is the backstory of how it was built, the architecture behind it, and the features we packed into it.
#
🌟 The Core Features
🤖 1. AI Prompt-to-3D Co-pilot Writing boilerplate code for WebGL and Three.js can be tedious (setting up renderers, cameras, lights, orbit controls, etc.).
The Solution: I integrated an AI assistant directly into the Monaco editor. You can prompt the AI in English or French to build a scene (e.g., "create a glowing wireframe grid with rotating metal spheres"), and it compiles and runs the WebGL code in real-time.
👥 2. Real-Time Multiplayer Sandbox (DevSocial Hub)
Coding is better with friends. I wanted a way for developers to pair program in 3D: #
Real-time Sync: Powered by Firebase, multiple developers can join the same room code and code simultaneously. #
3D Laser Cursors: We created synchronized 3D raycasting cursors, so you can point at elements in the 3D preview and your teammate sees exactly where you are looking. #
WebRTC Voice Chat: No need for Discord or Zoom. We built high-fidelity peer-to-peer microphone voice channels directly into the browser tab using WebRTC.
⏪ 3. DVR Time-Travel Debugger & Time Machine (Local Version Control)
DVR Panel: A floating panel that lets you travel back and forth between execution states to see how variables change. #
Time Machine History: Automatically takes local snapshots of your code every 5 minutes and lets you restore any version with 1-click. All snapshots persist in localStorage
so they survive page refreshes!
📦 4. Standalone 1-Click Compiler
Once you are happy with your 3D creation (like our prebuilt Steampunk Chrono or Webcam Avatar widgets), you can export the entire workspace as a single, self-contained, offline-ready HTML file or a ZIP bundle. #
🛠️ The Tech Stack #
I wanted the application to load instantly and run smoothly, so I opted for a lightweight stack: #
Frontend: Vanilla HTML5, CSS3 (Glassmorphism design system), and Modern ES6+ JavaScript. #
3D Engine: Three.js (WebGL renderer, OrbitControls). #
Editor: Monaco Editor (the core engine behind VS Code). #
Database & Sync: Firebase (Firestore real-time listeners for cursor sync, Auth, and Hosting).
#
- WebRTC Protocol: RTCPeerConnection API with Firestore-based signaling for the voice channels.
#
🚀 Try It Out!
The platform is live and offers a Preemium plan:
- 🎁 Free Tier: You can try 3 of our interactive components/widgets completely free of charge.
- ⚡ Pro Tier ($10/month): Unlock the full power of the AI co-pilot, real-time multiplayer coding sandboxes, custom 3D vector extruders, and unlimited exports. 👉 Live Website: https://ia-codestudio.com I would love to get your feedback:
- What features should we add next?
- How does the platform feel? Let me know in the comments below!