JS framework detector. Framework + tooling layers.
Paste HTML source. We identify the JS framework (React, Vue, Angular, Svelte, Solid, Preact, Lit, Alpine, htmx) plus the deeper layers — state management, routing, data fetching, UI library, build tool. The full developer-experience picture.
Paste HTML source. We scan for the JS framework + meta-framework, state management library, routing library, data-fetching library, UI component library, styling approach, and build tool. The full JS developer-experience picture.
Tip: use rendered DOM for SPAs
<html> → Copy → Copy outerHTML. The rendered DOM includes the framework-injected elements that signal the framework.Sources used
- React docs + Next.js docs — hydration markers, App Router signatures
- Vue docs + Nuxt docs — runtime + SSR markers
- Svelte docs + SvelteKit docs — class hash patterns + script signatures
- Angular docs — ng-* attribute patterns + zone.js detection
- Astro docs, SolidJS, Lit, Alpine.js, htmx — meta-framework + niche-framework signatures
- Vite, webpack, Parcel, Turbopack — bundler asset URL patterns
No data is sent to any external service. Detection runs entirely in your browser via regex pattern matching against the HTML you paste. The framework + meta-framework + state + routing + UI + build-tool signatures above are based on the public documentation linked.
Privacy: detection happens in your browser. Nothing is sent or logged.
Eight layers. Each tells a story.
Framework + meta-framework. The base layer. React dominates web app dev (~40% of new projects per State of JS surveys). Vue + Nuxt have strong adoption in Asia and Europe. SvelteKit is the high-satisfaction choice for new projects. Astro targets content-heavy sites with island-architecture for selective interactivity. Next.js is the React meta-framework of choice. The framework + meta-framework pair tells you the deployment posture and operational complexity.
State management. How the app coordinates shared data. Redux is the verbose-but-traceable veteran; Zustand is the modern lightweight default for new React projects; Jotai and Recoil are atomic-state alternatives. Pinia replaced Vuex for Vue. Svelte uses built-in stores. The choice signals team preferences: Redux Toolkit suggests an enterprise codebase with strict patterns; Zustand suggests a lean modern team; no detected library suggests local-component-state-only (fine for small apps).
Routing + data fetching. The data + URL layer. React Router is the React default. TanStack Router is the modern type-safe alternative growing in adoption. For data fetching: TanStack Query dominates the modern React landscape; SWR is the lighter alternative; Apollo / Relay for GraphQL-first apps. Data-fetching choice signals API style: TanStack Query = REST-first; Apollo = GraphQL-native.
UI library + styling. The visual layer. shadcn/ui (built on Radix primitives) is the breakout 2024-2025 default for React + Tailwind teams — copy components into your codebase rather than pull as dependency. Material UI dominates enterprise React. Mantine, Chakra, NextUI cover the rest. For styling: Tailwind CSS dominates new projects (~60% adoption per recent surveys); styled-components and Emotion still appear in enterprise codebases; CSS Modules are the framework-neutral default.
Build tool. The dev-experience layer. Vite dominates new projects with sub-100ms HMR. Webpack remains in legacy enterprise codebases (slow but battle-tested). Turbopack (Next.js) and Rolldown (next-gen Vite) are emerging. Build-tool choice tells you a lot about team modernization posture and the cost of contributing to the codebase.
Four jobs this tool covers.
Job 1: Acquisition / vendor diligence. Knowing a target's full JS stack tells you about their engineering team's modernization, the cost of replacement / extension, and the talent profile they hire for. A target on Next.js + TanStack Query + Tailwind + Vite is operating modern; one on CRA + Redux + styled-components + Webpack 4 is legacy and the engineering refactor will be substantial.
Job 2: Sales prospecting for agencies. Targeting React + Next.js + Tailwind agencies? Pre-qualify prospects by detecting their stack from public HTML. The eight-layer breakdown tells you whether the prospect is a perfect fit (matches your service ICP) or wrong fit (Vue + Nuxt prospect calling a React-shop).
Job 3: Migration / rebuild scoping. Inheriting an app as a new agency-of-record? Detect the full JS stack to know what your engineers need to know — what state-management pattern, what data-fetching idioms, what UI library conventions. Different stacks mean different ramp-up time. Pair with our CMS Detector for the platform layer and Tech Stack Detector for the broader integrations.
Job 4: Competitive intelligence. Knowing competitor framework choices tells you about their constraints. A competitor on Next.js can do streaming SSR + RSC; one on plain CSR can't. One on Tailwind has fast iteration on visual changes; one on legacy CSS-in-JS has slower visual iteration. The stack signals what kind of moves are easy and hard for them.
Six questions users ask.
How is this different from Tech Stack Detector?
Tech Stack Detector is broad — it identifies what's on the page across 10 categories including analytics, payment, chat, ads. JavaScript Framework Detector goes DEEPER on the JS-tooling specifically: not just 'this is React' but the meta-framework (Next.js / Remix / Gatsby), state management (Redux / Zustand / Jotai / Recoil), routing library (React Router / TanStack Router / Wouter), data-fetching layer (TanStack Query / SWR / Apollo / Relay), UI component library (shadcn / Material UI / Mantine / Chakra / Radix), styling approach (Tailwind / styled-components / Emotion / CSS Modules), and build tool (Webpack / Vite / Parcel / Turbopack). The full developer-experience picture, useful for technical due diligence and migration scoping.
Why detect the meta-framework on top of the framework?
React + Next.js is a different operational profile from React + Create React App from React + Vite. Next.js implies SSR/SSG capability, Vercel-friendly hosting, file-based routing, image optimization built in. CRA implies client-side-only rendering. Vite implies a modern dev experience with HMR but client-only by default. The framework alone tells you the surface; the meta-framework tells you the deployment posture and operational complexity. Same for Vue + Nuxt, Svelte + SvelteKit, Solid + SolidStart.
Which state-management libraries does it spot?
React: Redux + Redux Toolkit, Zustand, Jotai, Recoil, MobX, Valtio, Nanostores. Vue: Pinia, Vuex (legacy). Svelte: built-in stores, plus nanostores. Each detection signature is a recognizable global object, a characteristic class name, or an asset URL pattern. Some detection is impossible from initial HTML alone (libraries loaded async after hydration); for those, the rendered DOM from DevTools is a better source.
Why is build-tool detection useful?
Build-tool choice affects every aspect of the development experience and operational profile. Webpack-built sites are typically slow to dev-build (5-15s HMR) but battle-tested. Vite-built sites have ~50ms HMR and instant cold start, modern dev experience. Parcel sits between. Turbopack (Next.js) and Rolldown (next-gen Vite) are emerging. Knowing the build tool tells you about the team's modernization posture and the cost of extending their codebase. Detection happens via characteristic asset URL patterns: webpack chunks have hashed names, Vite uses unhashed dev paths and hashed prod paths with specific structure.
What if I paste HTML from a server-rendered page?
Detection works best on server-rendered or static HTML — every framework leaves recognizable hydration markers in the initial HTML. For client-side-rendered single-page apps with sparse initial HTML, the initial source has very little to scan. In those cases, paste the rendered DOM from DevTools instead — open the page, F12 → Elements → right-click document root → Copy → Copy outerHTML. The rendered DOM includes all the framework-injected elements that signal the framework.
Is the HTML I paste sent anywhere?
No. Detection happens entirely in your browser. The page is static HTML; the only network request is the initial page load. Safe for HTML from internal apps, partner integrations, or any source you don't want to share. We never see your input.
Published .