Pinta

Tracking since May 2, 2026.

Changelog

• May 19, 2026
  description

  Pinta lets developers annotate their running web app and have an AI coding agent apply the changes to source files.
  
    ▸ DRAW or SELECT
    Circle a button, point at a heading, drag a rectangle around a section. Or click an element to capture its selector + outerHTML + nearby text. Add a comment in plain English ("make this tonal", "tighten this spacing", "use
     the brand pink").
  
    ▸ INLINE EDIT (optional)
    Pick an element and tweak it directly — Font, Sizing, Spacing, Grid, or raw CSS. The page updates live as you type. Pinta captures the diff as a structured CSS payload the agent can translate to your project's framework   
    (Tailwind, styled-components, vanilla-extract, plain CSS).
  
    ▸ HAND IT TO YOUR AGENT
    - Claude Code: install the /pinta skill, click Submit
    - Cursor / Cline / Continue / Zed: install via MCP config
    - Aider: shell adapter
    - Or hit COPY for any agent that doesn't speak Pinta's protocol
  
    ▸ STANDALONE MODE (no agent required)
    Testing a deployed staging URL with no project on disk? Pinta runs fully locally. Annotations stay in your browser; Copy to clipboard or Download a zip of Markdown + screenshots to share anywhere.
  
    ▸ MULTI-PROJECT
    Run pinta-companion in each project root — they auto-allocate ports, register themselves, and the side panel auto-routes the active tab to the right project via URL patterns.
  
    ▸ PER-PAGE ANNOTATIONS (new in v0.3.0)
    Annotate across multiple SPA routes in one session — pins stick to
    their pages, the side panel filters to your current page, and a chip
    surfaces siblings on other pages. One Submit ships the whole
    multi-page batch.
  
    ▸ BUILT-IN MODULES (new in v0.3.0)
    Per-submit integrations that run after source edits land. First
    module: GitLab Issues — files one issue per annotation via your
    local glab CLI (no tokens stored). Screenshot upload to project
    /uploads endpoint, full body in each issue.
  
    ▸ MARKDOWN IMPORT + LOCATED PILL (new in v0.3.0)
    Import button now accepts both .pinta share files AND markdown
    exports. Imported sessions show an "N of M located" pill so you
    instantly know if you're on the right route for the share file.
  
    ▸ HOW IT WORKS
    1. Install the extension (this one).
    2. Run `npx pinta-companion .` in your project root (Node 20+).
    3. Open the side panel → annotate → Submit.
    4. Your agent picks up the session and edits the matching source files.
  
    GitHub: https://github.com/kevzlou7979/pinta
    Spec: https://github.com/kevzlou7979/pinta/blob/main/spec/SPEC.md
  
    Single-user, single-machine. Annotations never leave your machine. The companion runs on localhost only. Open source (MIT).

  Pinta lets developers annotate their running web app and have an AI coding agent apply the changes to source files.
  
    ▸ DRAW or SELECT
    Circle a button, point at a heading, drag a rectangle around a section. Or click an element to capture its selector + outerHTML + nearby text. Add a comment in plain English ("make this tonal", "tighten this spacing", "use
     the brand pink").
  
    ▸ INLINE EDIT (optional)
    Pick an element and tweak it directly — Font, Sizing, Spacing, Grid, or raw CSS. The page updates live as you type. Pinta captures the diff as a structured CSS payload the agent can translate to your project's framework   
    (Tailwind, styled-components, vanilla-extract, plain CSS).
  
    ▸ HAND IT TO YOUR AGENT
    - Claude Code: install the /pinta skill, click Submit
    - Cursor / Cline / Continue / Zed: install via MCP config
    - Aider: shell adapter
    - Or hit COPY for any agent that doesn't speak Pinta's protocol
  
    ▸ STANDALONE MODE (no agent required)
    Testing a deployed staging URL with no project on disk? Pinta runs fully locally. Annotations stay in your browser; Copy to clipboard or Download a zip of Markdown + screenshots to share anywhere.
  
    ▸ MULTI-PROJECT
    Run pinta-companion in each project root — they auto-allocate ports, register themselves, and the side panel auto-routes the active tab to the right project via URL patterns.
  
    ▸ PER-PAGE ANNOTATIONS (new in v0.3.0)
    Annotate across multiple SPA routes in one session — pins stick to
    their pages, the side panel filters to your current page, and a chip
    surfaces siblings on other pages. One Submit ships the whole
    multi-page batch.
  
    ▸ BUILT-IN MODULES (new in v0.3.0)
    Per-submit integrations that run after source edits land. First
    module: GitLab Issues — files one issue per annotation via your
    local glab CLI (no tokens stored). Screenshot upload to project
    /uploads endpoint, full body in each issue.
  
    ▸ MARKDOWN IMPORT + LOCATED PILL (new in v0.3.0)
    Import button now accepts both .pinta share files AND markdown
    exports. Imported sessions show an "N of M located" pill so you
    instantly know if you're on the right route for the share file.
  
    ▸ v0.3.1 PATCH (bug fixes)
    - Per-page annotation URLs now survive hash-routed SPAs
      (e.g. /#claims/active routes that don't reload the page).
    - Pin badges persist through SPA re-renders via a 3-tier
      element resolver (selector → outerHTML → nearbyText) and
      a MutationObserver that follows the element when the DOM
      swaps it out.
    - Badges no longer flash and vanish on navigation.
    - Clear button now truly clears everything.
  
    ▸ HOW IT WORKS
    1. Install the extension (this one).
    2. Run `npx pinta-companion .` in your project root (Node 20+).
    3. Open the side panel → annotate → Submit.
    4. Your agent picks up the session and edits the matching source files.
  
    GitHub: https://github.com/kevzlou7979/pinta
    Spec: https://github.com/kevzlou7979/pinta/blob/main/spec/SPEC.md
  
    Single-user, single-machine. Annotations never leave your machine. The companion runs on localhost only. Open source (MIT).

• May 13, 2026
  description

  Pinta lets developers annotate their running web app and have an AI coding agent apply the changes to source files.
  
    ▸ DRAW or SELECT
    Circle a button, point at a heading, drag a rectangle around a section. Or click an element to capture its selector + outerHTML + nearby text. Add a comment in plain English ("make this tonal", "tighten this spacing", "use
     the brand pink").
  
    ▸ INLINE EDIT (optional)
    Pick an element and tweak it directly — Font, Sizing, Spacing, Grid, or raw CSS. The page updates live as you type. Pinta captures the diff as a structured CSS payload the agent can translate to your project's framework   
    (Tailwind, styled-components, vanilla-extract, plain CSS).
  
    ▸ HAND IT TO YOUR AGENT
    - Claude Code: install the /pinta skill, click Submit
    - Cursor / Cline / Continue / Zed: install via MCP config
    - Aider: shell adapter
    - Or hit COPY for any agent that doesn't speak Pinta's protocol
  
    ▸ STANDALONE MODE (no agent required)
    Testing a deployed staging URL with no project on disk? Pinta runs fully locally. Annotations stay in your browser; Copy to clipboard or Download a zip of Markdown + screenshots to share anywhere.
  
    ▸ MULTI-PROJECT
    Run pinta-companion in each project root — they auto-allocate ports, register themselves, and the side panel auto-routes the active tab to the right project via URL patterns.
  
    ▸ HOW IT WORKS
    1. Install the extension (this one).
    2. Run `npx pinta-companion .` in your project root (Node 20+).
    3. Open the side panel → annotate → Submit.
    4. Your agent picks up the session and edits the matching source files.
  
    GitHub: https://github.com/kevzlou7979/pinta
    Spec: https://github.com/kevzlou7979/pinta/blob/main/spec/SPEC.md
  
    Single-user, single-machine. Annotations never leave your machine. The companion runs on localhost only. Open source (MIT).

  Pinta lets developers annotate their running web app and have an AI coding agent apply the changes to source files.
  
    ▸ DRAW or SELECT
    Circle a button, point at a heading, drag a rectangle around a section. Or click an element to capture its selector + outerHTML + nearby text. Add a comment in plain English ("make this tonal", "tighten this spacing", "use
     the brand pink").
  
    ▸ INLINE EDIT (optional)
    Pick an element and tweak it directly — Font, Sizing, Spacing, Grid, or raw CSS. The page updates live as you type. Pinta captures the diff as a structured CSS payload the agent can translate to your project's framework   
    (Tailwind, styled-components, vanilla-extract, plain CSS).
  
    ▸ HAND IT TO YOUR AGENT
    - Claude Code: install the /pinta skill, click Submit
    - Cursor / Cline / Continue / Zed: install via MCP config
    - Aider: shell adapter
    - Or hit COPY for any agent that doesn't speak Pinta's protocol
  
    ▸ STANDALONE MODE (no agent required)
    Testing a deployed staging URL with no project on disk? Pinta runs fully locally. Annotations stay in your browser; Copy to clipboard or Download a zip of Markdown + screenshots to share anywhere.
  
    ▸ MULTI-PROJECT
    Run pinta-companion in each project root — they auto-allocate ports, register themselves, and the side panel auto-routes the active tab to the right project via URL patterns.
  
    ▸ PER-PAGE ANNOTATIONS (new in v0.3.0)
    Annotate across multiple SPA routes in one session — pins stick to
    their pages, the side panel filters to your current page, and a chip
    surfaces siblings on other pages. One Submit ships the whole
    multi-page batch.
  
    ▸ BUILT-IN MODULES (new in v0.3.0)
    Per-submit integrations that run after source edits land. First
    module: GitLab Issues — files one issue per annotation via your
    local glab CLI (no tokens stored). Screenshot upload to project
    /uploads endpoint, full body in each issue.
  
    ▸ MARKDOWN IMPORT + LOCATED PILL (new in v0.3.0)
    Import button now accepts both .pinta share files AND markdown
    exports. Imported sessions show an "N of M located" pill so you
    instantly know if you're on the right route for the share file.
  
    ▸ HOW IT WORKS
    1. Install the extension (this one).
    2. Run `npx pinta-companion .` in your project root (Node 20+).
    3. Open the side panel → annotate → Submit.
    4. Your agent picks up the session and edits the matching source files.
  
    GitHub: https://github.com/kevzlou7979/pinta
    Spec: https://github.com/kevzlou7979/pinta/blob/main/spec/SPEC.md
  
    Single-user, single-machine. Annotations never leave your machine. The companion runs on localhost only. Open source (MIT).

Permissions & access

Permissions

sidePaneltabsactiveTabscriptingstorage

Host access

<all_urls>

Screenshots