> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Code Editor
> View and edit Swift code directly (Pro plan feature)
# Code Editor
The Code Editor lets you see and edit the actual Swift code of your app. It's perfect for learning, making quick tweaks, and understanding what the AI creates.
The Code Editor is available on **Pro** and **Scale** plans. [Upgrade your plan](/introduction/plans-and-pricing) to access this feature.
***
## When to Use the Code Editor
### Learning Swift
Watch the AI generate code, then explore it in the editor. You'll learn:
* Swift syntax and patterns
* SwiftUI view structure
* How professional apps are organized
* iOS development best practices
### Quick Tweaks
Sometimes it's faster to edit directly:
* Changing a color value
* Adjusting spacing
* Fixing a typo in text
* Modifying a simple condition
### Debugging
When something isn't working:
* Read the code to understand what's happening
* Add print statements
* Check for obvious issues
* See exactly what the AI generated
### Reading Logs
View runtime output:
* Print statements
* Error messages
* App behavior traces
***
## The Code Editor Interface
### File Browser
On the left, your project's file structure:
```
YourApp/
├── Views/
│ ├── ContentView.swift
│ ├── HomeView.swift
│ └── SettingsView.swift
├── Models/
│ ├── Task.swift
│ └── User.swift
├── Services/
│ └── DatabaseService.swift
└── App.swift
```
Click any file to open it.
### Editor Panel
The main area shows code with:
* **Syntax highlighting** — Colors for keywords, strings, types
* **Line numbers** — For navigation and reference
* **Search** — Find text (Cmd+F)
* **Auto-indentation** — Code stays formatted
### Logs Panel
At the bottom (toggle to show):
* Build output and errors
* Print statements from your code
* Runtime logs
***
## File Organization
Nativeline organizes code into standard Swift structure:
| Folder | Contents |
| -------------- | -------------------------------------- |
| **Views/** | SwiftUI views (screens and components) |
| **Models/** | Data structures and types |
| **Services/** | API calls, database access, utilities |
| **Resources/** | Images, fonts, assets |
***
## Making Edits
### Editing Workflow
1. Navigate to the file
2. Click to open
3. Make changes
4. Save (Cmd+S)
5. App rebuilds automatically
### Example: Changing a Color
```swift theme={null}
// Before
Text("Hello")
.foregroundColor(.blue)
// After
Text("Hello")
.foregroundColor(.orange)
```
### Example: Adjusting Padding
```swift theme={null}
// Before
VStack {
// content
}
.padding(16)
// After
VStack {
// content
}
.padding(24)
```
### Example: Fixing Text
```swift theme={null}
// Before
Button("Sumbit")
// After
Button("Submit")
```
***
## Understanding Swift Code
### Views (SwiftUI)
Most UI is in SwiftUI views:
```swift theme={null}
struct HomeView: View {
var body: some View {
VStack {
Text("Welcome!")
.font(.title)
Button("Get Started") {
// action here
}
}
}
}
```
**Key concepts:**
* `struct HomeView: View` — Defines a view
* `var body: some View` — What it displays
* `VStack`, `HStack`, `ZStack` — Layout containers
* Modifiers like `.font()`, `.padding()` — Styling
### Models (Data)
Data structures:
```swift theme={null}
struct Task: Identifiable {
let id: UUID
var title: String
var isCompleted: Bool
var dueDate: Date?
}
```
### State Management
Using `@Observable`:
```swift theme={null}
@Observable
class TaskManager {
var tasks: [Task] = []
func addTask(_ title: String) {
tasks.append(Task(title: title))
}
}
```
***
## Reading Logs
### Accessing Logs
1. Open Code Editor
2. Find the Logs panel/tab
3. Run your app
4. Watch output appear
### Adding Log Statements
Ask the AI:
```
Add print statements to the save function to trace what's happening
```
Or add manually:
```swift theme={null}
print("Save button tapped")
print("Saving data: \(userData)")
```
### Log Types
| Log | Meaning |
| ---------------- | ------------------- |
| Build output | Compilation status |
| Errors | What went wrong |
| Print statements | Your debug output |
| Runtime warnings | iOS system messages |
See [Reading App Logs](/guides/app-logs) for more details.
***
## Best Practices
### Do
* ✅ Save frequently (Cmd+S)
* ✅ Make small, incremental changes
* ✅ Test after each change
* ✅ Use AI for complex changes
* ✅ Learn from the generated code
### Don't
* ❌ Make massive changes without testing
* ❌ Delete code you don't understand
* ❌ Ignore compiler errors
* ❌ Forget to save before rebuilding
***
## When Code Changes Don't Work
If your edits cause build errors:
1. **Check the error** in the Logs or chat
2. **Undo** (Cmd+Z) if you can't fix it
3. **Ask the AI:** "Fix this error: \[paste error]"
4. **Rebuild** after fixing
### Common Swift Errors
| Error | Cause | Fix |
| ------------------ | ---------------------- | -------------------- |
| Missing `}` | Unbalanced braces | Add missing brace |
| Type mismatch | Wrong data type | Check types |
| Unknown identifier | Typo or missing import | Check spelling |
| Missing `return` | Function needs return | Add return statement |
***
## Code Editor vs AI Chat
| Use Code Editor | Use AI Chat |
| ----------------- | --------------------- |
| Fixing typos | Creating new features |
| Changing values | Adding screens |
| Adjusting colors | Complex logic |
| Learning the code | Major refactoring |
| Quick tweaks | Design changes |
### Combining Both
"Create a settings screen with toggle options"
Open in Code Editor to understand what was created
Adjust colors, padding, or text directly
"Add an animation when toggles change"
***
## Keyboard Shortcuts
| Shortcut | Action |
| ----------- | -------------- |
| Cmd+S | Save file |
| Cmd+Z | Undo |
| Cmd+Shift+Z | Redo |
| Cmd+F | Find in file |
| Cmd+G | Find next |
| Cmd+/ | Toggle comment |
***
## Related
Detailed guide to debugging with logs
All available shortcuts