Figma-style feedback for any website.
Pinote lets designers, developers, QA teams, and clients leave comments directly on the UI instead of sending screenshots through chat.
Feedback shouldn't start with screenshots.
Screenshots separate feedback from the interface. Pinote keeps comments where decisions actually happen.
Traditional workflow
SlowScreenshot
Capture the screen and hope it has enough context.
Slack message
Send a note into a thread that moves fast.
Confusing explanations
Describe which button, card, or state needs work.
Follow-up questions
Spend review time clarifying the original feedback.
Pinote workflow
DirectClick UI
Enable comment mode and choose the exact element.
Leave comment
Write feedback where the issue appears.
Stay attached
Pins remain connected to the selected element.
Features
Built for modern product teams
A focused feedback layer for teams that care about product quality, implementation context, and developer workflow.
Comment anywhere
Turn any screen into a review surface and capture feedback in context.
Element anchoring
Pins attach to DOM elements and keep their meaning as layouts change.
Local persistence
Store review notes in the browser for lightweight product walkthroughs.
Cross-page support
Keep comments scoped to the route where feedback was collected.
JSON export
Export structured feedback that developers can inspect and share.
Framework agnostic
Use the core engine with plain JavaScript or your favorite UI layer.
React support
Drop in a provider and hooks for React and Next.js interfaces.
Lightweight footprint
A focused feedback layer without a heavy product-management suite.
Compatibility
Framework-friendly by design
Pinote currently supports Vanilla JavaScript and React / Next.js. More framework integrations are coming soon.
Supported now
Vanilla JavaScript
React
Next.js
Coming soon
Vue
Nuxt
Angular
Svelte
Astro
Built around a framework-agnostic core, designed to work across the web.
Workflow
How it works
Enable comment mode
Turn on Pinote when a review session starts.
Click any element
Choose the button, card, label, or layout area that needs feedback.
Leave feedback instantly
Comments appear on the UI and stay attached to the right context.
Install
Add contextual feedback in minutes
Install the npm package, import the shared CSS, and mount Pinote wherever reviews happen.
pnpm add pinotejsimport { createPinote } from "pinotejs";
import "pinotejs/style.css";
const pinote = createPinote({
storageKey: "my-product",
});
pinote.mount();import { PinoteProvider } from "pinotejs/react";
import "pinotejs/style.css";
export function App() {
return (
<PinoteProvider storageKey="my-product">
<YourApplication />
</PinoteProvider>
);
}Open source
Open source and developer friendly
Pinote is small enough to understand, typed for modern codebases, and packaged for the workflows developers already use.
Star on GitHubFuture updates
What’s coming next
Pinote starts with local-first UI feedback, but the goal is to become a complete visual feedback workflow for modern web teams.
Framework integrations
Vue, Svelte, Angular, and Astro support built on the same DOM-first core.
Backend adapters
Optional persistence layers for REST API, Supabase, and Firebase workflows.
Team collaboration
Shared projects with members, roles, and review spaces for product teams.
Realtime feedback
Live comment updates and presence for synchronous design and QA reviews.
Visual context
Screenshot capture and page metadata to make every note easier to reproduce.
Workflow integrations
Issue and notification handoff for GitHub, Jira, and Slack.
Browser extension
Comment on websites without installing Pinote in the target codebase first.
Start collecting feedback directly on your UI.
Replace screenshot threads with attached comments that developers can understand immediately.