SnagRelay
Start free
Coding agentsDesigners and QAReact NativeWordPress and agenciesIntegrationsPricingDocsGuidesBlogCompareSign in

Designers · QA · Visual feedback

Mark it up on the page.
Developers get the element.

Draw an arrow, add a comment, hide what is private. Every mark carries the element under it, its layout styles, the browser and the window width.

It lands in Jira, Linear or GitHub with the selector attached, and the developer’s agent can read it over MCP.

Start 14-day trialHow it works

Each mark carries

div.plan-cardpadding: 24px 28pxgap: 16px1280 × 800Chrome 141macOS
  • 14-day trial, no card
  • Reporters install nothing
  • Staging or production
Example. A reviewer opens the pricing page, draws an arrow at the Studio plan’s Start trial button, adds the comment “Should line up with the card edge” and hides their email address. The ticket sent to Linear names the button, lists its layout styles, and records the browser and window width.
northwind.example/pricing
Northwindmaria@northwind.co

Pick a plan

Solo

$15

Start trial

Studio

$29

Start trial
Jira Linear GitHub GitLab Trello Azure DevOps Jira Linear GitHub GitLab Trello Azure DevOps Jira Linear GitHub GitLab Trello Azure DevOps Jira Linear GitHub GitLab Trello Azure DevOps

The gap

“The button looks off.” Which button, in which browser, at what width?

A screenshot shows that something is wrong. It does not say what the browser rendered.

Today · what arrives

From QA · in Slack

“Spacing on the pricing card is off on my laptop.”

Screenshot 2026-10-08 at 14.02.png

  • Which element?
  • Viewport?
  • Browser?
  • Which CSS?
  • Which page?

The developer

Which card? What screen size? It looks fine on mine.

Then a call to share screens, and a second round of screenshots.

With SnagRelay · same bug

WEB-77 · “Studio button misaligned”

Mark
Arrow → Pricing › Studio › “Start trial” button
Comment
“Should line up with the card edge”
Styles
display inline-flex · margin-left 8px · padding 16px
Page
/pricing
Browser
Safari 18 · macOS · 1280 px wide
Replay
The 60 seconds before the report

The developer

Found it. The Studio button keeps margin-left 8px below 1440 px. Fixing the breakpoint.

One marked-up report. No screen-share.

How it works

Add it once. Reviewers mark it up. The ticket is ready.

  1. 01

    Add it to the site

    One script tag, the WordPress plugin, or the React Native SDK. Staging or production.

  2. 02

    Mark it up

    Click Report. The page is captured. Draw, comment, hide, or record the screen instead.

  3. 03

    The ticket is ready

    The marks, the element under each, its styles, the browser and the replay. In your tracker.

What each mark carries

An arrow that knows what it points at.

  • Five tools

    Pen, arrow, highlight, comment and hide. Colours are yours to set.

  • The element under each mark

    Its selector, text and component name, not just pixels.

  • Layout styles

    Display, margin, padding, gap, width and alignment, as the browser computed them.

  • Browser and window

    Browser, OS and the window width the reviewer was looking at.

  • Video or replay

    Record the screen, or send the replay of the moments before the report.

  • Report types

    Bug, Design, Copy — each with its own title prefix and tracker status.

For QA

The repro steps come with it.

A visual report is also a bug report. The console, the requests and the steps are attached without anyone opening DevTools.

Steps
The clicks and page changes that led there, from the replay.
Console
Errors and warnings from the reviewer’s browser.
Network
Failed requests, and the successful ones around them.
Fixed email
When the ticket is marked resolved, the person who reported it hears back.

Pricing

Reviewers are free. You pay per project.

Free

1 project · 25 reports a month

$0forever

  • 1 project · 25 reports a month
  • Element, errors, console and network with bodies
  • 30-second replay
  • MCP for Cursor, Claude Code and Codex
  • SnagRelay inbox or 1 tracker
  • 7-day history
Start freeNo card needed

Solo

3 projects · unlimited reports

$12/ mo

$144 billed yearly

Start 14-day trial
  • Unlimited reporters and teammates
  • Screenshots and markup
  • 60-second replay and repro steps
  • Console and network with bodies
  • MCP for Cursor, Claude Code and Codex
  • 30-day history
Most picked

Studio

10 projects · unlimited reports

$23/ mo

$276 billed yearly

Start 14-day trial
  • Everything in Solo
  • Video recording
  • Report types
  • 90-day history

Agency

Unlimited projects · unlimited reports

$63/ mo

$756 billed yearly

Start 14-day trial
  • Everything in Studio
  • No SnagRelay badge
  • Two-way tracker sync
  • 3-minute replay
  • 1-year history

Every account starts with a 14-day trial of the full product, then stays on Free unless you upgrade. No card.

FAQ

Before you send it to the team.

Do reviewers need an account?
No. Anyone who can see the button on the site can send a report. You choose who sees it.
Does this replace Figma comments?
No. Figma is for the design. SnagRelay is for the built page: the marks land on the real element, with the styles the browser applied.
Can we hide private data?
Yes. The Hide tool blacks out any part of the screenshot before it is sent. Nothing leaves the page until the reviewer clicks Send.
Can reviewers record a video?
Yes, in desktop browsers. They can record the screen instead of taking a screenshot, or send the replay of what happened before the report.
Some screenshots come out blank in iframes or canvas.
The page screenshot is rebuilt from the DOM, so iframes, canvas and video can be empty. Reports sent from the Chrome extension take the screenshot from the tab itself, so they match what is on screen.
Do developers have to use a coding agent?
No. The report goes to the inbox or your tracker like any other ticket. If a developer uses Cursor, Claude Code or Codex, the agent can read the same report over MCP.

Send the next design review from the page.

Start 14-day trial