AEM Sightly Attributes

sightly-attribute.txt

These are HTL (Sightly) block statements used in AEM templates to control rendering logic.

1. data-sly-include:- To include static or dynamic HTML/HTL snippet into your template.
   <sly data-sly-include="footer.html"></sly>
   Useful when reusing a template fragment.

2. data-sly-use: To import/use a Java class, Sling Model, JS or JavaScript object in your HTL file.
   <sly data-sly-use.model="com.example.core.models.HelloWorldModel"/>
   <p>${model.message}</p>
   Useful for binding backend logic (Sling Models/Use API) to the UI.

3. data-sly-test: For conditional rendering.
   <p data-sly-test="${user.isAdmin}">Welcome, Admin!</p>
   Useful to show/hide elements.

4. data-sly-text: To output escaped text safely into HTML.
   <p data-sly-text="${user.name}"></p>
   Always use instead of plain ${} when rendering text.

5. data-sly-repeat: To repeat a block of markup multiple times based on a collection.
   <ul>
  	<li data-sly-repeat.item="${items}">${item}</li>
   </ul>
   Useful for lists/arrays.

6. data-sly-resource: To render a child resource/component dynamically.
   <sly data-sly-resource="${'childComponent' @ resourceType='myproject/components/card'}"/>
   Useful for embedding components inside another.

7. data-sly-list: Another way to iterate over a list or array (like repeat).
   <ul data-sly-list.user="${users}">
  	<li>${user.name} (Index: ${userList.index})</li>
   </ul>
   Useful when you need index info while looping.

8. data-sly-call: To call a template defined in HTL.
   <template data-sly-template.greet="${@ name}">
  	<p>Hello, ${name}!</p>
   </template>
   <sly data-sly-call="${greet @ name='Vivek'}"/>
   Useful for reusable rendering logic inside HTL.