Lightweight UI feedback for modern teams

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.

Get Started View on GitHub

app.pinote.dev/review

Review mode

Feedback shouldn't start with screenshots.

Screenshots separate feedback from the interface. Pinote keeps comments where decisions actually happen.

Traditional workflow

Slow

Screenshot

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

Direct

Click 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

Step 1

Enable comment mode

Turn on Pinote when a review session starts.

Step 2

Click any element

Choose the button, card, label, or layout area that needs feedback.

Step 3

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 pinotejs

npm install pinotejsyarn add pinotejs

Vanilla JavaScript

import { createPinote } from "pinotejs";
import "pinotejs/style.css";

const pinote = createPinote({
  storageKey: "my-product",
});

pinote.mount();

React / Next.js

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 GitHub

MIT License

TypeScript support

npm package

GitHub repository

Roadmap

A focused foundation with room to grow

The core stays focused while future layers unlock richer review workflows.

Team collaboration

Backend adapters

Realtime comments

Screenshot attachments

Browser extension

GitHub integration

Start collecting feedback directly on your UI.

Replace screenshot threads with attached comments that developers can understand immediately.

Install Pinote View Documentation