Skip to main content

Client Libraries

Client libraries (clientlibs) manage CSS and JS in AEM. They are grouped by categories and loaded in components or templates.

Basic clientlib​

ui.apps/.../clientlibs/clientlib-site/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:ClientLibraryFolder"
          allowProxy="{Boolean}true"
          categories="[myproject.site]"/>

Load in HTL​

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
  <sly data-sly-call="${clientlib.all @ categories='myproject.site'}"></sly>
</sly>

Best practices​

  • Keep categories small and purposeful.
  • Use allowProxy to serve from /etc.clientlibs.
  • Avoid overlays for clientlibs; extend via new categories instead.

See also​