How to detect the framework a website is built with
There's no single tag that announces 'this site uses Next.js'. Frameworks leave fingerprints — in the DOM, in network headers, in global variables, in bundle filenames — and a good detector cross-references all of them. The fastest way to go from curiosity to confident answer is to combine Chrome DevTools heuristics with an extension that reads the site's JavaScript sourcemaps when they're exposed.
Background
Every modern JavaScript framework ends up leaving distinctive traces in the page it renders. React inserts hydration markers and sets up a particular pattern of chunk-loading scripts. Next.js wraps everything in a `#__next` div on the Pages Router or emits a specific RSC payload format on the App Router. Nuxt ships its own runtime globals and serves chunks from `/_nuxt/`. Svelte's compiler mangles component CSS classes into `svelte-<hash>` prefixes. None of these traces are documented as 'how to detect me' by the framework authors, but in practice they're stable enough that you can identify the framework from the page's HTML and network activity alone. The trick is knowing where to look and how to weight the evidence. A single DOM marker can be spoofed or accidentally matched; three or four correlated signals together form a high-confidence verdict. This guide walks through the signals in order of reliability, shows you how to check each one manually in Chrome DevTools, and points out the specific failure modes of each approach. By the end you should be able to identify most frameworks in under a minute, and you'll know which edge cases push you toward needing sourcemap-level evidence to be sure.
Why this matters
Knowing the framework behind a site is the starting point of any frontend reverse-engineering task. It tells you what patterns to expect in the code (hooks vs. composition API vs. reactive stores), what hosting and edge-runtime constraints the team is operating under, what other libraries they've probably paired it with (React → likely shadcn/ui or Tailwind; Vue → likely Pinia and VueUse; Svelte → likely Tailwind and minimal state), and what migration history is plausible. It also tells you whether the site's performance characteristics are likely to be SSR-driven or SPA-hydration-driven, which changes how you should think about its Core Web Vitals. Competitive analysis, UX auditing, hiring signal, performance investigation — all of it starts with the framework question.
Prerequisites
- A Chrome-based browser (Chromium, Edge, Brave, Arc, Vivaldi — the DevTools surface is equivalent).
- Familiarity with the DevTools Network, Elements and Console panels.
- Optional: the Sourcemap Explorer extension installed, for the exact-version and bundled-library layer.
Step-by-step
- 1
Look for obvious DOM markers in DevTools
Open DevTools (F12) and check the Elements panel for well-known wrappers. `#__next` is Next.js Pages Router. `#__nuxt` is Nuxt. `#___gatsby` is Gatsby. `<div data-remix-run>` is Remix. `<astro-island>` tags are Astro. `[ng-version]` is Angular (and the attribute's value is the exact version). `#app` alone is ambiguous — Vue and many SPAs use it. A single clean-match narrows the field in seconds.
Tip: The Elements panel's 'Find' search (Ctrl/Cmd+F inside Elements) accepts CSS selectors. Paste `#__next, #__nuxt, #___gatsby, [ng-version], [data-remix-run], astro-island` and any match highlights immediately.
- 2
Check the Network tab's document response headers
Reload the page with DevTools open and click the very first document request in the Network tab. Look at Response Headers. `X-Powered-By: Next.js <version>` is a direct hit (often includes version on self-hosted setups). `X-Generator: Nuxt <version>`, `X-Drupal-Cache`, `X-Magento-*`, `X-Pingback` (WordPress) all reveal the stack directly. `Server: cloudflare` plus `X-Vercel-Id` tells you the hosting but not the framework — read those separately from the app layer.
Tip: `Set-Cookie: next-auth.session-token=` on the document response is a strong NextAuth signal, which implies React/Next. Set-Cookie with `__Secure-next-auth` means the site uses the more recent secure-prefixed NextAuth naming.
- 3
Inspect global window variables in the Console
In DevTools Console, type `__NEXT_DATA__`. If the page defines it, you'll see a JSON payload with `props`, `buildId`, `query` and the Next.js configuration. Similar variables: `window.__NUXT__` (Nuxt hydration payload), `window.__SAPPER__` (Sapper — older SvelteKit predecessor), `window.__remixContext` (Remix). For framework versions, try `React.version`, `Vue.version`, `ng.version` — they work when the framework is exposed as a global (less common in modern bundled builds).
Tip: On App Router Next.js apps, `__NEXT_DATA__` is not defined. Look for `self.__next_f.push(...)` calls in inline scripts instead — that's the RSC flight payload.
- 4
Look for hashed bundles under framework-specific paths
In the Network tab, sort scripts by URL. `_next/static/chunks/...` is Next.js (both routers). `/_nuxt/` is Nuxt. `/build/routes-*.js` often means Remix. `/_astro/_astro_*.js` is Astro. `/_app/immutable/` is SvelteKit. `/static/js/main.<hash>.js` without other prefixes suggests Create React App (CRA) or an older Vite-without-base-url setup.
Tip: Framework-specific URL prefixes survive minification and hashing because the framework's router generates them at build time. They're the single most robust signal after sourcemaps.
- 5
Read the inline-script flight/hydration payload
On a Next.js App Router site, open any page and search the HTML source (Ctrl+U) for `self.__next_f.push`. Each call pushes a chunk of the RSC payload. On SvelteKit, look for `<script>globalThis.__sveltekit_...</script>`. On Remix, `window.__remixContext` gets populated inline. These payloads don't give you the framework version but they unambiguously confirm the framework family.
Tip: The flight payload format has shifted between Next.js versions (chunks are numbered differently between 13, 14 and 15). If you see unusual numeric prefixes, you're looking at a newer or older-than-common version of the router.
- 6
Install Sourcemap Explorer for the exact answer
If the site exposes sourcemaps (most production deployments do, often by accident), Sourcemap Explorer will find them and show the original `node_modules/next/package.json` contents — which includes the exact semver. That's the only way to get 'Next.js 14.2.3' instead of 'Next.js 14' or 'Next.js'. It also detects React, Vue, Nuxt, Svelte and hundreds of other libraries the minified bundle doesn't expose at runtime, including the whole transitive dependency graph you'd otherwise have to infer.
Tip: If sourcemaps are missing but you strongly suspect Next.js, look for `/_next/static/chunks/pages/_app-<hash>.js` (Pages Router) or `/_next/static/chunks/app/` (App Router). The path prefix itself tells you the router paradigm before you even download the file.
Real-world example
Alternative methods
View page source and regex
`Ctrl+U` for view source, `Ctrl+F` for strings like `__NEXT_DATA__`, `data-sveltekit`, `ng-version`, `__NUXT__`. Works well for sites that don't hydrate over the top of their initial HTML. Less reliable for heavily client-side-rendered SPAs where the initial HTML is nearly empty.
Wappalyzer, BuiltWith, WhatRuns
Third-party detectors give you a categorical answer quickly. Their version detection is usually regex-based and major-only; they don't read sourcemaps; and WhatRuns specifically sends the URL to its servers on every popup invocation, which matters for private pages. See the alternatives pages for deeper comparisons.
Sentry/Bugsnag script URL inspection
Some error-tracking scripts include the framework name or version in their configuration payload. Search inline scripts for `Sentry.init(` and look at the `release` field — it often contains the deployment hash, and the surrounding code sometimes reveals the framework used to build the app.
Troubleshooting
DOM inspector shows nothing framework-specific.
The app is probably heavily hydrated — the framework's markers appear only after the client-side bundle runs. Wait 1-2 seconds after load, then re-inspect. Alternatively, reload with the Console open and watch `window.__NEXT_DATA__`, `window.__NUXT__` etc. get defined mid-load.
The `X-Powered-By` header is missing.
Many hosting providers strip it or admins disable it for a trivial security-through-obscurity reason. The framework is still there — check the asset URL prefixes (`_next/static/`, `/_nuxt/`, `/_app/immutable/`) instead.
A site claims 'React' but no React.version global.
Modern bundled builds don't expose React as a window global. React is there, just not globally visible. Download a script, search for `react.production.min` or `react-dom.production.min` strings; or look at the JSX runtime imports in the sourcemap.
Multiple framework markers at once (React + Vue in the same page).
Common on multi-framework stitch-ups: an Astro site with both React and Vue islands; a WordPress frontend embedding a React micro-frontend; a Webflow site with a React-based widget. The 'main' framework is the one serving the document; the others are embedded tools.
Caveats
What to do next
Once you've identified the framework, the adjacent questions usually matter next: which libraries does the site bundle alongside it? Which UI kit? Which state/data layer? Which CMS or backend does it talk to? The see-every-javascript-library and detect-tailwind-css guides pick up from here. For WordPress-based sites the plugin enumeration guide gives you the CMS-layer detail.
FAQ
Can I tell the framework without installing anything?
Partially. DevTools + the Network tab gives you a confident answer for 80% of major-framework cases. For exact versions and for libraries buried inside a bundle, you need to read the sourcemap — which is what Sourcemap Explorer automates.
What if the site uses a meta-framework like Astro or Qwik?
The runtime usually exposes both the wrapper and the islands. Astro uses `<astro-island>` tags plus optional React/Vue/Svelte per island. Qwik uses its own hydration markers (`q:container`, `q:host`). Sourcemap Explorer's Stack tab lists every framework it detects, so meta-framework stacks come through as multiple entries.
Will this work on sites that block DevTools?
Some sites throw in the DevTools console to discourage inspection (it's annoying, not a real block). The Network and Elements panels still work. Browser extensions still work. The inspection-blocking techniques don't affect extensions that operate on the webRequest API.
How accurate is the framework detection?
Major frameworks (Next, Nuxt, React, Vue, Angular, Svelte, Remix, Astro, Gatsby) are essentially always detectable from network activity plus DOM markers plus the inline scripts. The edge cases are custom frameworks, heavily obfuscated builds and private vendor-specific wrappers — those can require reading the sourcemap or inspecting runtime behavior directly.
Does framework detection affect how I should test the site?
Yes. Next.js (App Router) sites behave differently under load than Pages Router sites; SvelteKit sites have different streaming patterns; Remix sites have loader/action semantics. If you're testing performance or writing a Playwright script, framework identification is the first step.
Related
Skip the manual steps.
Sourcemap Explorer automates every workflow in this guide — free, local, no sign-up.