Comments & Feedback

Canvas Annotations

Canvas annotations are comments pinned to a specific position on a folio. Reviewers click anywhere on a shared folio to leave context-rich feedback.

Annotation Data

Each annotation includes:

{
  "id": "comment_abc123",
  "text": "This chart needs a legend",
  "author": "reviewer@example.com",
  "filename": "index.html",
  "x": 45.2,        // percentage from left
  "y": 30.8,        // percentage from top
  "slideIndex": 2,  // for deck mode
  "selector": "#chart-container",
  "elementHtml": "<div id='chart-container'>...</div>",
  "resolved": false,
  "createdAt": "2026-06-15T10:30:00Z"
}

Managing Comments

As the folio owner, you can:

• View all comments in the studio — organized by slide/page and position
• Resolve comments — mark as addressed without deleting
• Reply — the studio chat panel supports threaded discussions
• Delete — remove outdated or irrelevant feedback

Emoji Reactions

Viewers can leave quick emoji reactions on shared folios:

• 👍 Like
• 🎉 Celebrate
• 🚀 Mind-blowing
• ❤️ Love
• 👀 Seen

Reactions are tracked per-version and displayed as aggregate counts.

Reactions API

// GET /api/files/[id]/reactions
{
  "reactions": {
    "👍": 12,
    "🎉": 5,
    "🚀": 3,
    "❤️": 8
  }
}

The Curated Brief

In the studio, the AI assistant can generate a curated design brief from open comments. This brief:

1. Collects all unresolved annotations
2. Organizes them by slide/page and position
3. Provides context (target element, selector, suggested fix)
4. Formats everything as a structured design document

This is also available via MCP with the get_curated_brief tool — AI agents can read the brief to understand what changes reviewers want.

Example Brief Snippet

## 🎨 Current Open Feedback & Visual Annotations

### Pin #1: This chart needs a legend
- Author: reviewer@example.com
- File Target: index.html
- Context/Slide: Slide Index: 2
- Canvas Position: X: 45.2%, Y: 30.8%
- Target DOM Selector: #chart-container

Feedback Workflow

1. Publish a folio and share the URL
2. Reviewers leave annotations and reactions
3. Review feedback in the studio
4. Use the curated brief to understand what needs changing
5. Edit and re-publish — new version incorporates feedback
6. Resolve comments once addressed

Best Practices

• Encourage specific annotations — "change the header color to blue" is better than "looks wrong"
• Resolve, don't delete — resolved comments create an audit trail
• Check the brief before editing — the AI-generated summary saves time
• Use reactions for quick sentiment — not every review needs a written comment