How many viewports can I test at once?

You can test up to six different viewport widths simultaneously.

Does this tool perform semantic HTML element matching?

No, it measures rendered pixel changes and generates visual heatmaps rather than comparing DOM elements semantically.

Can I adjust the wait time before screenshots are taken?

Yes, you can configure the wait time up to 10,000 milliseconds to allow dynamic content or animations to load.

What comparison modes are supported?

You can compare adjacent breakpoints or compare all configured viewports against the widest viewport.

What is included in the downloadable ZIP file?

The ZIP file contains the captured screenshots for each viewport, the generated pixel-difference heatmaps, and the layout metrics report.

Elysia Tools

Navigation

Development

Responsive Breakpoint Visual Diff

Render a URL at multiple viewport widths and inspect screenshots, pixel-difference heatmaps, and layout metrics in the page.

Details

What this tool helps you do

Uses headless Chromium to render the same page at up to six viewports, captures a fixed viewport screenshot, then scales adjacent renders into a common comparison canvas and marks changed pixels in a heatmap. The report shows the screenshots, heatmaps, DOM viewport metrics, and a ZIP download. It measures rendered pixel change; it does not claim semantic element matching or PR baseline comparison.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

1 examples

Card layout changes between 375 px and 768 px

Renders an embedded responsive card page at two widths and downloads a ZIP containing both screenshots, a pixel-difference heatmap, and a viewport metrics report.

<section><h2>Responsive visual diff</h2><p>375 px and 768 px screenshots, a 375-to-768 pixel heatmap, layout metrics, and a ZIP download.</p></section>

Inputs

Set the required fields, then run the tool.

5 options

ContentPaste or type the main input values.2

Website URLtextRequiredViewport Widths (px)textRequired

SettingsAdjust formats, ranges, numbers, and modes.3

Viewport Height (px)numberOptionalWait After Load (ms)numberOptionalComparison ModeselectOptional

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Responsive Breakpoint Visual Diff

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Verifying Mobile vs. Tablet Card Layouts

2. Auditing Landing Page Scaling Against Desktop Baseline

FAQ

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Web Image Processing Python Samples

Web Image Processing Rust Samples

Tailwind Color Palette Sync

Code Complexity Analyzer

HTTP Request Tester

Cron Expression Explainer

File and Data Diff & Comparison Tools

Text Analysis, Readability, and Content Inspection Tools

Audio Measurement and Inspection Tools

Statistical Analysis, Tests, and Distribution Tools