How do I create a new project?
Click the + button at the top of the Explorer panel in the left sidebar. Type a name, choose a language (Web, JS, Python, etc.), and press Enter. Your project opens instantly with the appropriate starter files ready to edit.
How do I save my work?
CodeStudio auto-saves to your browser's local storage every 3 seconds. Press Ctrl+S anytime to save manually and sync to your account if logged in. For a permanent backup, click Export in the toolbar to download a ZIP of your entire project.
How do I switch between files (HTML, CSS, JS)?
Click the file tabs at the top of the editor area, or use Ctrl+1 / Ctrl+2 / Ctrl+3 to jump between HTML, CSS, and JS instantly. Custom files you create also appear as tabs and are clickable.
How do I see a live preview?
The preview pane on the right updates automatically as you type. Click Refresh in the toolbar to force a full reload. Use the Full button in the toolbox to open your project in a dedicated fullscreen tab.
How does the Split editor work?
Click Split in the toolbox (or press Ctrl+\) to open a second editor pane side-by-side. Use the file tabs at the top of the split pane to choose which file to view — it reads all your actual project files including custom ones. Edits in the split pane are saved back to the project in real time.
How do I use the AI assistant?
Click the Robot icon () in the left activity bar to open the Gemini AI panel. Type your question or request — the AI can write, fix, explain, and refactor your code. Go to Settings → AI & Tools and paste your Gemini API key to enable it (aistudio.google.com).
How do I import an existing project?
Click Import in the top toolbar. You can upload a ZIP file (CodeStudio will unpack it and map files automatically), a single HTML file (it splits out embedded CSS/JS), or a JSON workspace backup. Drag-and-drop onto the editor also works for single files.
How do I add an external library (like Bootstrap or jQuery)?
Click the Libraries icon () in the left activity bar. Browse by category and click any library card to inject its CDN tag into your HTML instantly. For unlisted libraries, scroll to Custom Libraries and paste any <script> or <link> CDN tag.
How do I create additional files (.py, .ts, .json, etc.)?
In the Explorer panel, click the new file icon () next to your project name. Enter any filename with an extension (e.g. utils.js, data.json, app.py). The file appears as a tab in the editor with the correct syntax highlighting. Only HTML, CSS, and JS are rendered in the live preview — all other types are editing-only.
How do I collaborate in real time?
Click the Collab icon () in the left activity bar. Click Host Room and share the generated Room ID with your teammates. Others paste the ID and click Join. All keystrokes, cursor positions, and file switches sync live with no account required. Use the Voice button to start a voice huddle while coding together.
How do I search and replace inside my code?
Press Ctrl+H or click the Search icon () in the left activity bar to open the Find & Replace panel. Type your search term, optionally a replacement, and use the Replace or Replace All buttons. Supports plain text and regular expressions via the .* toggle button.
How do I use code snippets?
The
Snippets toolbar just below the navbar shows quick-insert chips (HTML5, div, button, table, Flex, Grid, Fetch). Click any chip to insert it at your cursor. To
add your own snippets, go to
Settings → Content → Snippet Management — enter a name, paste your code, and click
+ Add Snippet. Your custom snippets immediately appear as chips in the toolbar and are saved across sessions.
How do I open the console and debug errors?
The Console panel is docked at the bottom of the editor. It shows console.log() output, warnings, and runtime errors from your live preview as you type. Click the >_ Console header to expand or collapse it. Click Clear to wipe the log. The console also highlights which file and line an error came from.
How do I use Focus Mode?
Press F11 or click the expand icon in the top-right of the navbar to enter Focus Mode. This hides the navbar, toolbox, sidebar, and status bar — leaving only the editor and preview. Press Esc or click the floating Exit Focus badge to return. Great for distraction-free writing sessions.
How do I change the theme or font?
Click the palette button () in the top toolbar to cycle between Dark and Light mode. For the full theme picker (Dracula, Oceanic, Monokai, Midnight, Nord, Synthwave, and texture variants), open Settings → Appearance. Font family and editor font size are under Settings → Editor.
How do I use the Diff Viewer?
Press Ctrl+D (when focus is outside the editor) or click Diff Viewer in the Dev Tools sidebar panel. Paste the old/original code into the Before pane on the left — the After pane automatically loads your current file. Click Run Diff to see added lines highlighted green and removed lines highlighted red. Use Refresh After to re-sync the After pane with the latest editor content.
How do I take a code snapshot / undo to a past version?
Open Dev Tools → Snapshots. Click Save Snapshot to capture the current state of all files. Saved snapshots are listed with their timestamp — click Restore on any entry to roll back the entire project to that point. Snapshots are stored locally per project.
How do I export or share my project?
Click Export in the top toolbar. Options include: Single HTML (CSS and JS inlined into one self-contained file), Project ZIP (all files as a separate downloadable archive), and Share Link (encodes the entire project into a URL you can paste anywhere — no account needed). For Git users, the Project ZIP is the easiest way to drop your code into a repository.
My project disappeared — how do I recover it?
Projects are stored in your browser's local storage. Clearing browser data, using a private/incognito window, or switching to a different browser will lose them. Always export a ZIP backup regularly. If you have a backup, restore it via Import. Logging into a CodeStudio Account syncs your workspace to the cloud so it survives browser resets.
Can I use CodeStudio offline?
Yes — CodeStudio is a single self-contained HTML file that runs entirely in your browser with no server required. Editing, live preview, console, split view, themes, snippets, and local saves all work completely offline. An internet connection is only needed to load CDN libraries in your project, use the Gemini AI assistant, or join a real-time collaboration room.
What are all the keyboard shortcuts?
Press Ctrl+K to open the full shortcuts reference. Key ones: Ctrl+/ comment, Ctrl+Z / Ctrl+Y undo/redo, Ctrl+B sidebar, Ctrl+N new project, Ctrl+H find & replace, Ctrl+\ split view, Ctrl+P toggle preview, Ctrl+R refresh preview, Ctrl+E export, Ctrl+D diff viewer, Ctrl+G AI chat, F11 focus mode, Tab / Shift+Tab indent/outdent.