Want more control over an AI Studio project than prompts alone can give you? The built-in Code Editor lets you open your project's files, make precise changes, and see the results instantly, all without leaving the builder. It's built for the moments when you need to go beyond what AI-generated output can do on its own.
Heads up: AI Studio lives under Labs in your account settings. Make sure it's turned on before you get started.
What Is the AI Studio Code Editor?i
The AI Studio Code Editor is a built-in coding environment, powered by CodeMirror, that lives right inside the AI Studio builder. It lets you view, edit, and manage the code behind your AI-generated websites and web apps directly in Captivation Hub, no external IDE or separate deploy step needed. Since AI Studio builds a working project from your prompts (an idea, a reference URL, or a design you upload), the Code Editor gives you hands-on control over the TypeScript, JSX, CSS, JSON, and other files running underneath it.
You can iterate right where you build: edit code, watch the live preview update instantly, and let AI help diagnose and fix errors as they come up.
Core Features of the Code Editor
Several built-in tools make the Code Editor easier to work with: searching project files, reviewing changes, catching errors early, and managing updates with confidence. Together they make both quick fixes and bigger code changes feel more manageable.
Find & Replace
Find & Replace helps you quickly locate and update text inside the file you're working in, using a familiar editor-style search. It's especially handy for renaming components, updating hardcoded copy, or keeping variable names consistent across a file.
With Find & Replace, you can:
- Open Find & Replace with Cmd/Ctrl + F to search within the current file using a VS Code-style search experience.
- Type your search term to highlight all matches in the file.
- Use case-sensitive and whole-word options to avoid accidental partial matches.
- Replace matches one-by-one or apply a bulk replace.
Global Project Search
Global Project Search takes things further, letting you search your entire AI Studio project instead of just the file you have open. That's a real time-saver on larger projects where you'd otherwise be opening file after file by hand.
Global Project Search gives you:
- Project-wide search results with each match grouped under its file.
- Highlighted matches so you can quickly scan relevant lines.
- Line numbers for each result, making it easy to orient yourself in the file.
- One-click navigation to jump directly into the matching file and line in the Code Editor.
Instant Save & Live Preview
Instant Save & Live Preview means you don't have to commit changes and wait on a separate deploy step to see what you did. Update your code and the builder's preview reflects it right away.
Just click the Save button in the builder and the live preview updates in seconds.
Smart Error Detection
Smart Error Detection catches build issues while you're still working in the Code Editor, so you don't have to leave AI Studio to troubleshoot somewhere else. Review the failed build right in the chat, then let AI take a shot at fixing it. That keeps you moving instead of getting stuck.
How to use Smart Error Detection:
Review the build error and start the AI fix
After you save code changes, an error may appear in the chat as "Code edited" with "Build unsuccessful" underneath it. Click Details to review the build error, then click Try to fix to have AI analyze the issue and attempt a fix.
Review the AI fix and preview the result
AI will identify the error, update the code, and then post a follow-up message explaining what was fixed. From there, click Details to review the updated information, or click Preview to refresh the preview and confirm the fix worked.
Automatic Route Detection
Automatic Route Detection keeps your project structure organized as you add new routes in code. There's no manual follow-up needed - once a new route is created in code, it shows up automatically in the route selector.
Version History
Version History gives you a safety net by preserving earlier states of your project. It makes it easy to review changes, compare versions, and recover from a mistake without starting from scratch. Every time you save your code, a new version gets created automatically.
To access it, click the clock icon at the top of the builder.
Unsaved Changes Protection
Captivation Hub will warn you before you leave the Code Editor with unsaved changes, so you don't accidentally lose work. Try to exit with unsaved code, and a prompt gives you the chance to save first.
How to Use the Code Editor
Using the Code Editor starts with a project AI Studio has already generated for you, giving you more control over how it looks and behaves from there. Once your project exists, you can open the Code area to make direct edits, check them in preview, and publish when you're ready.
Follow these steps to get started with the Code Editor:
Step 1: Open the Code Editor
Open the AI Studio project you want to update. In the project workspace, click Code to access the Code Editor.
Step 2: Select the file and update the code
Open the file you want to edit from the file tree, then make your code changes directly in the editor. Use Find & Replace or Global Project Search if you need help locating the right content or file.
Step 3: Save your changes
Click Save to apply your updates and refresh the latest preview.
Step 4: Review the preview and fix any errors
Check the preview to confirm that the content, layout, and functionality appear as expected. If a build error appears after saving, click Details to review the issue, then click Try to fix to let AI attempt a correction.
Step 5: Publish your project
Once your changes look correct and your project is ready, publish the project to make the updates live.
Frequently Asked Questions
Q: Do I have to use the Code Editor to benefit from AI Studio?
Nope, not at all. AI Studio can generate complete pages and flows from your prompts with zero manual coding required. The Code Editor is there for when you want more control over layout, styling, logic, or integrations than the chat and visual builder alone can give you.
Q: Which languages and file types does the AI Studio Code Editor support?
It's CodeMirror-powered, so you can edit TypeScript, JSX, CSS, JSON, and other text-based project files used inside AI Studio.
Q: Does the Code Editor auto-save my work?
Not automatically - your changes save when you click Save. If you try to leave with unsaved changes, you'll get a warning first, so you're not likely to lose work by accident.
Q: Do edits in the Code Editor immediately affect my live, public site?
No. Saving updates your live preview, but your actual public site only changes once you publish the project. Take a look at the preview first, then publish whenever you're ready to make it official.
Comments
0 comments
Please sign in to leave a comment.