Working with Projects

Project Dashboard Overview

When you open a project, you see:

• Files Tab: Browse and edit project files. The file tree shows your project structure. Click any file to open it in the editor.
• Pages Tab: View and manage application pages/routes. See all routes, preview them, and edit page components.
• Tasks Tab: (Coming Soon) Integrated task board for tracking project progress.
• Sync Feed Tab: See all changes and updates to your project, including who made changes and when.
• Dependencies Tab: (Beta) Manage project packages. View installed packages, add new ones, update existing ones, and see the dependency tree.
• Database Tab: (Alpha - Coming Soon) Database Studio for visualizing schemas, editing data, and managing migrations.
• Backend Studio Tab: (Alpha) Visual graph of your backend architecture showing connections between UI components, API endpoints, database tables, and services.
• Settings Tab: Configure project settings, manage team members, and control project behavior.

File Management

Creating Files and Folders

• Right-click in the file tree → "New File" or "New Folder"
• Enter a name
• Files are created immediately and synced to cloud storage

Editing Files

Click a file to open it in the Monaco editor

Features:

• Syntax highlighting for many languages
• Auto-completion
• Multiple cursors (Cmd+Alt+Up/Down)
• Find and replace (Cmd+F)
• Code formatting (Shift+Alt+F)
• Bracket matching
• Code folding

Saving Changes

• Files save automatically as you type
• Changes sync to cloud storage in real time
• Team members see updates within seconds

File Operations

• Rename: Right-click → "Rename"
• Delete: Right-click → "Delete" (with confirmation)
• Duplicate: Right-click → "Duplicate"
• Move: Drag and drop in the file tree

Searching Files

• Quick file search: Cmd+P (Mac) or Ctrl+P (Windows)
• Type part of the filename
• Press Enter to open

Searching in Files

• Find in file: Cmd+F
• Find across project: Cmd+Shift+F
• Supports regex and case-sensitive matching

Code Editor Features

Monaco Editor

• Syntax highlighting
• IntelliSense
• Code navigation (Go to Definition, Find References)
• Multiple cursors
• Code folding
• Minimap
• Line numbers
• Word wrap
• Themes (light/dark)

Collaborative Editing

• See others' cursors and selections
• Real-time updates
• Conflict resolution handled automatically

Keyboard Shortcuts

• Cmd+S / Ctrl+S: Save (auto-save enabled)
• Cmd+/ / Ctrl+/: Toggle comment
• Cmd+F / Ctrl+F: Find
• Cmd+Shift+F / Ctrl+Shift+F: Find in all files
• Cmd+G / Ctrl+G: Find next
• Cmd+D / Ctrl+D: Select next occurrence
• Alt+Up/Down: Move line up/down
• Shift+Alt+Up/Down: Copy line up/down
• Cmd+Shift+K / Ctrl+Shift+K: Delete line

Terminal Access

Opening Terminal

• Terminal panel at the bottom of the project view
• Multiple terminals: Click "+" to open additional sessions
• Each terminal is independent

Terminal Features

• Full shell access (bash/zsh on Mac/Linux, PowerShell on Windows)
• Run npm, git, and other commands
• See command output in real time
• Copy text from terminal output
• Clear terminal (Cmd+K or Ctrl+K)

Using Terminal

• Navigate: cd commands
• Install packages: npm install, yarn add, etc.
• Run scripts: npm run dev, npm start, etc.
• Git operations: git status, git commit, etc.
• Any command available in your system shell

Terminal Context

• Terminals open in the project root directory
• Commands run relative to the project folder
• Environment variables from connected integrations are available