Notes

Figma-style comments on any WIP site.

One script tag. No login. Click any element, leave a note, resolve it — then hand it straight to Claude Code. Built for vibe-coded prototypes.

1 Add your name 2 Click an element 3 Comment 4 Resolve

Drop this into any project

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

That's it — one line. Works in plain HTML, Next.js (drop it in your layout), and Figma-Make exports. Comments are namespaced by the page's domain automatically; add data-project="name" to share one thread across URLs.

What's inside

Pin to any element

Click anything on the page and the pin sticks to it — numbered, just like Figma. Hit C to start, Enter to post.

Comments panel

Every note in one side panel, grouped by page and filterable by open vs. resolved. Click one to jump to it — even across routes.

Copy for Claude

Export any thread as a precise prompt — element, selector, route, and the ask — so Claude Code finds the spot and fixes it fast.

Resolve & persist

Resolve with a little purple confetti. Threads save to a shared backend, so everyone on the link sees the same comments.

Keyboard-first

C comment · Enter post · K minimize → hide the bar · Esc cancel. Stays out of the way until you need it.

Just add a name

No accounts, no setup. Type a name, get an avatar, start commenting. A light, frosted bar that stays out of your way.

Knobs

  1. data-project — namespace for the comments. Same value = shared thread. Use a different one per site/branch.
  2. data-accent — hue 0–360. 266 Konpo purple (default), 14 coral, 25 amber, 210 blue.
  3. data-endpoint — optional. Defaults to where embed.js is hosted; set it if you serve the script from a CDN.
  4. data-position — bottom (default) or bottom-right.

Loads minimized (logo only) and stays light on any page. Shortcuts: C comment · Enter post · K minimize then hide the bar · Esc cancel.