CQ offers you 4 different type of WCM modes: edit, preview, design and disabled. The first three are actually different modes while the forth is when none of them is available and, at the end, always represent the situation on the publish site.
Differentiate on the Java side is very easy as it provides java API and it provides Javascript API for doing it as well. Nevertheless the same object that gives you the mode is not (and should not be) available on the publish which will always end in ifs here and there.
This script should help you and it should be possible to drop it as part of your clientlibs and ready to be used for he use case.
Something very simple that hopefully will help your daily life. 🙂
https://github.com/davidegiannella/cq-misc/blob/master/EditMode.js
I guess, you are referring to WCM modes and not runmodes 🙂
Indeed. Called it EditMode and spoke about Run ones… 🙂
PS: updated.
This is not working in AEM instance .. any idea how to do the same in AEM?
Sorry Shri but I have no idea. I’ve not been using CQ/AEM on the front-end side for the past 4 years. I’d say to open e debug console and see if you have any errors that could help you understanding what’s going on