Commenting in Projects
Team plans
Enterprise plans
Builder's commenting tools let your team collaborate directly within the Visual Editor without a need to switch to a separate tool or track feedback elsewhere.
You can comment on specific layers, tag teammates, attach screenshots automatically, reply to threads, and even hand off feedback directly to Builder AI.
Add a comment
- Click Comment.
- Choose Direct to comment directly on the branch, or PR to comment on a specific PR.
- Select an element, or layer, you'd like to make a comment about. Builder automatically adds a screenshot of the element to the comment to provide context to readers. This technique also lets Builder know which element on the screen the comment refers to.
- To optionally add additional attachments to a comment, click the image icon at the bottom left of the comment input.
- Type your comment and, if needed, notify a teammate or role with the
@sign. For example,@Kimor@Developer. - Click the Send button, which features a paper airplane icon.
The video below shows selecting an element in comment mode, which causes Builder to attach a screenshot of the relevant layer to the comment. The user then enters a comment and tags the recipient.
Scroll directly to the commented layer
Builder comments associated with a particular layer give you a way to scroll directly to the layer.
To make a comment scrollable, you must select an element, also referred to as a layer, when you create the comment, as described above. This way, Builder knows which layer the comment applies to.
- Go the Comments tab.
- To scroll directly to the layer a comment refers to, click the globe icon with the slash on the comment.
The video below shows clicking on the globe icon with a slash beside it so that Builder scrolls directly to the layer.
Address a comment with AI
To fix an issue in a comment using AI:
- Click the three dots menu of the comment.
- Select Fix in AI chat.
- Builder's AI immediately begins work based on the comment.
In the video below, the user uses the Builder AI to change the icon in a design from a heart icon to an animal paw icon for a pet social media project.
Edit a comment
To edit a comment you made:
- Click the three dots menu of a comment.
- Select Edit Comment.
- Make your edits and click the Save button.
Resolve a comment
To resolve a comment:
- Click the three dots menu of a comment.
- Select Mark as Resolved.
To display comments after resolving, click the three dots menu of a comment and select Show Resolved.
Delete a comment
To delete a comment:
- Click the three dots menu of a comment.
- Select Delete.
- In the confirmation dialog that opens, click the Delete button.
Disconnected comments
A comment marked "Not rendered in the current preview..." means Builder can't display a preview of the referenced element in its current state. This typically happens for one of two reasons:
- The element isn't visible in the current preview. Some elements only appear conditionally, for example a dropdown nav that opens on click or hover. Because the element isn't rendered at the time of preview, Builder can't show a snapshot of it.
- The element has been deleted or changed. If the underlying layer was removed or its code was significantly updated after the comment was made, the comment loses its connection to that element.
Disconnected comments still appear in the Comments tab and remain readable, but they won't scroll you to a layer or show an element preview.