The Builder menu is represented by the Builder icon in the top-left of the screen. It provides access to:
- A Back link, to return to the Projects page
- Useful tools, such as the Command Palette
- Your used and available Agent Credits
Projects offers three integrated editing modes for building applications using different approaches within a unified workspace.
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:
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:
In the center of the toolbar is a location bar that can be used to navigate between pages. Type your route into the bar, and then press enter to navigate to a different page in your Project.
Click the + icon to invite users by their email addresses. Keep in mind that you may have Space restrictions as to the number of members that can access the Space.
This functionality can also be found within the Share button menu.
When multiple members are within the same Project, their profile icons will be displayed here as well.
Click the mobile icon to enter responsive mode. Click the various device breakpoints or drag the screen size yourself.
You can customize these breakpoints within your Account settings. For more details, visit Customizable breakpoints.
Clicking this button will generate a preview link to view your Project. This URL can be shared externally to demonstrate your Project.
This link can also be found within the Share button menu.
For more details, including how to password protect your Project previews, visit Preview a Project.
This button combines collaboration-related features into a single menu, including the Project preview link and the ability to invite collaborators to your project.
Depending on your Project's settings, this button will read either Create Repo or Send PR.
The Create Repo button appears if you have created a Project from a prompt. When you create a repository, you can associate that repository with any account or organization you have access to.
To create a new repository:
- Click the Create Repo button.
- Choose the account you'd like the repository to be associated with.
- Provide a name for the repository.
- Click Create Repository.
- Wait just a moment. Fusion creates the repository and then bring you to the repository's page.
To submit changes and create a Pull Request (PR) to a connected repository:
- In the Visual Editor, make the required updates.
- Click Send PR from the toolbar.
- In the Pull Requests tab, review the proposed changes.
Members with access to this repository can comment in the pull request and tag @builderio-bot with specific instructions. The bot applies the changes to the Pull Request.
The following video demonstrates sending a PR and using the Builder agent to apply changes:
The overflow menu, represented by the vertical ellipsis, contains additional features related to your Project.
This option downloads your current Project code as a .zip file. If you wish to test and view the code locally, this can be a useful option.
By selecting a specific Layer in Fusion, you can export your design to Figma. This lets you to use the right tool for the task at hand.
Within a Fusion Project:
- Switch to the Design tab.
- Select the layer you wish to export. You can interact directly with the page or use the Layers tab.
- On the top-right of the screen, click the overflow (three-dot) menu and select Export to Figma.
To import your design to Figma, you need the Builder Figma plugin.
After installing the plugin:
- Open the Builder Figma plugin within Figma.
- Click the Import tab.
- Click the field where it let you paste from your clipboard.
- Paste your exported design.
You may need to make some adjustments to your design to get it to appear correctly within Figma.
Choosing this option will attempt to merge the main branch of your repository into your current Project's branch. This is only available if you are making a Pull Request with your Project.
While this can be useful in certain scenarios, it is best practice to make small changes to your Projects before making a Pull Request. This improves the chance of avoiding any issues with conflicting code.