Skip to content

Instantly share code, notes, and snippets.

@rambabusaravanan
Last active April 8, 2024 12:39
Show Gist options
  • Save rambabusaravanan/1d594bd8d1c3153bc8367753b17d074b to your computer and use it in GitHub Desktop.
Save rambabusaravanan/1d594bd8d1c3153bc8367753b17d074b to your computer and use it in GitHub Desktop.
Detect JS Framework used in a Website
// 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');
@tarasshpek
Copy link

To check if website uses Angular 2+:
if (!!window.getAllAngularRootElements) console.log('Angular 2+');

@nonopolarity
Copy link

@nagayev
Copy link

nagayev commented May 25, 2020

@shimscharf
Copy link

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

@gercamjr
Copy link

gercamjr commented Jul 9, 2021

If an undefined is printed would that mean custom js?

@websolutions-hamburg
Copy link

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.

@anhtuta
Copy link

anhtuta commented Aug 21, 2021

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

@shubhankar5
Copy link

@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!

@rambabusaravanan
Copy link
Author

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

@rambabusaravanan
Copy link
Author

@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 ..

@rambabusaravanan
Copy link
Author

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

@NHinternesch
Copy link

NHinternesch commented Sep 13, 2022

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).

@noriel0010
Copy link

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

@Shubham-Kumar-2000
Copy link

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

@Shubham-Kumar-2000
Copy link

@rambabusaravanan can you please update ^ for future googlers

@hamzahamidi
Copy link

@hamzahamidi
Copy link

sonarqube -> React

@russbert
Copy link

@Yerenzter
Copy link

Yerenzter commented Nov 12, 2022

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

@hamzahamidi
Copy link

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

@hamzahamidi
Copy link

@ex-ali-edx
Copy link

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

@ivanjoonyiphon
Copy link

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.

@ambujsahu81
Copy link

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

@ivanjoonyiphon
Copy link

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

Thanks.

@rambabusaravanan
Copy link
Author

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 👍

@rambabusaravanan
Copy link
Author

rambabusaravanan commented Jul 11, 2023

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

@arled
Copy link

arled commented Jul 26, 2023

web.whatsapp.com => React.js

@xJkit
Copy link

xJkit commented Nov 8, 2023

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

@xJkit
Copy link

xJkit commented Nov 8, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment