Help Center

What is the Code Editor in AI Studio?

The Code Editor in AI Studio is an integrated coding environment that allows you to directly edit and manage your project's code without leaving the CRM platform. It provides a workspace where you can modify files, search across your entire project, identify issues quickly, and observe changes in real time. This tool bridges the gap between AI-generated output and manual adjustments, giving you greater control over your project's development.

Important: AI Studio is available through Labs. Ensure it is enabled for your sub-account before use.

Key Benefits of the Code Editor

Enhanced Control: Make precise code-level adjustments beyond what AI editing alone offers.
Granular Modifications: Edit specific text, styling, components, routes, or file behaviors without overhauling the entire project.
Seamless Workflow: Code directly within AI Studio without downloading files or switching to external tools.
Rapid Debugging: Identify errors immediately and use AI-powered suggestions to generate corrections.
Safe Experimentation: Utilize version history to preview, bookmark, or revert changes at any time.
Efficient Navigation: Use search tools to quickly locate files, lines, or components within your project.

Core Features of the Code Editor

Find & Replace

Find & Replace helps you locate and update text within the current file. It is useful for renaming components, updating copy, or refactoring variable names consistently. Open it with Ctrl+F (or Cmd+F on Mac) to search within the file, use case-sensitive or whole-word options, and replace matches individually or in bulk.

Global Project Search

Global Project Search allows you to search across all files in your AI Studio project. Results are grouped by file, with matches highlighted and line numbers provided for easy navigation. Click any result to jump directly to that location in the Code Editor.

Instant Save & Live Preview

After editing code, click the Save button to see updates reflected in the live preview within seconds, eliminating the need for a separate deployment step.

Smart Error Detection

When errors occur after saving, they appear in the chat with a "Build unsuccessful" message. Click Details to review the error, then use "Try to fix" to let AI analyze and attempt a resolution. Review the proposed fix and preview the result to confirm it works.

Automatic Route Detection

When you add new routes in code, they are automatically detected and appear in the route selector, helping keep your project structure organized.

Version History

Each time you save your code, a new version is created. Access version history by clicking the Clock icon at the top of the builder to review, compare, or revert changes.

Unsaved Changes Protection

If you attempt to leave with unsaved changes, a warning prompts you to save your work before exiting, preventing accidental loss of progress.

How to Use the Code Editor

To use the Code Editor, start with an AI-generated project in AI Studio. Open the editor to view and modify files as needed. Utilize the search, error detection, and preview features to refine your code efficiently. Always save changes to update the live preview and create version history points.

Using the Code Editor in AI Studio