# MarkLayer · Full Reference

> 100% free and 100% anonymous webpage annotation tool. Free web app and Chrome extension. No account, no email, no sign-up, no payment.

## What is MarkLayer?

MarkLayer is a free, anonymous, open-source tool for annotating any live webpage, available as a web app and a Chrome extension. Paste a URL at https://marklayer.app and annotate in the browser with nothing installed; the extension annotates in place on pages the web app cannot reach, such as anything behind a login. Users can draw, comment, highlight, and add arrows directly on top of any live website. Annotations are shareable via a single link. The recipient does not need to install any extension or create an account to view them. Real-time collaboration is supported with live cursors.

The two defining principles are **free** (no paid plan, no trial, no per-seat pricing, no usage cap) and **anonymous** (no sign-up, no email, no profile, no login, no personal data collection).

MarkLayer is not a browser extension. It is a browser-based web app: nothing is downloaded or installed to annotate a page or to view a shared annotation, by you or by anyone you send a link to. A free Chrome extension exists as an optional companion for the pages a proxy cannot reach — sites behind a login, and localhost — and is never required for the main flow.

MarkLayer is designed for designers, developers, QA engineers, product managers, agencies, and anyone who needs to give visual feedback on web content without onboarding the recipient through yet another account flow.

## Core Features

### Drawing Tools
Sixteen tools, each bound to a single key so the muscle memory carries over from Figma where Figma has an equivalent: move (V), pen (P), highlight (Shift+H), line (L), arrow (A or Shift+L), rectangle (R), circle (O), text label (T), comment (C), text selection (S), area (G or F), eraser (E), inspector (I), multi-select (X), measure (M), ruler guide (U). Stroke colors and widths are customizable. Undo is Cmd-Z, redo Cmd-Shift-Z, and Clear all empties the page. The floating toolbar drags anywhere on screen, reorders by dragging a tool, and collapses to a fan.

### Ruler Guides
Drag out horizontal and vertical guides to check alignment, the way a design tool does. A guide is an operation in the same stream as every drawing, which is why it appears on everyone else's screen rather than staying a private overlay on yours.

### Real-time Collaboration
Multiple users can annotate the same page simultaneously. Live cursors show each participant's position and name in real time, powered by WebSockets and Cloudflare Durable Objects. There is no collaborator limit and no seat to buy.

### Voice and Video
Peer-to-peer WebRTC audio and video, negotiated through the same room as the annotations. Microphone, camera and output device selection, a speaking indicator, a connection-quality readout, and a TURN relay fallback when a network refuses a direct connection. Nobody installs anything to join a call.

### Shareable Links
One click generates a share link. Anyone who opens the link sees the annotated page in their browser. No extension, no account, no install required. The link loads the original webpage with annotations overlaid. MarkLayer can also email the link for you.

### Optional Accounts and Access Control
An account is optional and free, and nothing behind it costs money. Annotating and viewing never require one. Signing in with a magic link (no password) lets a person claim the links they made, switch one between "can edit" and "can view", give it its own expiry date, and see everything they own in one dashboard. View-only is enforced by the room everywhere a write could land, not by hiding the toolbar.

### Threaded Comments
Users can pin comments to any spot on the page, with threaded replies, so a conversation happens on the webpage rather than in Slack or email. Each comment carries one of five statuses (open, in_progress, resolved, approved, dismissed) and one of four priorities (low, medium, high, urgent). It can be assigned to a person or to an AI agent, can @mention anyone already working on that page, and can hold up to four image attachments, pasted from the clipboard or picked from disk. Every comment also records the browser, operating system and viewport width it was written on, which is what lets a bug report say "only at this width" without anyone asking.

### Suggested Edits
Select real text on the page and write the exact replacement rather than describing it. MarkLayer renders that as a diff, and the same diff travels into the Markdown export and into an AI agent's view of the thread, so the correction is never retyped by hand.

