// for developers talking to AI

Point at what's broken.
Hand off the Markdown.

Pinmark drops numbered markers on any page element and copies an AI-ready Markdown report to your clipboard. No screenshots, no rephrasing — just the exact element, a stable selector, and your note.

Install from source → View on GitHub Chrome Store soon

acme.marketing / pricing

● live demo

Pricing that scales with you

Simple plans for teams of every size. Cancel anytime.

Starter

$9/mo

1 project
Email support
Community access

Get started

Most popular

Growth

$29/mo

Unlimited projects
Priority support
Analytics dashboard
Custom domains

Get started

Scale

$99/mo

Everything in Growth
Dedicated CSM
SSO + audit logs
99.99% SLA

Get started

<blockquote> · section.testimonials > blockquote
“Saved us 12 hours a week and our churn is finally moving in the right direction.” — Maria K., Head of Growth at Northwind

// try it

Click anything on the left

Five clickable elements. Each one drops a marker and appends a feedback entry to the Markdown on the right — exactly like the extension does in your browser.

demo.acme.dev / dashboard

Welcome back, Alex

Here's what's happening today.

Latest activity

alex@acme.dev2m ago
system14m ago
deploy-bot1h ago

// click an element on the left to capture feedback

// why markdown

Screenshots are noise. Selectors are signal.

A screenshot is what a page looks like. An element, a selector, and a note is what to change.

× Screenshot annotations

× Resolution-dependent and decay on resize
× Force the model to OCR before reasoning
× Hide the exact element in DOM trees
× Larger payloads, slower context

✓ Pinmark Markdown

✓ Stable selectors survive refactors
✓ One source of truth: the DOM
✓ Tells the model which file to open
✓ Tiny payload, fits in any prompt

// vs agentation

Built on Agentation's format, goes further

Pinmark matches Agentation's proven output structure and adds forensic-level detail when you need it.

Agentation Output

## Page Feedback: /dashboard
**Viewport:** 1512×738
### 1. button.submit-btn
**Location:** .form > button
**Source:** src/Form.tsx:42
**Classes:** submit-btn
**React:** <App> <Form>
**Feedback:** Make blue

4 detail levels
Basic component detection
No console/network capture

✓ Pinmark Output

## Page Feedback: /dashboard
**Captured:** 2026-06-25 05:02:53
**Viewport:** 1512×738
**Items:** 1
### 1. "Submit" (button.submit-btn)
**Feedback:** Make this button blue
**Location:** .form > button
**Source:** src/Form.tsx:42
**Classes:** submit-btn primary
**ID:** submit-btn
**Position:** 450, 320 (120×40)
**React:** <App> <Dashboard> <Form>

5 detail levels (adds Forensic)
Smart element naming
Full React/Vue/Angular/Svelte detection
Console logs + network requests
Computed styles + bounding box
Browser state capture (cookies, localStorage)

✨ Forensic Mode

// Forensic adds:
#### Computed Styles
display, color, font-size...
#### Bounding Box
x, y, width, height, top, right, bottom, left
#### Console Logs (2)
[LOG] Form submitted
#### Network Requests
POST /api/submit → 200
#### Browser State
cookies, localStorage keys

Agentation has nothing like this
Perfect for debugging CSS/layout
Full state for bug reproduction
Session replay via MCP

Summary: Pinmark matches Agentation's selector-based Markdown output (the format AI agents love) and adds a Forensic mode that captures computed styles, console logs, network requests, and browser state — giving agents everything they need to debug without back-and-forth.

// live comparison

Same annotation, different depth

Here's how Agentation and Pinmark format the exact same div.wrap element. Pinmark adds smart naming, captured timestamp, and structured context.

Agentation — Standard

## Page Feedback: /dashboard
**Viewport:** 1512×738

### 1. div.wrap
**Location:** `section:nth-child(18) > div.wrap`
**Classes:** `wrap`
**Feedback:** Section padding breaks at 1024px — needs container query.

✓ Pinmark — Standard

## Page Feedback: /dashboard
**Captured:** 2026-06-25 05:03:25
**Viewport:** 1512×738
**Items:** 1

