Website inspection tool

X-ray any website.
See how it's built.

Inspect websites, understand their design system, discover the technology behind them and take useful design elements into your Figma workflow.

Free to use·Open source
00

How to use Website X-Ray.From opening a website to taking something useful from it.

Website X-Ray gives designers and developers a keyboard-first way to inspect, understand and capture useful parts of the web.

Open → Search → Inspect → Capture → Design
01setup

Download Website X-Ray. Get started in a minute.

Download the extension from this website and install it in Chrome. For users, there is no npm install, build command or developer setup required.

1Click Download Website X-Ray.
2Extract the downloaded ZIP file.
3Open chrome://extensions.
4Turn on Developer mode.
5Click Load unpacked and select the extension dist folder.
[object Object]
02start

Open Website X-Ray. Start from any website.

Open the website you want to inspect, then launch Website X-Ray from your browser toolbar or keyboard shortcut.

Open website → Press your shortcut → Website X-Ray
[object Object]
03commands

Search for anything. One command palette.

Instead of hunting through menus, type what you want to do and jump directly to the command.

04inspect

Design Inspector. See what's behind the pixels.

Select any visible element and inspect the visual properties that make it work.

ColorsDimensionsSpacingRadiusShadowsCSS
05type

Typography Inspector. Understand the type system.

Inspect fonts, sizes, weights and spacing or extract the typography used across the page.

Font family · Size · Weight · Line height · Letter spacing · Color
[object Object]
06icons

Icon X-Ray. See an icon. Take the SVG.

Detect SVGs, icon fonts and popular icon libraries, inspect their structure and copy the actual SVG.

See icon → Icon X-Ray → Copy SVG → Done.
07system

Design System Detector. Find the patterns.

Detect repeated colors, typography, spacing, radius, shadows and components across a page.

ColorsTypographySpacingRadiusShadowsComponents
Export detected styles as CSS variables or JSON design tokens.
[object Object]
08capture

Component Capture. Keep what you find.

Save useful UI components with their visual and technical information.

Screenshot + HTML + CSS + Typography + Colors + Dimensions + Spacing + Icons
09save

Inspiration Collector. Build your own reference library.

Save websites, screenshots, selected UI, notes and tags so useful references don't disappear into browser history.

WebsiteScreenshotSelected UINotesTags
[object Object]
10design

Figma Workflow. From inspiration to design.

Copy useful colors, typography, design tokens and SVG icons into your design workflow.

Inspect → Extract → Copy for Figma → Design
11search

SEO Audit. Check the important signals.

Inspect titles, descriptions, headings, links, images, canonical URLs, Open Graph, structured data and other search signals.

TitleMetaCanonicalHeadingsImagesOpen GraphSchema
[object Object]
12ai

AI Discoverability. Understand machine-readable signals.

Review technical signals that help machines understand a website and its content.

Semantic HTML · Schema · Entities · Author information · Robots · Sitemap · Canonical

Website X-Ray reports technical signals. It does not claim whether ChatGPT, Claude, Gemini or another AI system will recommend a website.

[object Object]
13technology

Technology X-Ray. Find what's powering the site.

Detect frameworks, platforms, libraries, analytics and infrastructure signals using multiple detection methods.

ReactNext.jsVueAngularWordPressShopifyWebflowTailwindGSAPThree.js
Technology → Confidence → Evidence
14a11y

Accessibility Audit. Find important accessibility signals.

Check alternative text, form labels, button names, heading hierarchy, ARIA, language and semantic HTML.

Alt textLabelsARIAHeadingsSemantic HTMLKeyboard signals
[object Object]
15export

Reports & Export. Take the useful parts with you.

Copy or export the information you discover while inspecting a website.

CSSSVGJSONDesign TokensFigmaReports
[object Object]
16library

Your libraries. Keep your discoveries.

Everything you save is organized into your local Website X-Ray libraries so your research remains useful later.

My IconsMy ComponentsMy InspirationCommand History
[object Object]
SUPPORT WEBSITE X-RAY

Built in the open. Help us make it better.

Website X-Ray is built for designers and developers who want a faster way to understand and use the web. If you find it useful, there are a few simple ways you can support the project.

HELP US SHIP IT
Help us get Website X-Ray
on the Chrome Web Store.
Help cover $5→
HELP US SHIP IT

Help us get Website X-Ray
on the Chrome Web Store.

GOAL$5Chrome Web Store registration
Help cover the $5 fee→