### Integrations
Seven destinations, connected from the panel on any share link, five per room. Slack, Microsoft Teams, Discord and a generic JSON webhook post every new batch of annotations automatically. Linear, GitHub and Jira create one issue from one annotation, when a person chooses to file it.

All seven are one way out. MarkLayer creates the issue and reads back its URL once so it can show a link; nothing about that ticket's later state comes back, and no destination sends anything in. For the three issue trackers the API token never reaches MarkLayer's server: the room stores only the non-secret fields (repository, project key, team id), and the token stays in the browser of whoever set it up. Chat webhooks are different, because the webhook URL is itself the credential, so it is stored with the room and anyone holding the share link can see its last four characters and remove it.

### Export
Two ways out, both from the panel on a share link. Copy or download every comment, reply and highlighted selection as Markdown, carrying statuses, authors, device metadata and suggested edits as fenced diff blocks, which pastes cleanly into a ticket or an AI coding agent. Or export the annotated page as a PNG, which captures the live page with the drawings over it and falls back to the drawings alone if the page refuses capture.

### Multi-page Projects
One share link can hold a project of up to 50 pages, each with its own annotations, switched through a tab strip at the top of the viewer. Add a page by pasting its URL. The Markdown export covers the whole project in a single document with a section per page.

### Responsive Review and Anchoring
Preview a page at desktop, tablet or mobile width without touching the annotations. Marks bind to the element they were left on, by CSS selector with a normalized-text fingerprint as a fallback, plus a fractional offset inside that element's box. When the layout reflows at another width, or a single-page app re-renders the DOM underneath, the mark re-resolves onto the right element instead of floating to a coordinate that no longer means anything.

### Inspector
Point at any element on a page and MarkLayer captures the CSS selector, computed dimensions, and a markdown block formatted for AI coding agents. Designed as the bridge between visual feedback and AI-driven code edits. The user points, and the agent gets enough context to act.

### Multi-Inspect
Select multiple elements in one pass to bulk-handoff a UI region to an AI agent. Each selected element contributes a selector and snippet to the combined prompt.

### Measure
Pixel-precise distance and dimension measurement directly on any rendered page. Drag from any point to any other; MarkLayer reports width, height, and distance in CSS pixels.

### Area
Drag to capture a rectangular region of a page and attach a note. The captured frame travels with the share link as a first-class annotation.

### Quick Grab
Hold the Alt key to temporarily arm element capture without switching tools, then release to revert. Lets users move fluidly between annotating and inspecting.

### PDFs and images
A PDF or an image can be annotated like any other page, either by pasting a link to one or by uploading a
file from your computer, up to 25MB — PDF, PNG, JPEG, GIF, WebP or AVIF. MarkLayer renders it in the
browser and puts the same canvas over it, so drawing, comments, areas and highlights all behave the way
they do on a webpage. Text inside a PDF stays selectable, so a highlight binds to the words rather than
to a point in space. Every mark records the page it was made on and where it sat on that page — an image
is simply a document of one page — which is what keeps it in place at any zoom level. The annotations
belong to the share link rather than to the file, so nothing is written back into it and there is no
annotated copy to download. An uploaded file is deleted on the same clock as the annotation: 90 days
after the link was last opened.

### No Sign-up Required
There is no registration, no email verification, and no onboarding flow. Users install the extension and start annotating immediately.

### Private by Default
Annotations stay on the user's device until they explicitly choose to share. There is no central feed, no public profile, and no social features.

### Works on Any Website
Two routes, so there is no page the pair cannot cover. The web app fetches the target server-side, strips frame-blocking headers, and overlays the annotation canvas, which covers any publicly reachable URL with nothing installed. The extension injects that same transparent canvas directly into the page you are already looking at, which covers everything the web app cannot fetch: pages behind a login, internal tools, localhost. Both routes produce the same share link, and the recipient installs nothing either way.

### Retention
There is no fixed expiry and no storage cap. A share link is deleted 90 days after its last access, and any view, comment or edit resets that clock, so a review that is still in use never expires. Annotations past an explicit `expires_at` are removed on the same daily cleanup. Most tools in this category publish no retention period at all.