### 1. "Wrap" (div.wrap)
**Feedback:** Section padding breaks at 1024px — needs container query.
**Location:** `section:nth-child(18) > div.wrap`
**Classes:** `wrap`

Notice the difference: Pinmark automatically generates a human-readable name ("Wrap") from the class name, adds a precise Captured timestamp, and includes an Items count. The Agentation version omits the timestamp entirely.

// how it works

Three steps. No new vocabulary.

Built on top of the browser you already use. No accounts, no dashboards, no syncing.

01 · activate & target

Activate and Hover

Hit Activate. Pinmark attaches to the active tab. Hover any element to preview it. Press F to Deep Freeze hover states and animations.

02 · annotate

Click elements to mark them

Click to drop a numbered marker, or drag for area selection. Pinmark silently extracts CSS animations, network requests, and framework data.

03 · copy

Copy the Markdown

Press C or hit Copy in the toolbar. The full report is on your clipboard, formatted for AI.

// see it in action

Watch Pinmark at work

Click elements, capture state, copy AI-ready Markdown — all without leaving the page.

Full demo — markers, clipboard copy, and forensic capture ▶ 0:00

// beyond basics

Built for the modern web

It's not just a screenshot tool. Pinmark dives into the DOM to pull out the data your AI needs.

❄️ Deep Freeze (Hotkey: F)

Instantly freeze CSS animations and lock :hover states visually. Catch those hard-to-click dropdowns and animated buttons effortlessly.

🔍 Zero-UI Animation Capture

Pinmark automatically reads exact CSS animation and transition properties in the background. No extra panels to open.

⚛️ Framework Detection

Identifies React, Next.js, Vue, Angular, Svelte, Nuxt, and Astro components by analyzing the DOM.

🔲 Area Selection

Drag to select a custom area when a single DOM element isn't enough to capture a broken layout.

// output comparison

Agentation vs Pinmark

Same annotation. Agentation on the left, Pinmark on the right. Pinmark adds smart naming, source links, and forensic depth.

Agentation — Standard

## Page Feedback: /dashboard
**Viewport:** 1512×738

### 1. div.wrap
**Location:** `section:nth-child(18) > div.wrap`
**Classes:** `wrap`
**Feedback:** Section padding breaks at 1024px — needs container query.

Pinmark — Standard

## Page Feedback: /dashboard
**Captured:** 2026-06-25 05:03:25
**Viewport:** 1512×738
**Items:** 1

### 1. "Wrap" (div.wrap)
**Feedback:** Section padding breaks at 1024px — needs container query.
**Location:** `section:nth-child(18) > div.wrap`
**Source:** `index.html:2850`
**Classes:** `wrap`
**React:** ``
**ID:** `wrap-container`

✦ What Pinmark adds beyond Agentation

Smart element naming — human-readable names like "Wrap" instead of raw selectors only
Explicit ID disclosure — always shown when present
Forensic detail level — computed styles, console logs, network requests, browser state
Component props + accessibility in detailed/forensic modes
Screenshot capture — collapsible element screenshot embedded in markdown
Area selection — drag to annotate regions, not just single elements

// version evolution

Pinmark v1.0 vs Pinmark v1.5

How Pinmark evolved from a text-only selector tool to a fully integrated visual feedback engine.

📉 Pinmark v1.0 (Legacy)

Focus was strictly on textual DOM elements and selector copies. No screenshots were captured, requiring developers to guess the layout issue visually.

❌ No screenshot capture (text-only DOM data)
❌ Basic Markdown copying to clipboard only
❌ Single-browser build (Chrome only)
❌ Simple text comments without categories/severity
❌ No API integrations or MCP servers

🚀 Pinmark v1.5 (Current)

A fully featured feedback workspace integrating native screenshots, drawing markup, metadata classification, and model-context connections.

✨ Instant viewport screenshot (<100ms) with canvas crop
✨ Drawing markup tool to draw highlights directly
✨ Model Context Protocol (MCP) server for AI agents
✨ Dual-browser package (Chrome MV3 + Firefox)
✨ Metadata tags (Intent, Severity, and Categories)

// browser support

Works where you work

Pinmark is a Manifest V3 extension. It runs on Chromium-based browsers and Firefox — no installation friction.

Chrome Primary target

Edge Chromium-based

