Notes

A little commenting tool by Konpo.

Press K then C

Figma-style comments on any work-in-progress site. Click something, say what's off, and everyone on the link sees it. One script tag, no accounts, and every note hands off cleanly to Claude Code.

<script
  src="https://konpo-notes.vercel.app/embed.js"
  defer></script>

Before </body>. Plain HTML, Vite, Figma Make exports. Anything that serves a page. Notes are grouped by the site's domain; add data-project="name" to share one set across URLs, branches or previews.

How it works

  • Open the bar

    Press K, or tap the tab on the edge of the screen. Add your name. No login; it tags your notes and gets you an avatar.

  • Click an element

    Press C, then click anything. The pin sticks to it. Esc cancels.

  • Say what's off

    Enter to post. Everyone on the link sees it within seconds.

  • Resolve it

    Fixed? Resolve it. ← → take you to the next open note. Resolved notes stay in the history.

What's inside

  • Pins that stay put

    Anchored to the element and numbered like Figma. They follow your layout as it changes.

  • One list, every page

    A side panel grouped by page, open and resolved. Click a note to jump to it, even on another route.

  • Hunter mode

    Arrow keys walk you through every open note, page by page, until there's nothing left.

  • Copy for Claude

    Any note, or all of them, as a precise prompt: element, selector, route and the ask.

  • Nothing gets lost

    Notes save instantly and sync for everyone. Offline, they wait and send when you're back.

  • Out of your way

    Starts tucked under a small tab. Lives in its own Shadow DOM, so it never touches your styles.

Options

  • data-project

    Which set of notes to show. Same value, same notes. Default: the page's domain.

  • data-accent

    Hue for pins and highlights, 0–360. 266 purple, 14 coral, 210 blue.

  • data-position

    Where the bar sits when it's open: bottom or bottom-right.

  • data-staging

    Run only on staging (*.webflow.io and localhost); do nothing on live domains.

  • data-allow-hosts

    Comma-separated hosts to run on. *. matches any subdomain. Use instead of data-staging.

  • data-notes-screen

    For prototypes that switch screens without changing the URL. Put it on each screen's root element; notes left inside only show while that screen is up.

  • data-endpoint

    Where the comments API lives. Only needed if you host embed.js somewhere else.