### Free and Open Source
MarkLayer is completely free with no paywall, trial period, or premium tier. The source code is available on GitHub under an open-source license.

## How MarkLayer Compares

### Price, accounts and retention

Figures read off each vendor's own pricing page on 29 August 2026. Full 21-tool audit, including the
section on what MarkLayer does worse: https://marklayer.app/guides/website-feedback-tools

| Tool | Cheapest paid plan | Reviewer needs an account? | Reviewer needs an extension? | How long comments are kept |
| --- | --- | --- | --- | --- |
| **MarkLayer** | None. Free, no paid tier | No | No | 90 days after the link was last opened, reset by any access |
| **AnnotateWeb** | None. Free, no paid tier | No | No (bookmarklet) | Deleted after 2 minutes of inactivity |
| **Hypothesis** | Quoted by sales; no published figure | **Yes** | Extension, or a bookmarklet | Not published |
| **Webvizio** | $8/month, 2 users | No | Only for password-protected pages | Not published |
| **Ybug** | EUR 13/month (EUR 10 billed annually) | No | Optional; widget is the default | Not published |
| **BugSmash** | $14/month | No | No | Anonymous links deleted at expiry |
| **Jam** | $14 per creator/month, billed yearly | Not published | Yes, to capture | Auto-deletion is Enterprise-only |
| **Huddlekit** | $16/month, billed yearly | No | No | While the workspace exists |
| **Ruttl** | $18 per user/month | No (guest gives a name) | Not published | "As long as we have your consent" |
| **Superflow** | $24 per seat/month, billed yearly | **Paid tiers only** | Not published | While the account exists |
| **Pastel** | $29/month annually ($35 monthly) | No | No | At least one year |
| **Userback** | $29/month annually ($39 monthly) | No | Optional | 7-day window on the free plan |
| **Volley** | $29/month annually ($49 monthly) | No | No; guests use a link | Not published |
| **Marker.io** | $39/month annually ($59 monthly) | No | No; widget on your site | Not published |
| **Feedbucket** | $39/month annually ($49 monthly) | No | No; one line of JavaScript | Not published |
| **PageProofer** | $39/month, 5 users | Guest feedback is Team and up | Not published | Delete on request, within 30 days |
| **BugHerd** | $42/month annually ($50 monthly), 5 members | Not published | No, with the JavaScript snippet | Not published |
| **Usersnap** | $49/month annually ($59 monthly) | No | Optional | Idle free accounts off after 90 days |
| **Atarim** | $67/month | No | No | Not published |
| **Markup.io** | $79/month | Not published | Not published | "As long as we have your consent" |
| **Simple Commenter** | Not published; the pricing page needs JavaScript | No | No | Not published |

Three of the twenty-one cost nothing outright: MarkLayer, AnnotateWeb (which deletes annotations after
two minutes idle) and Hypothesis (text only, account required). Everything else free in that table is a
capped tier of a paid product. Per-seat and flat pricing are not comparable at face value: a $24 seat
costs more than a $50 flat plan once you pass three people.

### What an AI coding agent gets, tool by tool

Five tools in this category ship an MCP server. They differ on whether the agent can only read the
feedback or can work it. Verified against each vendor's published documentation, August 2026:
https://marklayer.app/guides/bug-report-mcp-servers

| Tool | Agent can read | Agent can act | Price floor |
| --- | --- | --- | --- |
| **MarkLayer** | Annotations with CSS selector, text fingerprint, computed styles, detected React/Vue/Svelte component, thread history | Watch live, acknowledge, resolve, dismiss, reply | Free |
| **Marker.io** | Reports with screenshots, console logs, network requests, browser/OS | Read and draft only; cannot resolve or reply | $59/mo ($39 annual) |
| **BugHerd** | Task details with screenshots, CSS selectors, browser/OS, severity | List, create, update tasks (beta) | $50/mo (5 members) |
| **Jam.dev** | A pasted Jam link: console, network, user actions, video transcript | Nothing; one-way handoff | Free tier |
| **Usersnap** | Collected feedback via hosted MCP (OAuth) | Query feedback, create opportunities | ~EUR 39/mo |

