Navigation

Navigate your project using the top navigation bar.

View Modes

Toggle between views using the buttons on the right side of the navigation bar.

• Interface — Visual drag-and-drop UI builder
• Code — Write PHP and JavaScript
• Split — Interface and code side by side
• Settings — Project configuration (database, GitHub, API keys)
• Profile — User account and preferences

Overview

The top navigation bar provides quick access to all parts of your project. From left to right:

• Branch: Current git branch (green dot = main)
• Route: Current page or API endpoint
• File: Current PHP or Vue file
• Method: Current function being edited

Branch Dropdown

Switch between branches or create new ones for version control.

Branch Indicators

• Green dot (●): Main/default branch
• Gray dot (●): Feature or other branches
• Checkmark (✓): Currently active branch

Creating Branches

Enter a branch name and click Create. Branch names should be descriptive:

• feature/user-profiles
• bugfix/login-redirect
• experiment/new-design

Branch creation requires an active subscription.

Route Dropdown

Manage pages and API endpoints for your application.

Route Types

• Pages: Web routes that render views (GET requests)
• API Endpoints: REST API routes with HTTP method badges

HTTP Methods

• GET (green): Retrieve data
• POST (blue): Create data
• PUT (orange): Update data
• DELETE (red): Delete data

Route Actions

• Route Settings: Configure path, controller, middleware
• Share Page: Get a shareable preview link
• Delete Page: Remove the route (with confirmation)

File Dropdown

Navigate and manage your PHP and Vue files.

File Categories

• Controllers: HTTP request handlers (App\Http\Controllers)
• Models: Eloquent database models (App\Models)
• Middleware: Request filters (App\Http\Middleware)
• Services: Business logic classes (App\Services)
• Vue Components: Frontend components (resources/js)

File Actions

• New File: Create a controller, model, or component
• Create Resources: Generate a full CRUD stack (model, controller, migration)
• Close File: Close the current file

Method Dropdown

Switch between methods in the current file.

Each method shows:

• Name: The function name
• Return type: What the method returns (→ Type)
• Checkmark: Currently selected method

AI Chat Panel

Access AI assistance from anywhere in the editor.

Model Selection

• Haiku: Fast responses for simple tasks
• Sonnet: Balanced speed and capability (default)
• Opus: Most capable for complex tasks

The AI can read your current context and make changes directly to your code.

Next Steps

• Code Editor - Edit methods and files
• Interface Builder - Build UI visually
• Project Settings - Configure your project