✦

📁 src/ ├── 📄 views/ │ ├── HomeView.swift │ └── DetailView.swift ├── 📄 models/ │ └── Item.swift └── 📄 App.swift

Code Browser

Navigate, read, and understand your generated source code.

< > { } [ ] //

Syntax highlighting Swift · JS · TS · HTML · CSS · JSON File tree ready

Code Browser

Navigate the generated file tree, read syntax-highlighted source code, and understand how your app is structured.

File tree navigation

After the AI builds your project, the Code Browser presents a complete file tree. The tree mirrors the actual project structure — folders for views, models, styles, and configuration files, all organized the way a developer would structure them.

Folders expand and collapse with a tap
Files open in the code viewer with a single tap
Icons indicate file type — Swift, JavaScript, HTML, CSS, JSON
Dirty indicators show files modified by the most recent build

Typical project structure

MyProject/
├── Sources/
│   ├── Views/
│   │   ├── ContentView.swift
│   │   ├── HomeView.swift
│   │   └── SettingsView.swift
│   ├── Models/
│   │   └── Item.swift
│   ├── ViewModels/
│   │   └── HomeViewModel.swift
│   └── App.swift
├── Resources/
│   └── Assets.xcassets
├── Package.swift
└── README.md

Syntax highlighting

The Code Browser renders source code with full syntax highlighting, making it easy to read and understand generated code at a glance.

🐦

Swift

Keywords, types, string interpolation, and SwiftUI views are all highlighted with distinct colors.

📜

JavaScript

Functions, variables, template literals, and JSX/TSX elements are highlighted correctly.

🔷

TypeScript

Type annotations, interfaces, generics, and imports are distinguished from regular JS.

🌐

HTML / CSS / JSON

Tags, attributes, selectors, properties, and structured data all get proper highlighting.

Editing capabilities

The Code Browser is primarily a read-only viewer, but you can interact with it in several ways:

Copy code — tap the copy button on any file to copy its contents to the clipboard
Ask the AI to edit — describe the change you want in the AI Builder chat, and the AI will modify the file
Search within files — use the search bar to find specific functions, variables, or strings across the project

Direct in-editor editing is not supported. All changes go through the AI Builder, which ensures consistency across files and prevents breaking changes.

How files are organized after generation

When the AI builds a project, it follows platform conventions:

iOS projects — SwiftUI views in Views/, data models in Models/, business logic in ViewModels/
Web projects — components in src/components/, pages in src/pages/, styles in src/styles/
Configuration files — Package.swift, package.json, or index.html at the project root

The file organization is determined by the AI based on the project type and best practices for the target platform. You can ask the AI to reorganize files if you prefer a different structure.