Visualize UX attention in real time.

Generate real-time UX heatmaps, scroll insights, and attention analysis directly on live web pages. Everything runs in your browser.

Add to Chrome GitHub UX HeatGrid - Visualize user attention and content density in real time | Product Hunt
UX HeatGrid
v1.1.1 help
10
ANALYZING
play_arrow Start
visibility Show
delete Clear
push_pin UX ANALYSIS
REVIEW
title READABILITY
format_list_bulleted COMPLEXITY
crop_square WHITE SPACE
dashboard CONTENT DENSITY
Intensity

Real-Time UX Insights.

Runs entirely in your browser to generate instant UX insights without external tracking or performance impact.

grid_on

Visual Heatmap Engine

Visualize scroll depth, interaction density, and attention patterns directly on live web pages. See where users focus with real-time color-coded overlays.

REAL-TIME
speed

UX Score

Get an instant UX score for any page. Measure layout balance, content density, readability, and whitespace with a single click.

electric_bolt

Live UX Analysis

See layout balance, content density, and interaction signals instantly. No external dashboards needed — everything runs on-page.

auto_awesome

Explainable UX Signals

Detect dense layouts, attention gaps, and structural friction using transparent, rule-based analysis with clear visual feedback.

How It Works.

Analyze any web page visually in seconds. Everything runs directly in your browser — no tracking, no servers.

1

Page Scan

UX HeatGrid scans the current page's DOM to identify interactive elements, content blocks, and layout structure without modifying the page.

2

Heatmap Generation

A real-time heatmap overlay is generated based on element density, scroll position, and interaction patterns using color-coded visualization.

3

UX Analysis

The extension calculates readability, complexity, whitespace ratio, and content density scores to provide an overall UX assessment.

4

Visual Feedback

Review attention zones, friction points, and layout balance through an intuitive popup panel with actionable UX metrics.

Use Cases.

See who UX HeatGrid is built for.

psychology

UX Designers

  • check_circle Identify hot spots and attention gaps to resolve structural friction.
  • check_circle Validate layout hierarchy with real-time visual heatmaps.
  • check_circle Analyze content density without complex analytics dashboards.
grid_view

Developers

  • check_circle Visualize content density and whitespace balance in real-time.
  • check_circle Check layout structure matches intended design hierarchy.
  • check_circle Debug visual layout issues with instant UX scoring.
visibility

Teams & Reviews

  • check_circle Run live design reviews with transparent visual signals.
  • check_circle Share explainable UX metrics to support design decisions.
  • check_circle Compare page layouts before and after design changes.

info Technical Requirements

language

Browser Support

Works on Chrome and Chromium-based browsers. Supports Chrome, Edge, Brave, and Vivaldi.

security

Privacy First

All analysis runs locally in your browser. No data is sent to external servers.

verified

Core Features

All core features work instantly. No setup or special configuration required.

Start analyzing UX instantly.

Install UX HeatGrid and visualize attention and layout balance directly in your browser.

Add to Chrome