markit Autor: Aswin E

Core Tools

✏ Draw Mode
Brush, rectangle, arrow, and text tools to annotate directly on any webpage. Adjustable brush size and 8 colour options. All strokes are stored in document coordinates so they stay fixed to the page content regardless of scroll position.

⬡ Element Selector
Click any element on the page to capture its CSS selector, outer HTML, dimensions, and position. All captures appear in a side panel with copy-to-clipboard and JSON export.

🔍 Style Inspector
Hover over any element to see a floating card with its computed CSS properties — filtered intelligently by element type. Images show object-fit and dimensions, text shows font and colour, containers show layout and spacing. Click to pin the card to the page; it stays locked in place while scrolling.

📐 Measure Tool
Click two elements to measure the distance between them. Shows horizontal gap, vertical gap, or edge alignment differences (like Figma redlines). Measurements are drawn on the canvas and scroll with the page.

📸 Screenshot
Captures the current viewport with all annotations, measurements, and pinned inspector cards composited on top. Also downloads a companion JSON file with captured element metadata when elements have been selected.

✂ Crop Screenshot
Drag to select any region of the page for a cropped capture. Rule-of-thirds guides appear during selection. Annotations within the crop area are included.

Key Behaviours
Scroll-stable annotations — all drawings, shapes, text, measurements, and pinned cards are stored in page (document) coordinates and re-render on every scroll, staying locked to the content they were drawn on
Single active mode — only one tool is active at a time (Draw / Selector / Inspector / Measure); switching tools cleanly exits the previous mode
Draggable toolbar — the left-side toolbar can be dragged anywhere on the screen; snaps back to the edge if dropped near the left
Undo / Clear — undo restores previous canvas state and clears all selector/inspector captures simultaneously
Viewport-safe — uses dvh units and visualViewport API so the toolbar and canvas behave correctly on all screen sizes and zoom levels