Märkmeid

Lightweight, zero-dependency web annotation tool that allows you to place labels on any elements of application. It's designed for on-site UI tracking, making it easy to annotate and review design elements on the fly.

Features

• Easy Integration: simply import and run the widget on any application.
• Cross-browser Support: works in all modern desktop and mobile browsers
• Customizable Labels: add notes with any text in a different types, receive comments and close the issues.
• Tracking software Integration: push important things to Slack, Jira, Gmail etc
• User-Friendly Interface: intuitive design for effortless UI tracking.
• Zero Dependencies: works with native modules, keeping it lightweight and efficient.
• Renders in shadow root: to support full isolation from your code

Smart Selector Analysis

SSA - Smart Selector Analysis Widget can detect class selector changes, moving element up and down in the DOM tree, it can find closest match by "similarity", with configurable percentage match Example (default level: 70%)

• Menu title 1 a.px-2.py-1.rounded-md.text-white.font-semibold.whitespace-nowrap.bg-oxford-blue.dark\:outline-1.dark\:bg-lochmara\/80.qa-header
• Menu title a.px-2.py-1.rounded-md.text-white.font-semibold.whitespace-nowrap.bg-oxford-blue.dark\:bg-lochmara\/80

Text content is almost the same, depth in DOM tree (14) the same Similarity: 74.7% - Matched! Work in Shadow-dom, track elements in horizontal/vertical scrolled containers, z-index mixing, detect any DOM changes (collapsing, overlays etc) in any browsers and devices

Installation

1. Install Märkmeid using npm:

   npm i markmeid

2. Import and run in your project

   import { bootstrap } from "markmeid";
   bootstrap({uid: <x-app-uid>});

Configuration

const config = {
   /**
    * The unique application identifier
    * @requires in online mode
    */
   uid: string;
   
   /**
    * Tracking the URL change and filter for only URL related notes
    * In Single Page applications notes can be drawn for common blocks without filtering (e.g. sidebar)
    * @default true
    */
   urlFiltering?: boolean;
   
   /**
    * Logging to console
    * @default false
    */
   logging?: boolean;

   /**
    * Activate widget by flag in URL, for example if activeByQueryParameter specified as "showMarkmeid" the widget
    * will be active only when query parameters contain "showMarkmeid=true", like
    * http://localhost:80/main?showMarkmeid=true
    * @default ''
    */
   activeByQueryParameter?: string;
   
   /**
    * Percent of similarity threshold for Smart Selector Analysis for selector/string search
    * Where 10% - very weak similarity, 100% - exact match
    * @default 70%
    */
   similarityThreshold?: 10 - 100;

   /**
    * Double check the text content (with specified similarity threshold) on node when selector has exact match
    * Use only when text does not changing dynamically
    * @default false
    */
   textMatchCheck?: boolean;

   /**
    * The depth of selector tracing
    * @default 10
    */
   selectorDepth?: 4 - 20;
   
   /**
    * Connection mode, online: API connection, offline: sessionStorage
    * @default online
    */
   mode?: "online" | "offline";
}

Usage

• Open the Märkmeid dashboard by visiting markmeid.com and register (If you are the first time)
• Join the organization (if you were not invited) or create your own
• Add the application and get its uid
• Add the app uid to the bootstrap function bootstrap({uid: <x-app-uid>})
• Right click on the screen and start tracking UI elements by placing labels with relevant information
• Use Control + M to activate/deactivate context menu capturing