> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/widgets/customisations/template.md).

# Template

LiSA Library comes with a very basic yet flexible and customizable template, to render the library.

### Look mum, no hands!

LiSA Library uses Handlebars.js for client-side rending. When providing your own template, please refer to the Handlebars Language Guide for information on the Handlebars expression syntax.

### Library template

The following code block shows the default library template. Feel free to customize it to your individual needs or even Bring your own template .

```
{{#each sections}}
  <div class="lisa__section{{#with variations}}{{#each .}} lisa__section--{{.}}{{/each}}{{/with}}">
    {{#title}}
      <div class="lisa__section-title">{{.}}</div>
    {{/title}}
    {{#with items}}
      <ul class="lisa__section-listing">
        {{#each .}}
          <li class="lisa__show{{#with variations}}{{#each .}} lisa__show--{{.}}{{/each}}{{/with}}" data-lisa-show-id="{{id}}">
            {{#asset}}
              <div class="lisa__show-assets">
                <div class="lisa__show-asset {{#orientation}}lisa__show-asset--{{.}}{{/orientation}}">
                  <img class="lisa__show-asset--lazy" data-src="{{url}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="{{../../title}}" />
                  <noscript>
                    <img src="{{url}}" alt="{{../../title}}" />
                  </noscript>
                </div>
              </div>
            {{/asset}}
            <div class="lisa__show-data">
              {{#tag}}
                <span class="lisa__show-tag">
                  <span>{{.}}</span>
                </span>
              {{/tag}}
              {{#with hosts}}
                <div class="lisa__show-avatars">
                  {{#each .}}
                    <div class="lisa__show-avatar">
                      <img src="{{avatar}}" alt="{{displayName}}" />
                    </div>
                  {{/each}}
                </div>
              {{/with}}
              {{#title}}
                <strong class="lisa__show-title">{{.}}</strong>
              {{/title}}
              {{#description}}
                <div class="lisa__show-description">{{{.}}}</div>
              {{/description}}
              {{#date}}
                <span class="lisa__show-date">{{.}}</span>
              {{/date}}
            </div>
            <a class="lisa__show-cta-play">
              <svg>
                <circle cx="41" cy="41" r="40"></circle>
                <polygon points="32,25 32,58 60,42"></polygon>
              </svg>
            </a>
          </li>
        {{/each}}
      </ul>
    {{/with}}
  </div>
{{/each}}

```