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.
  5. data-staging — boot only on staging (*.webflow.io + localhost) and silently no-op on live domains. For platforms like Webflow that ship the same code to both.
  6. data-allow-hosts — explicit comma-list of hosts to run on, e.g. staging.site.com, *.webflow.io (*. matches any subdomain). Use instead of data-staging for a custom staging URL.

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

Use it in Webflow — staging only

<script
  src="https://konpo-notes.vercel.app/embed.js"
  data-project="my-webflow-site"
  data-staging
  defer></script>

Paste into Site Settings → Custom Code → Footer, then Publish. Webflow ships the same custom code to your *.webflow.io staging URL and your live domain — so data-staging lets Notes show up only on staging and quietly disappear on production, automatically, every publish. Got a custom staging domain? Swap in data-allow-hosts="staging.yoursite.com".

Site-wide custom code needs a paid Webflow Site plan — on free, paste the same tag into an Embed element on a page. Custom code doesn't run inside the Designer canvas, so test on the published .webflow.io link.