Projects offers three 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.
Design mode provides the full capabilities of Builder's Visual Editor for building interfaces without code. Select any element to modify element properties using the Style tab.
Design mode supports the following capabilities:
- Select and edit elements directly on the live canvas.
- Add components and templates using the Insert tab.
- Adjust layouts, typography, and styling using the Style tab.
- Configure margins, padding, and design tokens.
- Configure element settings and behaviors using the Options tab.
- Manage element hierarchy and organization using the Layers tab.
- Connect to data sources and bind dynamic content using the Data tab.
- Access AI-powered content generation and component suggestions.
- Import designs from Figma or existing websites.
Select elements and make changes using the Style tab. Click Apply Visual Changes to sync visual edits with the underlying code. For more information, see Create a pull request.
The following video demonstrates how to use Design mode to visually edit elements and apply changes to the code:
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 the app in Interact mode:
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:
- Learn more about Projects and getting started with AI-powered development.
- Read Projects from prompts for best practices, including supported file formats and size limits.
- Explore complete Import from Figma workflows with step-by-step instructions.
- Read about connecting GitHub to Projects for version control integration.
- Get tips from Projects best practices to optimize workflows.