Brave Chromium-based

Opera Chromium-based

New

Firefox MV3 WebExtensions

Not supported: Safari uses a different extension model (Safari App Extensions, distributed via the App Store). Pinmark's Manifest V3 build targets Chromium and Firefox (WebExtensions); a Safari port is out of scope for now. Firefox is fully supported as of the latest release.

// architecture

Four small pieces, one clear boundary

Standard MV3 layout. Content scripts run in the page; everything else runs in extension context.

click to activate → bg brokers → content mounts → page captures

background

Service worker

src/background/index.ts

Message broker between popup and content scripts. Holds the canonical active/inactive state per tab.

content

Content script

src/content/index.ts

Injected into every page. Runs the overlay, captures DOM context, generates Markdown. Uses a closed Shadow DOM so page styles can't leak in.

ui

Popup

src/popup/

Activate/deactivate toggle and settings panel (marker color, output detail, theme, clear-after-copy, block interactions).

shared

Types & storage

src/shared/

Shared TypeScript types, the messaging protocol, and the chrome.storage wrapper used by every context.

// what's captured

Everything the model needs, nothing it doesn't

Stable selectors, real DOM context, framework hints when available.

Element tag and stable CSS selector
Classes, IDs, and data-* attributes
Visible text content
Detected framework component name (React, Angular)
Element position for accurate marker placement
Per-page feedback persistence
Selector uniqueness check (warns on collision)
Hover preview that respects Shadow DOM boundaries

// settings

Tune it to your workflow

All settings live in the popup and persist per install via chrome.storage.sync.

appearance

Marker color

Pick any color for the numbered badges. Default is #ef4444.

output

Detail level

How much DOM context ships in the Markdown. Toggle to compare.

- Element: <button>
- Selector: main > button
- Classes: cta
- Text: "Deploy"
- Component: Button (React)

appearance

Theme

auto follows your OS. light and dark override.

workflow

Clear after copy

Auto-remove markers once you've copied the report.

workflow

Block interactions

Freeze the page beneath the markers so clicks don't fall through.

workflow

Hide until restart

Hide all markers immediately. They stay hidden until you reactivate the extension from the popup.

shortcuts

Keyboard map

All actions have keys. Hover to preview each shortcut.

// install

Build it in four commands

Free, source-available. Compile locally — no store needed, no account required.

01 Clone the repository

$ git clone https://github.com/Xenonesis/Pinmark.git
02 Install dependencies

$ cd pinmark && npm install
03 Build the extension

$ npm run build # builds workspaces to dist/
04 Load in Chrome

$ open chrome://extensions → Developer mode → Load unpacked → select packages/extension/dist/

Updates after a pull: git pull && npm install && npm run build, then click the reload icon on the extension card in chrome://extensions.

Firefox: run npm run build:firefox, then open about:debugging#/runtime/this-firefox → Load Temporary Add-on → select packages/extension/dist-firefox/manifest.json.

// keyboard

Stay in flow

Every action has a key. Mouse optional after activation.

C

Copy all feedback as Markdown to clipboard

H

Toggle marker visibility

Delete Backspace

Clear all markers on the current page

Esc

Exit annotation mode for this tab

Ctrl Shift A

Exit annotation mode globally

Pause

Toggle hover preview without losing markers

// privacy

Your pages stay on your machine

Pinmark runs entirely in your browser. No accounts, no telemetry, no remote endpoints.

The extension makes zero network requests of its own. Marker data and settings live in chrome.storage and never leave your machine unless you paste them somewhere yourself.

stored locally

Markers, settings, tab state

host permission

<all_urls> — required to inject content scripts

data sent off-device

Nothing, unless you paste the Markdown

telemetry

None. No analytics, no tracking pixels.

open source

Every line auditable on GitHub

iframe limitation

Cannot inject into cross-origin iframes (browser security)

// questions

Quick answers

Does it work on any site?

Yes — once activated, Pinmark runs on every page you visit. The content script is injected at document_idle so it never slows page load.

Will it break the page it's annotating?

No. The overlay UI lives inside a closed Shadow DOM, so page styles can't bleed in and Pinmark's styles can't bleed out.

How accurate is the selector?

