CodeStudio IDE
A browser-native IDE with real-time collaboration, AI assistance, a full JS debugger, and zero installation required.
Getting Started
CodeStudio runs entirely in your browser — no installation, no account required.
Open the IDE
Visit the live URL or download the HTML file and open it locally in any modern browser.
Create a Project
Press Ctrl+N or click the + button in the Explorer panel.
Write Code
Use the tabs to switch between HTML, CSS, and JS. The live preview updates automatically as you type.
Save & Export
Press Ctrl+S to save. Use Ctrl+E to export as a ZIP or single HTML file.
File Structure
The repo is split into clean, maintainable modules across two directories.
Editor
Syntax Highlighting
Powered by Prism.js. Supports HTML, CSS, JS, TS, Python, JSON, PHP, C#, Java, Bash, YAML, SQL, and more.
Multi-Cursor
Hold Alt and click to place multiple cursors simultaneously. Press Esc to clear.
Find & Replace
Press Ctrl+H to open Find & Replace with regex support.
Auto-Complete
Intelligent autocomplete for HTML tags, CSS properties, and JS keywords.
Minimap
A scrollable overview of your entire file on the right edge of the editor.
Code Beautifier
Press Ctrl+Shift+F to auto-format HTML, CSS, and JS.
Snapshots
Save timestamped snapshots and restore any previous version instantly.
Split View
Press Ctrl+\ to open a second editor pane side-by-side.
Projects
| Action | How |
|---|---|
| New project | Click + in Explorer or press Ctrl+N |
| Open / Import | Ctrl+O — supports ZIP, single HTML, or JSON workspace |
| Export | Ctrl+E — Single HTML, Project ZIP, or Share Link |
| Add custom file | Click the new-file icon next to your project name |
| Delete project | Right-click project in Explorer → Delete |
Live Preview
The preview pane renders your HTML+CSS+JS in real time — updating automatically as you type, with a default 500 ms delay.
Fullscreen Preview
Press Ctrl+Shift+P to open your project in a dedicated fullscreen tab.
Mobile Preview Shell
Click Mobile to view your project inside a phone-shaped frame.
X-Ray Mode
Overlay layout boundaries on every element for visual debugging.
Share Link
Export a URL that encodes your entire project inline — no server needed.
Console
The console docks at the bottom and captures all console.log() output, warnings, and runtime errors from your live preview.
| Shortcut | Action |
|---|---|
| Ctrl + ` | Toggle console open / closed |
| Ctrl + L | Clear the console log |
| Ctrl + Enter | Run / refresh preview |
AI Assistant
CodeStudio integrates Google Gemini AI for code writing, fixing, and analysis. Requires your own API key.
Get an API Key
Visit aistudio.google.com and create a free Gemini API key.
Enter the Key
Go to Settings → AI & Tools and paste your key. It stays on your device only.
Open the Chat Panel
Press Ctrl+G or click the robot icon in the activity bar.
Real-time Collaboration
Code with others simultaneously. No account needed — just share a room ID.
Host a Room
Click Collab → Host Room. Share the Room ID. Set it public or private with an optional password.
Join a Room
Click Collab → Join Room and paste the Room ID.
Live Cursors
See every participant's cursor and name in real time as they type.
Follow Me Mode
Hosts can lock all viewers to follow their active file and scroll position.
Voice Huddle
Peer-to-peer voice session — no account required.
Whiteboard
Open a shared collaborative whiteboard canvas during any session.
Session Recording
Record, save, and play back full coding sessions frame by frame.
Live Leaderboard
Track keystrokes per participant in real time during a session.
Developer Tools
| Tool | What it does |
|---|---|
| Diff Viewer | Compare two versions of your code side by side. |
| Code Beautifier | Auto-format HTML, CSS, and JS with one click. |
| Minify | Compress HTML/CSS/JS to minimize file size. |
| Base64 Encode/Decode | Encode or decode any selected text. |
| Color Picker | Select a color and insert its HEX value directly into code. |
| QR Code Generator | Generate and insert a QR code image tag. |
| UUID Generator | Insert a random RFC-compliant UUID. |
| Hash Generator | SHA-256 hash of selected text. |
| Lorem Ipsum | Insert placeholder text at cursor. |
JS Debugger
A full step-through JavaScript debugger built into the IDE — no browser DevTools needed.
| Action | Shortcut |
|---|---|
| Run / Continue | F8 |
| Step Over | F10 |
| Step Into | F11 |
| Step Out | Shift+F11 |
| Toggle Breakpoint | Click the line number in the editor |
Call Stack
View the full execution call stack at any breakpoint.
Variable Inspector
Inspect all in-scope variables and their current values.
Watch Expressions
Add custom expressions to watch and evaluate continuously.
DOM Mutations
Track all DOM changes live while your code executes.
CodeStudio Hub
A built-in community platform to publish, discover, and share projects with other CodeStudio users.
Publish Projects
Share your project publicly with a title, description, cover image, and tags.
Discover
Browse Trending, New, Top Rated, and Most Downloaded projects.
Stars & Ratings
Star and rate projects. Follow other creators.
Open in IDE
Open any Hub project directly in the editor with one click.
Themes
CodeStudio includes 20+ built-in themes across Dark, Light, Textured, Seasonal, and Custom categories.
Settings Ctrl+,
| Tab | Options |
|---|---|
| Appearance | Theme, sidebar position, animations, compact mode, custom colors |
| Editor | Font, line height, tab size, preview refresh delay, word wrap, auto-save |
| AI & Tools | Gemini API key, model selection, analysis depth |
| Content | Sample projects, custom libraries, snippet management |
| Focus Sounds | Brown noise, white noise, rain, fireplace — generated locally |
| About | Version info, settings backup/restore, factory reset |
Keyboard Shortcuts
Snippets
Quick-insert chips appear in the toolbar. Click any chip to insert at cursor.
Add a Custom Snippet
Go to Settings → Content → Snippet Management, enter a name, paste your code, and click Add Snippet.
Use Your Snippet
Your custom snippets appear as chips in the toolbar and are saved across sessions.
Libraries
Browse 60+ CDN-hosted libraries organized by category from the Libraries icon in the activity bar.
| Category | Examples |
|---|---|
| CSS Frameworks | Tailwind CSS, Bootstrap 5, Bulma, DaisyUI |
| Fonts & Icons | Google Fonts, Font Awesome 6, Material Icons |
| JS Utilities | jQuery, Axios, Lodash, Day.js |
| Charts | Chart.js, D3.js, ApexCharts, ECharts |
| Animation | GSAP, Animate.css, AOS, Anime.js, Lottie Web |
| Frameworks | React 18, Vue 3, Alpine.js |
| 3D & Canvas | Three.js, p5.js |
Account & Sync
Sign in with Google
One-click sign in. Syncs your projects to the cloud automatically.
Google Drive Sync
Push and pull your projects to a CodeStudio folder in your Google Drive.
GitHub Gist
Push and pull project files to GitHub Gists using your Personal Access Token.
Settings Backup
Export all your settings to a file and restore on any device.
Install as App
CodeStudio is a PWA and can be installed on your device for offline use.
Open in Chrome / Edge
Visit the CodeStudio URL in a Chromium-based browser.
Click Install
Click Install App in the toolbar, or use the browser's address bar install icon.
Launch Offline
CodeStudio now opens like a native app and works fully offline.
Privacy
| Data | Where it goes |
|---|---|
| Your code & projects | Browser local storage only. Never sent to any server. |
| Gemini API key | Stored locally on your device. Never sent to CodeStudio servers. |
| AI chat messages | Sent to Google Gemini API only for the duration of the request. |
| Collab sessions | Peer-to-peer via WebSockets. Not stored permanently. |
| Hub projects | Stored in Firebase Realtime Database (publicly visible). |