How to Find Out What Framework a Website Uses

Modern websites are built on JavaScript frameworks like React, Vue, Angular, Next.js, Nuxt, and Svelte. Knowing which framework a site uses helps you understand its architecture, estimate development complexity, and evaluate technology choices for your own projects.

Here is how to detect JavaScript frameworks on any website, from manual inspection to automated tools.

Detecting React

React is the most widely used JavaScript UI library. Here are the clues that reveal its presence:

• DOM attributes: React adds data-reactroot or data-reactid to the root element on older versions. Newer versions use a root <div id="root"> or <div id="__next"> (for Next.js).
• JavaScript globals: Open the browser console and check for __REACT_DEVTOOLS_GLOBAL_HOOK__ — this is present on any page running React, even in production.
• Bundle filenames: Look for script URLs containing react-dom, react.production.min.js, or chunk files with React-specific naming patterns.

Detecting Next.js

Next.js is a React meta-framework for server-rendered and static websites. It has several distinct fingerprints:

• HTTP headers: Look for X-Powered-By: Next.js (though some sites remove this header for security).
• Script paths: Next.js serves JavaScript bundles from /_next/static/. If you see these paths in the source, the site is almost certainly Next.js.
• HTML structure: A <div id="__next"> wrapping the page content and __NEXT_DATA__ in a script tag are definitive indicators.

Detecting Vue.js

Vue.js is another popular frontend framework. Detection methods include:

• DOM attributes: Vue adds data-v- scoped style attributes to elements (e.g., data-v-4a3b2c1d). These are unique to Vue's single-file component system.
• JavaScript globals: Check for __vue__ on DOM elements using the browser console, or look for Vue.config as a global.
• Script URLs: Look for vue.min.js, vue.runtime.esm, or CDN URLs from unpkg.com/vue or cdn.jsdelivr.net/npm/vue.

Detecting Nuxt

Nuxt is the Vue equivalent of Next.js — a meta-framework for server-side rendering and static sites:

• HTML structure: Look for <div id="__nuxt"> or <div id="__layout">.
• Script paths: Nuxt serves bundles from /_nuxt/.
• Inline data: A window.__NUXT__ global variable containing hydration data is a clear indicator.

Detecting Angular

Angular (the modern version, not AngularJS) has these fingerprints:

• HTML attributes: Angular components use custom element tags and special attributes like ng-version, _ngcontent-, and _nghost-.
• Script naming: Angular CLI builds produce files like main.js, polyfills.js, and runtime.js with hash suffixes.
• JavaScript globals: Check for ng.getComponent or getAllAngularRootElements() in the browser console.

Detecting Svelte and SvelteKit

Svelte compiles components to vanilla JavaScript, making it harder to detect than other frameworks. Still, there are indicators:

• CSS classes: Svelte generates scoped class names like svelte-1a2b3c4 on elements.
• SvelteKit paths: SvelteKit serves assets from /_app/immutable/ with chunk-based naming.
• Inline data: Look for __sveltekit in inline scripts.

The Automated Approach

Manually checking each of these indicators is time-consuming. An automated tool like WhatStack checks all of these signals (and many more) in a single scan. It analyzes HTTP headers, HTML patterns, script URLs, DOM structure, JavaScript globals, and cookies to detect frameworks with confidence scores.

For example, scanning a Next.js site with WhatStack will show both Next.js and React (since Next.js implies React), along with every other technology on the site — from the CDN and web server down to the analytics and advertising stack.

Try entering any URL in the WhatStack scanner to see the full framework detection in action. Browse the JavaScript frameworks directory to see all the frameworks we detect.