How to get WCMMODE in AEM using Sightly?

 WCMMODE in AEM helps us to identify AEM author and publish instances and write and execute the mode-specific code or script.

WCMMODE Edit and Preview

WCMMODE.edit or preview represents to the author instance of the AEM.

WCMMODE disabled

WCMMODE.disabled returns the value disabled which means we are on publish mode of AEM.

To get the WCMMODE and write author or publish mode related mode in HTL/Sightly we can use the below code snippet to get the value of wcmmode in our Sightly code.

<sly data-sly-test="${wcmmode.edit}">
	<p>AEM author Edit mode</p>
</sly>

<sly data-sly-test="${wcmmode.disabled}">
	<p>AEM publish mode</p>
</sly>

/* Other way to get the WCMMODE in HTL sightly */

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design }">
	<p>AEM author Edit or Design mode</p>
</sly>

<sly data-sly-test="${!author}">
	<p>AEM publish mode</p>
</sly>

Hope this helps you! If you get to know any other way to fetch the wcmmode in Sightly/HTL/HTML or javaScript please let us know in the comment section.