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');

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.