Website technology detector

Q: How do I find out what technology a website uses?

Activate Screen Ruler on the site and open the Page tab in the side panel. The Technologies section lists the frameworks, CMS, libraries and analytics tools it detected, and hovering an entry shows its version when the site exposes one.

Find out what any website is built with, from the framework and CMS to the UI library, charting tools and analytics, without leaving the page.

What it detects

Open the Page tab in the Screen Ruler side panel and the Technologies section lists everything Screen Ruler recognised on the page, as a row of logos with names. It checks for more than 180 technologies, including:

Frameworks: React, Vue, Angular, AngularJS, Svelte, SvelteKit, Next.js, Nuxt, Gatsby, Remix, Astro, Qwik, Solid, Preact, Ember and Alpine.js.
CMS and commerce: WordPress, Shopify, WooCommerce, Wix, Drupal, Joomla, Magento, Sanity and Contentful.
CSS and UI libraries: Tailwind CSS, Bootstrap, Material UI, Ant Design, Chakra UI, Radix UI, Headless UI, Vuetify, Quasar, PrimeReact and UnoCSS.
Charts, graphics and animation: D3, Chart.js, ECharts, Highcharts, Plotly, three.js, PixiJS, GSAP, Framer Motion, Lottie and Anime.js.
Analytics and monitoring: Google Analytics, Google Tag Manager, Plausible, PostHog, Mixpanel, Amplitude, Segment, Hotjar, Matomo, Sentry, LogRocket and FullStory.
Delivery and tooling: Cloudflare, Fastly, Akamai, Netlify, Vercel Analytics, Vite, Storybook, Google Fonts and Font Awesome.

Hover a technology to see its version number when the site exposes one. Click it to open that technology's website.

How to check what a website is built with

Open the website you want to check.
Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
In the side panel, switch to the Page tab. The Technologies section appears as soon as detection finishes, with a count in its heading.

If the page changes after it loads, for example after you log in or move to another view, click the refresh button next to the page title at the top of the Page tab to run detection again.

How detection works

Screen Ruler runs its checks inside the page itself, so it sees the same JavaScript objects and markup the site's own code does. Each technology has its own test, and the tests look at several kinds of evidence:

Global objects that libraries leave behind, such as window.React or Next.js's __NEXT_DATA__.
Markup signatures, such as Angular's ng-version attribute or the data attributes frameworks add to the DOM.
Meta tags and script URLs, such as a CMS generator tag or a script loaded from a known CDN path.
CSS fingerprints, such as the --tw- custom properties Tailwind CSS defines.

Checks also look inside open shadow roots, so sites built from web components are not reported as using nothing. Screen Ruler skips its own interface while it looks, so its toolbar never shows up as a detected technology. When a meta-framework like Next.js, Gatsby, Remix or Astro is found, React is listed too where React itself was not detected separately.

Because detection happens in your own browser, it works on local development servers, staging sites, intranet tools and pages behind a login, which online lookup services cannot reach.

What it cannot see

Detection is limited to what the page reveals in the browser. Server-side languages, databases and backend frameworks usually leave no trace in the page, so they are not reported. Versions only appear when a library publishes them somewhere readable, so many entries show a name without a version. A site that bundles a library without exposing any of its usual signs can also go unrecognised. Treat the list as what the page shows you, not a full inventory of the stack.

When it is useful

Researching a site you admire. Find out which framework, UI kit or animation library is behind a design before you try to recreate it.
Competitor and prospect research. See which CMS, commerce platform and analytics tools a company uses.
Taking over an unfamiliar project. Get a quick picture of the libraries an inherited site loads before opening the codebase.
Checking third party scripts. Spot analytics, tag managers and session recording tools running on a page.

Pair it with the font inspector and color palette extractor to collect the rest of a site's design decisions, or check how heavy those libraries are with page weight.

Technology detection is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free trial with everything unlocked.

Common questions

How do I find out what technology a website uses?

Activate Screen Ruler on the site and open the Page tab in the side panel. The Technologies section lists the frameworks, CMS, libraries and analytics tools it detected, and hovering an entry shows its version when the site exposes one.

Can it tell which CMS a site runs on?

Yes, for the platforms it knows. It recognises WordPress, Shopify, WooCommerce, Wix, Drupal, Joomla, Magento, Sanity and Contentful among others, using signs such as generator meta tags, script paths and global objects.

Does it work on localhost and pages behind a login?

Yes. Detection runs in your own browser on the page you have open, so it works on local development servers, staging sites and logged-in dashboards, unlike online lookup tools that can only fetch public URLs.

Why is a technology I know the site uses missing?

Screen Ruler can only report what the page reveals in the browser. Backend languages and databases are not visible, and some bundled libraries hide the globals and markers that identify them. If the page changed after loading, click the refresh button at the top of the Page tab to run detection again.