AEM clientlib certain javascript files to load only on AEM author

[Srinivas_Opti]

Hello,

I wanted to know what is the best possible way to have certain JavaScript files of clientlib to work only on AEM author and does not load on publishers.

Assume I have 10 javascript files in the clientlib out which 3 files must load only in aem author and other 7 files must load only in publisher

How could i achieve it, what are best possible solutions for it.

Regards,

Srinivas

[SantoshSai]

Hi @Srinivas_Opti,

IMO, the best possible ways to handle this:

1. Split into Separate ClientLibs

Create two separate client libraries:

• clientlib-author: includes the 3 scripts for author only

• clientlib-publish: includes the 7 scripts for publish only

Then include them conditionally based on the runmode.

A. HTL Conditional Include (Best Practice)

Use HTL to include only the relevant clientlib based on the runmode:

<sly data-sly-test="${wcmmode.edit || wcmmode.design}">
  <cq:includeClientLib categories="clientlib-author" />
</sly>

<sly data-sly-test="${!wcmmode.edit && !wcmmode.design}">
  <cq:includeClientLib categories="clientlib-publish" />
</sly>

wcmmode is only available on Author, so this ensures the clientlib-author only loads in authoring mode.

2. Use Runmode-Specific JS Condition (if JS must live together)

If you cannot split clientlibs or must ship all JS together, wrap the execution of each JS file with an environment check:

// In author-only script (e.g., author-script.js)
if (window.location.hostname.includes('author') || 
    window.location.hostname.includes('localhost')) {
  // Author-only code here
}

Less secure and not ideal — because the file is still loaded on Publisher, just not executed.

3. Dispatcher-Level Exclusion (Not Preferred for JS Control)

You can block certain JS paths using Apache Dispatcher config (/filter or rewrite rules). But this is a brittle approach and not recommended for logic-based clientlib inclusion.

4. Embed Dynamically via Sling Model or Servlet

If your project uses Sling Models or backend templating, you can dynamically build the list of JS files based on the runmode:

if (slingSettingsService.getRunModes().contains("author")) {
   // inject clientlib-author
} else {
   // inject clientlib-publish
}

This gives backend-level control but may increase complexity.

[arunpatidar]

Hi @SantoshSai 
Option 1 does not follow the HTL syntax. Option 2-3-4 are just bandage/non-aem-standard solution.

[SantoshSai]

@arunpatidar 
You're right that HTL syntax must be correct. But the concept of using a flag like ${wcmmode.edit} or ${slingRequest.requestPathInfo.selectorString} to conditionally include a clientlib is a valid and common HTL pattern.

Also, Yes, option 2-3-4 are workarounds - but not necessarily anti-patterns. For example:

• Using granite.author check in JavaScript is officially documented by Adobe for author-specific logic.

• Targeting JS inclusion with <meta> tags or JS feature detection is common in hybrid apps and shared libraries.

So while not HTL-native, they are valid defensive coding techniques, especially when dealing with environments like Preview or Hybrid Author/Publish access.

[arunpatidar · Accepted solution]

Hi @Srinivas_Opti 

You can include the Authoring Clientlibs in your page using below

Example JS for authoring

<!--/* Authoring JS */-->
<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}" data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='my.site.author'}"/>

 
If you need to inject custom classes to the component based on authoring mode then you can use below

<sly data-sly-test.isAuthorMode="${wcmmode.edit || wcmmode.design}"/>
<div class="container__myapp ${isAuthorMode ? '' : 'hidden'}" ....
<div class="mycomp ${isAuthorMode ? 'mycomp_author' : ''}" ...