OverlayQA Documentation
OverlayQA is a UI bug tracker that detects visual and accessibility bugs and collects client feedback on any live page. Review public URLs in the dashboard with no install, or use the Chrome extension for localhost, staging, and login-gated pages. It combines Auto Review, visual comparison against Figma, and WCAG accessibility auditing into a single workflow, so designers and developers can find and resolve issues without switching between tools.
What is OverlayQA?
Click any element on a live page to capture a screenshot with full CSS context (computed styles, selectors, padding, font, and color values), run Auto Review and accessibility scans that find issues nobody reported, compare the page against its Figma frame, and export structured issues to Jira, Linear, Asana, Trello, or Notion with two-way sync. Clients and stakeholders comment on a shared review link with no account. Teams use OverlayQA to track every issue from capture to fixed without stretching QA reviews across multiple days.
Guides
- Getting Started: Install the OverlayQA Chrome extension, create your first project, and capture your first UI bug on a live page. This guide walks you through account setup, extension installation from the Chrome Web Store, and your first issue.
- Chrome Extension: What the OverlayQA Chrome extension does, how to install and pin it, and what each permission is for. Works on localhost, staging and login-gated pages.
- Creating an Issue: Annotate any element on a live page, capture screenshots with CSS context, and draft issues with AI suggestions. Each issue includes the CSS selector, computed styles, viewport dimensions, and browser metadata automatically.
- Labels, Assignees, and Filters: Label and assign issues, filter the Issues page with the Active issues view, Labels, Assignee, and Created by filters, and ignore issues you will not fix without deleting them.
- Team Review: Capture and review issues on any live URL straight from the OverlayQA dashboard, with no extension install. Place element and region pins on the page in live or snapshot mode; issues appear in a drawer synced with the canvas.
- Visual Comparison: Compare your live site against Figma designs with overlay controls, opacity adjustments, and AI-powered diff analysis. The visual comparison workflow lets you select specific Figma frames and compare them at any responsive breakpoint.
- Accessibility Audit: Run WCAG accessibility scans on any page, review violations by severity, and bulk-create issues from findings. Audits are powered by axe-core combined with AI analysis to prioritize and explain each violation.
- Design System Audit: Scan any page for design token inconsistencies across colors, typography, spacing, borders, and shadows. The audit scores your page's token consistency and highlights affected elements directly on the page.
- Auto Review: Scan any page for the UI-quality issues a checklist misses: interactive states, forms, responsive gaps, and dead UI. A local scan then an AI pass; findings become issues.
- Scheduled Scans: Watch a page with recurring Accessibility, Contrast, Design Tokens, or Auto Review scans. The first run is the baseline; each later run emails what changed.
- Exporting Issues: Export captured issues to Jira, Linear, Asana, Trello, or Notion with full technical context, screenshots, and metadata. Each export includes the page URL, screenshot attachment, CSS selector, computed CSS values, viewport size, and browser information.
- Connect Figma: Connect your Figma account via OAuth to compare designs against live builds and link frames to projects. Once connected, you can browse Figma files and select specific frames for visual comparison.
- Connect Jira: Connect Jira Cloud via OAuth to export issues with screenshots, CSS context, and metadata. You can select the target project and issue type, and issues are automatically labeled for easy filtering.
- Connect Linear: Connect Linear via OAuth to export issues with screenshots, CSS context, and metadata. Choose a team, project, and label to organize exported issues within your existing Linear workflow.
- Connect Notion: Connect Notion via OAuth to export issues to an auto-created database with full technical context. OverlayQA creates a structured database on first export, so each issue appears as a rich Notion page.
- Connect Asana: Connect Asana via OAuth to export issues with screenshots, CSS context, and metadata to your Asana projects.
- Connect Trello: Connect Trello via OAuth to export issues with screenshots, CSS context, and metadata to your Trello boards.
- Connect ClickUp: Connect ClickUp via OAuth to export issues as tasks with screenshots, CSS context, and metadata. Task status changes in ClickUp sync back to OverlayQA.
- Connect GitHub: Install the OverlayQA GitHub App to file issues as GitHub Issues with screenshots and CSS context. Closing an issue in GitHub closes it in OverlayQA.
- MCP Server: Install the @overlayqa/mcp server in Claude Code, Cursor, or Windsurf, connect your account, and let your AI agent scan pages and create, label, comment on, and update issues.
- Connect Slack: Connect Slack via OAuth to post new issues to a team channel and sync thread replies, emoji reactions, and slash commands back to OverlayQA.
- Sharing Issues: Create public, read-only links to share issues with teammates, clients, or stakeholders who don't have OverlayQA. Anyone with the link can view screenshots, severity, and status without logging in.
- Client Share Links: Share a live page or frozen snapshot with external stakeholders for annotated feedback. Reviewers pin notes directly on the page without an account, and notes become issues automatically.
- Team Management: Invite teammates by email, assign Owner, Admin, or Member roles, and manage seat-based access from the dashboard settings.
- Bulk Actions: Update status, type, severity, export, share, or delete multiple issues at once from the extension sidebar.
- Comments and @Mentions: Discuss issues with threaded comments, @mention teammates for notifications, and sync comments with Figma, Jira, Linear, Notion, and Slack.
Key Features
- Visual comparison against Figma designs: Select any Figma frame and compare it against your live page with adjustable opacity controls and responsive scaling to match different viewport sizes.
- AI-powered design diff analysis: OverlayQA's AI analyzes visual differences between your design and implementation, surfacing spacing, color, typography, and layout discrepancies that are easy to miss manually.
- WCAG accessibility audits: Run automated accessibility scans powered by axe-core and AI to identify contrast, structure, and ARIA violations, grouped by severity for efficient triage.
- Issue capture with screenshots and CSS context: Click any element to capture a screenshot along with its CSS selector, computed styles (padding, font, color, border), viewport dimensions, and browser metadata.
- Export to Jira, Linear, Asana, Trello, and Notion: Send issues directly to your project management tool with all technical context attached, including the Figma frame link and page URL, so developers have everything they need to fix the issue.
Getting Started
- Install the extension: Add OverlayQA to Chrome from the Chrome Web Store and create your account. The extension adds a panel to your browser that activates on any webpage.
- Connect your tools: Link your Figma account to enable design comparison, and connect Jira, Linear, Asana, Trello, or Notion to enable one-click issue export with full context.
- Run your first review: Navigate to any live page, open the OverlayQA panel, and select a Figma frame to compare against. Capture issues, run an accessibility audit, or use AI analysis to identify visual differences.