How to Use the AI Studio Code Editor in Sparkforge

The Code Editor inside AI Studio gives you direct access to your project code without leaving the builder. Edit files, search across the project, catch issues quickly, and review changes in real time from one workspace.

Note: AI Studio is available through Labs. Turn it on for your sub-account before using it.

What the Code Editor does

The AI Studio Code Editor is a CodeMirror-powered environment built into the AI Studio builder. View, edit, and manage the code behind your AI-generated websites and web apps without an external IDE or separate deploy step. AI Studio generates a working project from your prompts, and the Code Editor gives you precise control over TypeScript, JSX, CSS, JSON, and other files.

Iterate where you build: edit code, see instant updates in the live preview, and use AI to diagnose and fix errors as you go.

What you get

• Direct code control when AI editing isn't precise enough.
• Granular changes to text, styling, components, routes, or file behavior without rebuilding the project.
• No context switching — edit inside AI Studio without downloading files.
• Fast debugging with AI-suggested fixes for build errors.
• Version history to preview, bookmark, and roll back changes.
• Smarter navigation via Find & Replace and Global Project Search.

Core features

Find & Replace

Open with Cmd/Ctrl + F to search inside the current file. Use case-sensitive and whole-word options. Replace one match at a time or apply a bulk replace.

Global Project Search

Search across the entire project, not just the open file. Results group under each file with line numbers and one-click navigation to the matching line.

Instant Save and Live Preview

Click Save in the builder and the live preview updates in seconds — no separate deploy step.

Smart Error Detection

If a build fails after saving, the chat shows Code edited with Build unsuccessful. Click Details to review the error, then Try to fix to let AI analyze and patch the issue. Click Preview to confirm the fix.

Automatic Route Detection

When a new route is created in code, it appears automatically in the route selector — no manual registration.

Version History

Every save creates a new version. Open it from the clock icon at the top of the builder.

Unsaved Changes Protection

If you try to leave with unsaved code, AI Studio warns you so you can save before exiting.

How to use the Code Editor

1. Open the Code Editor. In your AI Studio project, click Code.
2. Pick a file and edit. Open from the file tree. Use Find & Replace or Global Project Search to locate content.
3. Save. Click Save to apply updates and refresh the preview.
4. Review the preview and fix errors. If a build error appears, click Details, then Try to fix.
5. Publish. When the changes look right, publish the project to make them live.

FAQ

Do I have to use the Code Editor to benefit from AI Studio?

No. AI Studio can generate complete pages and flows from prompts. The Code Editor is for users who want deeper control over layout, styling, logic, or integrations.

Which file types are supported?

TypeScript, JSX, CSS, JSON, and other text-based project files used inside AI Studio.

Does saving auto-publish my changes to the live site?

No. Saving updates the preview only. Your public site updates when you publish the AI Studio project.