Skip to content
feedpipe

Toolbar Overview

The feedpipe toolbar is automatically injected into HTML pages served through a feedpipe tunnel. It enables reviewers to add comments and highlights without any setup.

Appearance

The toolbar appears in the bottom-right corner of the page:

┌─────────────────────────────────────────┐
│  [↖] [💬] [🔲]  │  3 notes  ●          │
└─────────────────────────────────────────┘
  • Select mode (↖): Default mode, normal page interaction
  • Comment mode (💬): Click elements to add comments
  • Highlight mode (🔲): Draw rectangles to highlight areas
  • Note count: Number of annotations on the current page
  • Status dot: Green when connected, red when disconnected

Modes

Select Mode

The default mode. The page behaves normally—you can click links, fill forms, etc.

Comment Mode

Click any element to add a comment:

  1. Click the comment button (💬) in the toolbar
  2. Hover over elements—they’ll be highlighted in cyan
  3. Click an element to select it
  4. Type your comment in the popup
  5. Press Submit or Cmd/Ctrl+Enter

The comment is anchored to the element using a CSS selector. If the element moves or changes, feedpipe will try to find it again.

Highlight Mode

Draw a rectangle to highlight an area:

  1. Click the highlight button (🔲) in the toolbar
  2. Click and drag to draw a rectangle
  3. Type your comment in the popup
  4. Press Submit or Cmd/Ctrl+Enter

Highlights are anchored to viewport coordinates, normalized to work across different screen sizes.

Annotations

Annotations appear as:

  • Pins (numbered circles) for comments on elements
  • Orange rectangles for highlights

Click any annotation to see its details:

  • Author name
  • Time created
  • Comment text
  • Resolve/Delete buttons

Keyboard Shortcuts

ShortcutAction
EscapeCancel current action / close popups
Cmd/Ctrl + EnterSubmit comment

Disabling the Toolbar

If you don’t want the toolbar injected:

Terminal window
feedpipe 3000 --no-toolbar

This is useful if you just want tunneling without the annotation features.

Technical Details

The toolbar is built with Preact and renders inside a Shadow DOM to isolate its styles from the host page. This means:

  • Toolbar styles won’t affect your app
  • Your app’s styles won’t affect the toolbar
  • The toolbar works on any page, regardless of CSS framework

The toolbar connects to the AnnotationRoom via WebSocket for real-time updates.