MarkLayer is the only one with a live two-way loop: the agent is a participant in the room, and human
oversight happens on the annotations themselves as statuses flip from open to in progress to resolved.
Marker.io documents that it deliberately stops short of resolving or replying. Jam's model is a link you
paste, after which the agent works alone.

Marker.io and Jam attach runtime evidence (console errors, network traces). MarkLayer attaches
code-location evidence: the selector, the computed styles, and the framework component behind the
annotated element, which is what an agent needs to find the file to edit. If your bugs are mostly "this
JavaScript is failing", runtime logs win. If they are mostly "this element is wrong", element context wins.

### What MarkLayer does not do

MarkLayer captures no console logs and no network requests. It can file an annotation into Linear, GitHub
or Jira as an issue, but only one way: nothing about the ticket's later state returns, so a comment does
not close when the ticket closes. Those two gaps are what the $39-79 tier is priced for. Three tools
switch off on a PDF or an image, and for the same reason: the element inspector, measure and multi-select
all read the page's HTML, and a file has none, so pointing at it returns the whole page rather than a
heading or a button. A scanned PDF with no text layer, and any image, takes drawing and comments but not
text highlights, because there are no words to attach one to. Both surfaces are desktop only today, and a
phone is told so rather than shown a broken toolbar. Without an account there is no list of past links,
because there is nothing to look them up against. If a comment has to stay in step with a ticket in an
existing tracker, BugHerd, Marker.io or Usersnap are the honest recommendation. MarkLayer is the visual
feedback layer in front of one, not a project management system.

## AI Coding Agent Integration (MCP)

MarkLayer ships an MCP (Model Context Protocol) server, marklayer-mcp, that bridges visual feedback to AI coding agents. When a designer or PM annotates a page, the agent receives the comments as a structured work queue: it can acknowledge each item, post replies, resolve with a summary, or dismiss with a reason. Status updates appear live to the human in their browser.

Install in Claude Code:

    claude mcp add marklayer -- npx -y marklayer-mcp

Pre-connect to a specific room:

    claude mcp add marklayer -- npx -y marklayer-mcp --room https://marklayer.app/s/abc123

Twelve tools: marklayer_connect_room, marklayer_room_info, marklayer_read_page, marklayer_list_annotations, marklayer_get_annotation, marklayer_watch_annotations, marklayer_acknowledge, marklayer_resolve, marklayer_dismiss, marklayer_reply, marklayer_create_annotation, marklayer_suggest_edit.

Three of those are worth spelling out, because they are what separates an agent that reads feedback from one that takes part in the review. marklayer_read_page returns the page's headings, text, links and controls with their selectors, so an agent can review a page before anyone has annotated it. marklayer_create_annotation lets it leave a comment of its own, anchored to an element. marklayer_suggest_edit proposes exact replacement text, shown to the human as a diff they can read rather than a paragraph describing a change.

approved is the one status an agent never sets. It is the person who asked for the change confirming the fix, so a resolved thread going back to open means they disagreed.

In a browser whose agent supports WebMCP, the same actions are exposed on a share link through document.modelContext, with nothing installed.

- Package: https://www.npmjs.com/package/marklayer-mcp
- Source: https://github.com/thevrus/MarkLayer/tree/main/apps/mcp

## Programmatic Link Creation (for AI Assistants and Automation)

MarkLayer exposes a public, unauthenticated HTTP API so any tool, including an LLM acting on a user's behalf, can mint share links without an account or SDK. Use this when a user asks an AI assistant to "generate MarkLayer links for these 10 pages" or any similar batch-create request.

### Endpoint

    POST https://marklayer.app/api/{id}
    Content-Type: application/json