Selectors are generated from element attributes and structural position. They're stable across small refactors and unique enough to be useful in most codebases. For minified production builds, the detector falls back to nth-of-type paths and warns you in the Markdown.

What frameworks does component detection cover?

React (via fiber inspection) and Angular (via debug properties). Vue and Svelte are on the roadmap. Without detection, the Component field is simply omitted from the report.

Why the Polyform Noncommercial license?

The source is free to read, build, and modify for any non-commercial use. It restricts reselling the extension or bundling it in commercial products. The Chrome Web Store listing is a $2 convenience to support ongoing work.

How do I update after a pull?

git pull && npm install && npm run build, then click the reload icon on the extension card in chrome://extensions.

// developer

Built by one person, for many

Xenonesis

Aditya Kumar Tiwari · India 🇮🇳

—followers —public repos —gists

Cybersecurity · Full Stack · AI/ML. Builds tools that close the loop between humans and the systems they ship.

React
Next.js
Node.js
TypeScript
Python
TensorFlow
PyTorch
NLP

GitHub Portfolio LinkedIn Twitter Email

break things → understand them → make them unbreakable

// lineage

Pinmark vs Areshkew/agentecho

Pinmark is a maintained continuation of Areshkew/agentecho — same Chrome Web Store listing, same extension ID, refreshed under a new name and active development.

Feature	Pinmark	Areshkew agentecho
01coreVisual markers + hover outline	Yes	Yes
02coreMarkdown feedback export	Yes	Yes
03coreShadow DOM isolation	Yes	Yes
04uxFramework detection (React / Angular)	Yes	Yes
05uxKeyboard shortcuts (`C`, `H`, `Esc`)	Yes	Yes
06uxPer-page feedback persistence	Yes	Yes
07buildChrome MV3 · TypeScript 5.6	Yes	Yes
Pinmark extensions
08mntActive maintenance & releases	Yes	static
09mnt3-mode theme actually works in popup	Yes	stub
10mntUnified `ThemeProvider`	Yes	—
11mntTyped `ExtensionSettings`	Yes	—

Same engine, polished surface. If you already use the original, switching costs you nothing — the extension ID and Chrome Web Store listing are unchanged. View the original →

// license

Source-available, free for developers

Pinmark is licensed under Polyform Noncommercial 1.0.0 — a permissive license that lets anyone read, modify, and build the source for free, while reserving commercial redistribution to the copyright holder.

personal use✓ free modify & fork✓ free build from source✓ free resell on stores✗ no bundle in paid product✗ no

✓

You can

Read the entire source. Every file is on GitHub — audit it, learn from it.
Build it for yourself. npm install && npm run build, load the dist/ folder as an unpacked extension.
Modify it for personal use. Change colors, shortcuts, marker behavior — your fork, your rules.
Use it at work. Internal business use inside a single company is allowed without paying.
Contribute back. Open a PR on GitHub — bug fixes and improvements are welcome.

✗

You can’t

Resell it. Don't publish Pinmark (or a rebranded fork of it) on the Chrome Web Store, Firefox Add-ons, or any marketplace.
Bundle it in a paid product. Don't ship it inside a commercial SaaS or paid desktop app.
Offer it as a hosted service. "Pinmark-as-a-Service" against payment is reserved to the copyright holder.
Strip the license notice. Modified versions must keep the Polyform Noncommercial attribution intact.

Why this license, not MIT or GPL?

Pinmark is built and maintained by one person. The $2 Chrome Web Store listing isn't a price tag — it's a "support the work" button. The copyright holder (Xenonesis) reserves the right to commercialize future versions, while the source stays free for everyone under the noncommercial clause.

vs MIT: MIT would let anyone repackage and resell Pinmark on the Chrome Web Store, undercutting the maintainer. Polyform Noncommercial closes that door.

vs GPL: GPL is viral — it would force any fork to also be GPL. That scares off companies who might otherwise contribute. Polyform Noncommercial is permissive: do whatever you want, just don't sell it.

vs Apache 2.0 / BSL: BSL (Business Source License) is similar but converts to a fully open license after a time period. Polyform Noncommercial is permanent — there's no "expiration date" where it auto-converts to MIT.

// from the community

Pinmark in action

See what developers are building with Pinmark.