The annotation bar for your mockups and websites.

Drop a single script and get text highlights, element pins, numbered cards, color-theming, dimmed focus, import/export, and email handoff—no plugin or backend.

Install UxNote
Demo off
#12
#13
#14

Who and why?

Agencies & freelancers

No more vague emails or improvised screenshots: clients comment directly on the page, you export everything in one clean file.

Product & UX teams

Review where the interfaces live: in the browser. Uxnote adds notes and highlights without touching existing code.

Core features

Capture modes

Highlight text or pin any element; numbered badges, priorities, and clickable snippets for jump-to.

Focus & theming

Built-in 20% dim overlay (toggleable), unified highlight color or per-type colors, panel/marker styling follows your choice.

Import / Export / Mail

Single JSON (title + date), re-import to re-render, email sending for sharing with devs.

How it works?

1

Inject

Paste the snippet on each page (or via a global tag manager).

2

Share

Send the URL to your client (optionally add ?uxnote=1 to flag review mode).

3

Annotate

Clients highlight and comment on text or elements; everything shows in the Uxnote panel.

4

Export / Mail

Dev side: click “Export” (JSON) or “Mail” to collect and process feedback.

Install (copy / paste)

Version: v1.0.0

Default install

Default installation: drop Uxnote right before </body> on each page you want to annotate:

<script src="https://github.com/ninefortyonestudio/uxnote/releases/download/v1.0.0/uxnote.min-v1.0.0.js"></script>

UxNote on GitHub

Uxnote is open source under the MIT License. Browse the code, follow updates, and share ideas or issues.

View the repo View releases github.com/ninefortyonestudio/uxnote

FAQ

Where should the script tag be placed?

Place it right before </body> so the DOM is ready. If you must place it in <head>, add defer.

How are annotations stored and scoped?

Annotations are stored in localStorage for the current origin. Each page URL keeps its own set, and clearing storage removes them.

Can we export, import, and merge reviews?

Yes. Export generates a JSON file. Import appends annotations so you can consolidate feedback from multiple reviewers.

Does it work on staging, previews, or localhost?

Yes, as long as the script loads and the browser allows localStorage in that environment.

How do we customize colors, dim, and toolbar position?

Use script tag options like colorForHighlight (or colorForTextHighlight + colorForElementHighlight), isBackdropVisible, isToolOnTopAtLaunch, and isToolVisibleAtFirstLaunch.

Is any data sent to a server?

No. Everything stays in the browser unless you export a JSON file or send annotations by email.

Is Uxnote open source?

Yes. Uxnote is open source under the MIT License, which allows commercial use, modification, and redistribution.

Can we use it on single-page apps (React, Vue, etc.)?

Yes. Annotations are stored per URL. In SPAs, route changes and re-renders do not always trigger a full reload, so you may need to reload or re-initialize to render annotations for the new URL.

Will a strict CSP block Uxnote?

CSP (Content Security Policy) is a browser security header that restricts script and style sources. If it is strict, allow the Uxnote script origin and inline styles (or use a nonce/hash) so the toolbar and highlights can render.

How do we block specific areas from annotations?

Add data-uxnote-ignore to any element to disable annotation inside it. You can re-enable a child with data-uxnote-allow.

Does it work inside iframes?

Cross-origin iframes are blocked by the browser. For same-origin iframes, you must inject Uxnote inside the iframe document.