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 in the work area.
- 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.
- 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:
By default, Build mode is on for all prompts. When enabled, the AI immediately implements received prompts to the best of its ability.
Build mode works best when you know exactly what you want built and can provide clear, specific instructions. Plan mode lets you discuss and refine your ideas through back-and-forth dialogue before Fusion implements the changes.
For a more conversational experience, enable Plan mode by clicking the toggle within the prompt field and choosing the Plan option.
Plan mode develops a comprehensive plan of Fusion's proposed implementation. This process uses fewer credits than Fast mode, allowing you to refine the AI's approach before incurring additional AI credits and time spent on writing code. It is highly recommended to use Plan mode before editing large amounts of code.
Code changes are not be implemented until the Implement Plan button is pressed.
In the video below, the user selects Plan mode to discuss with the AI options on how to implement a dark mode feature. After the plan has been made, the Implement Plan button is clicked, leading to code changes.
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: