# 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
Freehand drawing, shapes, arrows, and lines. Users can mark up any page with precision using a floating toolbar. Stroke colors and widths are customizable.

### 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.

### 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.

### Threaded Comments
Users can pin comments to any spot on the page. Comments support threaded replies, making it easy to have contextual conversations directly on the webpage rather than in external tools like Slack or email.

### 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 or network logs, and has no two-way sync into Jira or Linear. That is 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. If every piece of feedback needs an owner, a status, a priority and a
ticket in an existing tracker, BugHerd, Marker.io or Usersnap are the honest recommendation. MarkLayer is
the visual feedback layer, 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

Available tools: marklayer_connect_room, marklayer_room_info, marklayer_list_annotations, marklayer_get_annotation, marklayer_watch_annotations, marklayer_acknowledge, marklayer_resolve, marklayer_dismiss, marklayer_reply.

- 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
- 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