The {id} is caller-supplied. It is the access token for the resulting page, so use \`nanoid\`, \`crypto.randomUUID()\`, or any unguessable string. Anyone with the id can edit; anyone with the id + \`?readonly=1\` can view only.

### Request body

    {
      "ops": [],
      "url": "https://example.com/page-1",
      "width": 1440,
      "expires_in": 2592000
    }

- \`ops\` (required): array of annotation operations. Pass \`[]\` for a blank page the user will mark up themselves. The full op union is defined in the open-source \`@marklayer/types\` package (drawing, comments, shapes, etc.).
- \`url\` (optional but recommended): the webpage the share link should embed and overlay. Without it, the viewer prompts the user to paste a URL.
- \`width\` (optional): reference viewport width in CSS pixels the annotations were authored against. 1440 is a safe default.
- \`expires_in\` (optional): seconds until automatic cleanup. Max 30 days (2592000). Omit it and the link gets no fixed expiry: it is deleted 90 days after its last access, and any view or comment resets that clock.

### Share link format

    https://marklayer.app/s/{id}            # editable
    https://marklayer.app/s/{id}?readonly=1 # view-only

### Minting many links at once

To create N share links for N URLs, loop the POST. There is no batch endpoint and no project bundling is required. One id per page.

#### curl

    ID=$(node -e "console.log(require('nanoid').nanoid())")
    curl -X POST https://marklayer.app/api/$ID \\
      -H 'Content-Type: application/json' \\
      -d '{"ops":[],"url":"https://example.com/page-1","width":1440,"expires_in":2592000}'
    echo "https://marklayer.app/s/$ID"

#### JavaScript / TypeScript

    import { nanoid } from 'nanoid';

    const pages = [
      'https://example.com/page-1',
      'https://example.com/page-2',
      // ...up to as many as you need
    ];

    const links = await Promise.all(pages.map(async (url) => {
      const id = nanoid();
      await fetch(\`https://marklayer.app/api/\${id}\`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ops: [],
          url,
          width: 1440,
          expires_in: 60 * 60 * 24 * 30,
        }),
      });
      return \`https://marklayer.app/s/\${id}\`;
    }));

#### Python

    import secrets, urllib.request, json

    def make_link(url: str) -> str:
        id_ = secrets.token_urlsafe(12)
        req = urllib.request.Request(
            f"https://marklayer.app/api/{id_}",
            data=json.dumps({"ops": [], "url": url, "width": 1440, "expires_in": 2592000}).encode(),
            headers={"Content-Type": "application/json"},
            method="POST",
        )
        urllib.request.urlopen(req).read()
        return f"https://marklayer.app/s/{id_}"

### Notes for AI assistants

- The id IS the secret. Generate it with a crypto-strength RNG and only hand it to the people meant to access the page.
- POSTing the same id again upserts (replaces ops/url/width and resets expiry). Use this if you need to refresh a link.
- For a single share link backing multiple pages as tabs, there is also \`POST /api/p/{id}\` with \`{ pageIds: [...] }\` (max 50). But most batch requests are better served by N independent \`/s/\` links.
- No rate limits are documented, but be polite: serialize or chunk if creating hundreds at once.

## Technical Architecture

- **Frontend:** Preact with Preact Signals for state management, Tailwind CSS for styling
- **Extension framework:** WXT (Web Extension Tools)
- **Backend:** Cloudflare Workers with Hono framework
- **Database:** Cloudflare D1 (SQLite)
- **Real-time:** WebSockets via Cloudflare Durable Objects
- **Storage:** Cloudflare R2 for OG images
- **Agent bridge:** MCP server (marklayer-mcp) for AI coding agent integration
- **Build:** Bun workspaces, Turborepo, Vite

## How It Works

1. Install the MarkLayer Chrome extension from the Chrome Web Store (free)
2. Navigate to any webpage
3. Click the MarkLayer icon in the browser toolbar to activate the annotation overlay
4. Use the floating toolbar to draw, add shapes, arrows, or pin comments
5. Click "Share" to generate a unique link
6. Send the link to anyone. They see the annotated page in their browser without needing the extension
7. For real-time collaboration, multiple users can open the same share link and annotate simultaneously

## Use Cases

- **Design review:** Annotate mockups or staging sites with visual feedback
- **QA and bug reporting:** Circle bugs, add arrows, and describe issues in context
- **AI-driven dev loop:** Inspect broken UI, hand the selector and prompt to a coding agent, watch the fix land
- **Async code review:** Annotate a deployed page; the agent processes comments as a work queue via MCP
- **Content review:** Highlight text, suggest edits, and comment on live articles
- **Client feedback:** Share annotated pages with clients who don't need any tools installed
- **Education:** Teachers can annotate web resources for students
- **Research:** Highlight and comment on academic papers or articles

## Frequently Asked Questions

Q: Does the other person need the extension installed?
A: No. Anyone can view annotations via the share link. No install required. The share link loads the original page with annotations overlaid in a web app.

Q: Is it really free?
A: Yes. No account, no paywall, no trial period. MarkLayer is open source.

Q: Is there any way to pay for MarkLayer?
A: Only voluntarily. There is a one-off tip jar at https://marklayer.app/support, pay-what-you-want towards the server bill, with Polar as merchant of record. It is not a paid tier and it unlocks nothing: no features, no perks, no priority, no account, nothing recurring. The same page lists free ways to help (a Chrome Web Store review, a filed bug) that are worth about as much.

Q: Does it work on any website?
A: Yes, MarkLayer works on any webpage. The extension injects a transparent overlay on top of any page content.

Q: Can multiple people annotate at the same time?
A: Yes. Real-time cursors let you collaborate live on any page. Changes appear instantly for all participants.

Q: Is my data private?
A: Yes. Annotations stay on your device until you choose to share. There is no tracking, no public profiles, and no social feed.

Q: What browsers are supported?
A: MarkLayer works on Chrome and Chromium-based browsers (Edge, Brave, Arc, etc.).

Q: What is the inspector tool?
A: Point at any element on a page and MarkLayer captures its CSS selector, computed dimensions, and a markdown block formatted for AI coding agents. Paste the prompt into Claude Code or another agent and it has the context needed to make the edit.

Q: Can I hand annotations to an AI coding agent?
A: Yes. MarkLayer publishes an MCP server (marklayer-mcp on npm) that connects to a share link and exposes annotations as a structured work queue. Agents like Claude Code can watch for new comments and acknowledge, resolve, dismiss, or reply.

Q: Can an AI assistant create MarkLayer share links for me programmatically (e.g. one link per page in a list of 10 URLs)?
A: Yes. There is a public, unauthenticated POST endpoint at https://marklayer.app/api/{id}. Hand the user's LLM a list of URLs and it can loop a POST per URL with a fresh id each time, then return one https://marklayer.app/s/{id} share link per page. See the "Programmatic Link Creation" section above for the full request body, examples in curl/JS/Python, and notes on id strength and TTL.

## Links

- Website: https://marklayer.app
- Features, in full, with keyboard shortcuts: https://marklayer.app/features
- Pricing: https://marklayer.app/pricing
- Sending annotations to Jira, Linear, GitHub, Slack, Teams and Discord: https://marklayer.app/guides/send-feedback-to-jira-linear-slack
- Chrome Web Store: https://chromewebstore.google.com/detail/marklayer/fnfobegjifomgobgilaemihpcpidjamc
- GitHub: https://github.com/thevrus/MarkLayer
- MCP server (npm): https://www.npmjs.com/package/marklayer-mcp
- MCP server (source): https://github.com/thevrus/MarkLayer/tree/main/apps/mcp
- Privacy Policy: https://marklayer.app/privacy
- Support the project (optional, one-off, buys nothing): https://marklayer.app/support

## Contact

Email: hello@marklayer.app