Skip to content

ninefortyonestudio/uxnote

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

52 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UxNote

English | Français

Docs and custom install on the landing page Buy me a coffee

Uxnote is an annotation bar for mockups and websites. Drop a single script to get text highlights, element pins, numbered cards, color theming, a dimmed focus mode, import/export, and email handoff. No plugin and no backend required.

Who it is for

  • Agencies and freelancers: clients comment directly on the page, then export a clean review file.
  • Product and UX teams: review in the browser where interfaces live, without touching existing code.

Core features

  • Text highlights and element pins with numbered badges.
  • Unified or per-type highlight colors, plus a toggleable dim overlay.
  • Import and export to a single JSON file (title + date), with re-import support.
  • Email handoff for sharing feedback with developers.

How it works

  1. Inject the script on each page (or via a global tag manager).
  2. Share the URL with your client.
  3. Clients annotate text or elements; everything appears in the Uxnote panel.
  4. Export JSON or send by email to collect and process feedback.

Install (copy/paste)

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

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

Script tag options

The landing page builder exposes these options:

  • colorForHighlight or colorForTextHighlight + colorForElementHighlight
  • isBackdropVisible
  • isToolOnTopAtLaunch
  • isToolVisibleAtFirstLaunch
  • data-mailto (recipient for email export)

You can also block areas from annotations with data-uxnote-ignore, and re-enable a child with data-uxnote-allow.

Storage and data

Annotations are stored in localStorage for the current origin and per URL. No data is sent to a server unless you export a JSON file or send annotations by email.

Compatibility notes

  • Works on staging, previews, or localhost as long as the script loads and localStorage is allowed.
  • For SPAs, route changes might require a reload or re-init to render annotations for the new URL.
  • If CSP is strict, allow the Uxnote script origin and inline styles (or add a nonce/hash).
  • Same-origin iframes work if you inject Uxnote inside the iframe document.

License

Uxnote is released under the MIT License. See LICENSE.

Project layout

  • index.html - landing page and documentation copy.
  • assets/ - landing styles and language data.
  • uxnote-tool/uxnote.js - Uxnote tool script.

About

UxNote is a lightweight annotation bar for mockups and websites—drop one script to highlight, pin, and export feedback directly in the browser.

Topics

Resources

License

Stars

Watchers

Forks

Contributors