Projects offer integrated editing modes for building applications using different approaches within a unified workspace.
Switch seamlessly between visual design, interactive testing, and direct code editing while maintaining full project context.
When opening a project, the workspace starts in Interact mode by default. Click any mode tab at the top of the workspace to switch between different editing approaches.
Interact mode displays applications as fully functional previews for testing user interactions and experiencing the application as end users experience it.
Interact mode supports the following capabilities:
- Test user flows and interactive elements.
- Preview applications across different screen sizes.
- Validate functionality and user experience.
- View real-time updates as changes occur in other modes.
Interact mode serves as a testing environment and provides immediate feedback on application performance.
This video shows testing and previewing an application in Interact mode:
This mode is also where you can find the AI prompt window and other collaboration tools.
Code mode offers direct access to project source code and file structure with a complete code editing environment.
Code mode supports the following capabilities:
- Edit files with syntax highlighting and code completion.
- Navigate project structure through the file explorer.
- View terminal output and development server logs.
- Monitor development server status and access URLs.
- View and edit code: browse the complete project file structure and edit files with full syntax highlighting, auto-completion, and real-time error detection.
- Engage with AI: analyze code changes, understand structure modifications, and receive detailed explanations of implementation decisions.
- Development monitoring: track live development server status, file updates, and build processes through integrated terminal output.
- GitHub integration: connect repositories for seamless code deployment and pull request creation through the Send PR button.
Changes made in Code mode automatically sync with Design and Interact modes, maintaining consistency across the workflow.
The video below demonstrates how to edit code, take AI assistance, and review changes in Code mode: