VarUI Validator

VarUI Validator is a browser-side UI inspection and validation tool built for front-end developers, QA engineers, and designers at Vardot and beyond.

It injects a DevTools-style element picker directly into any live webpage, letting you:

• Select any element on the page and instantly inspect its computed CSS properties (font, size, color, spacing, border-radius, and more)
• Pick two elements and compare their styles side-by-side in a clean diff table — mismatches are highlighted in red, matches in green
• Paste a Figma design link and your Figma Personal Access Token to pull the design token values and validate them against the live element
• Inspect whole component trees in Component mode
• Works on any URL — internal staging sites, localhost, or production

HOW TO USE:
1. Click the VarUI Validator icon in your toolbar to open the side panel.
2. (Optional) Paste a Figma design link and your Personal Access Token for Figma comparison.
3. Click "Inspect & Compare" to pick two elements, or "Quick Inspect" for a single element.
4. A crosshair cursor appears — click any element on the page.
5. Results appear instantly in the side panel showing computed styles and Figma diff.

PERMISSIONS EXPLAINED:
• activeTab / scripting — needed to inject the element picker into the page you are inspecting
• storage — saves your Figma token locally so you don't have to re-enter it
• sidePanel — powers the persistent side panel UI
• host_permissions (<all_urls>) — required so the tool works on any URL you choose to inspect, including localhost and internal staging environments

No data is sent to any external server. Your Figma token is stored only in your local browser storage.

Built by Vardot — open-source digital experience experts.