Detect JS Framework used in a Website

detect-js-framework.js

// Paste these lines into website's console (Win/Linux: Ctrl + Shift + I / Mac: Cmd + Alt + I)

if(!!window.React ||
   !!document.querySelector('[data-reactroot], [data-reactid]') ||
   Array.from(document.querySelectorAll('*')).some(e => e._reactRootContainer !== undefined || Object.keys(e).some(k => k.startsWith('__reactContainer')))
)
  console.log('React.js');

if(!!document.querySelector('script[id=__NEXT_DATA__]'))
  console.log('Next.js');

if(!!document.querySelector('[id=___gatsby]'))
  console.log('Gatsby.js');

if(!!window.angular ||
   !!document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||
   !!document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]')
)
  console.log('Angular.js');

if (!!window.getAllAngularRootElements || !!window.ng?.coreTokens?.NgZone)
  console.log('Angular');

if(!!window.Backbone) console.log('Backbone.js');
if(!!window.Ember) console.log('Ember.js');
if(!!window.Vue) console.log('Vue.js');
if(!!window.Meteor) console.log('Meteor.js');
if(!!window.Zepto) console.log('Zepto.js');
if(!!window.jQuery) console.log('jQuery.js');

!!window.can
for Can.js
try it on https://www.apple.com//shop/buy-mac/macbook-pro/16-inch

@rambabusaravanan
Thanks!

One distinction is to determine which framework is currently using the $ (dollar) variable.

I use:
if($ === window.jQuery) console.log ('using jQuery');

This allows my modules to know which interface to implement for my variables at run time

If an undefined is printed would that mean custom js?

If an undefined is printed would that mean custom js?

@gercamjr not to 100%. It says that we can not detect a framework on normal way.

For example, you can write a code like this:

(function() {
  const $ = window.jQuery;
  window.jQuery = undefined;
})()

if(!!window.jQuery) console.log('jQuery.js'); will output nothing, but jQuery is used.

This doesn't work, I tried on Spotify, Facebook... and it print undefined

@rambabusaravanan Hey is there any way to make it work in 2022. It seems like the window object no more has these properties for most of the frameworks. Hope to see a solution for this!

Spotify landing page (https://www.spotify.com/) -> Next.js
Apple Store (https://www.apple.com/store) -> React.js

@shubhankar5 as you mentioned, the latest react has changed the way of rendering and is hard to detect. For example, as @anhtuta mentioned Spotify, its Web Player is built using react but couldn't detect by navigating through dom. I will check on this ..

Angular (https://angular.io/) -> Angular 2+
Delta (https://www.delta.com/) -> Angular 2+, jQuery
Freelancer (https://www.freelancer.com/) -> Angular 2+

UpWork (https://www.upwork.com/) -> Vue.js

Hulu (https://www.hulu.com/welcome) -> Next.js
Netflix Jobs (https://jobs.netflix.com/) -> Next.js
AT & T (https://www.att.com/) -> Next.js

Singtel Shop (https://shop.singtel.com/) -> Gatsby.js
Apollo GraphQL (https://www.apollographql.com/) -> Gatsby.js
National Geography (https://www.nationalgeographic.co.uk/) -> Gatsby.js
React developer docs (https://reactjs.org/) -> Gatsby.js
TypeScript developer docs (https://www.typescriptlang.org/) -> Gatsby.js
Figma (https://www.figma.com/) -> Gatsby.js

Thanks for sharing! Great work.

This is also super handy as a browser bookmarklet.
Replacing console.log with alert and wrapping the code in javascript: (() => { // Your code here! })(); will do the trick! Then you can save it as a bookmark in the browser and get the response with 1 click (without having to copy & paste in the console).

Thanks for sharing! Great work.

This is also super handy as a browser bookmarklet. Replacing console.log with alert and wrapping the code in javascript: (() => { // Your code here! })(); will do the trick! Then you can save it as a bookmark in the browser and get the response with 1 click (without having to copy & paste in the console).

Thank you so much for this hack @NHinternesch , I've forked this and added a comment with sample here

if(!!window.React ||
   !!document.querySelector('[data-reactroot], [data-reactid]'))
  console.log('React.js');

This doesn't work for latest react apps.

Instead use :

if(Array.from(document.querySelectorAll('*'))
  .some(e => e._reactRootContainer !== undefined))
  console.log('React.js');

@rambabusaravanan can you please update ^ for future googlers

Binance https://www.binance.com/en/trade/BTC_USDT?theme=dark&type=spot -> React

sonarqube -> React

https://www.tripadvisor.com/ -> React
https://www.thefork.be/ -> React and Next

FlanxQuikkerJS Detection!

This code detects if the website had implemented my own JS Framework FQJS

if(!!window.document.querySelector("script[src*='fq.js']") || !!window.document.querySelector("#fq-root")) 
console.log("fq.js");

github.com => react for example the repository page https://github.com/facebook/docusaurus/blob/main/README.md

https://www.primevideo.com => react

hmm... I am getting undefined..

Only This is working for me..

if(Array.from(document.querySelectorAll('*'))
.some(e => e._reactRootContainer !== undefined))
console.log('React.js');

Thanks for the code. I have been testing with some major sites like FB, AMZ and even Github and they are returning "undefined". Am I doing it wrong or these major companies have a way to cover the detection script from running? Thanks.

you could also try to use js-framework-detector which does the same thing but supports more libraries. Reference code

you could also try to use js-framework-detector which does the same thing but supports more libraries. Reference code

Thanks.

Thanks @Shubham-Kumar-2000, updated it.

Also some new react versions, have property like __reactContainer<random> instead of just _reactRootContainer.
Updated them as well for newer react 👍

With the new react update,

https://www.apple.com/store => React.js
https://open.spotify.com/ => React.js
https://react.dev/ => React.js, Next.js
https://www.gatsbyjs.com/ => React.js, Gatsby.js
https://developer.mozilla.org/en-US/ => React.js
https://www.facebook.com/ => React.js
https://www.flipkart.com/ => React.js

https://www.intercom.com/ => React.js, Next.js
https://goldenpi.com/ => Angular

web.whatsapp.com => React.js

The detection method of Vue is not working on this site:
https://www.bilibili.com/

The detection method of Vue is not working on this site: https://www.bilibili.com/

if(!!window.__VUE__) console.log('Vue.js');

I just tried this method. It's workable.

// Svelte.js detection

if(!!document.querySelector('[data-svelte-h]') || !!document.querySelector('sveltekit-endpoint, sveltekit-app'))
  console.log('Svelte.js/SvelteKit');