# Understanding Handlebars

{% hint style="warning" %}
You are reading the **NextGen Documentation**

**NextGen widgets** are a new and improved way to display UGC content onsite. 

From September 23rd 2025, all new widgets created will be NextGen.

Please check your widget version on the **Widget List page** to see if it is a **Classic** or **NextGen** widget.

You can read the [Classic Widget Documentation](/ugc/guides/onsite-widgets.md) here.

**Note: This feature is unique to NextGen widgets**
{% endhint %}

Handlebars is utilised as our server side rendering engine to ensure that HTML is rendered before it reaches the user's screen.

You will notice two core files in your stackla-widget-templates repository

**1) widgets/{widget-name}/layout.hbs**

**2) widgets/{widget-name}/tile.hbs**

The `tile.hbs` file serves as a Handlebars template for rendering individual tiles. It allows you to modify how **one** tile looks in the layout

```handlebars
{{#tile class="grid-item"}}
<div class="tile" data-background-image="{{image_thumbnail_url}}">
  <div class="icon-section">
    <div class="top-section">
      {{#each attrs}}
      {{#ifequals this "instagram.reel"}}
      <div class="content-icon icon-reel"></div>
      {{/ifequals}}
      {{/each}}
      {{#if tags_extended.length}}
      <div class="shopping-icon icon-products"></div>
      {{/if}}
    </div>
    <div class="center-section">
      {{#ifequals media "video"}}
      <div class="icon-play"></div>
      {{/ifequals}}
    </div>
    <div class="bottom-section">
      <tile-tags tile-id="{{id}}" variant="dark" mode="swiper" context="grid-inline"></tile-tags>
      <div class="network-icon icon-{{source}}"></div>
    </div>

    <shopspot-icon tile-id={{id}} />
  </div>
</div>
{{/tile}}
```

The `layout.hbs` file serves as the main template for rendering the overall layout of your widget. It extends from a parent template and provides additional functionality to customize the layout.

Here's an excerpt from the `layout.hbs` file:

```handlebars
<div class="ugc-tiles">
    {{#each tiles}}
    <div class="tile" data-id="{{id}}">
      {{parent}}
    </div>
    {{/each}}
  </div>
```

There are a few helpers you can utilise in your templating, they are the following:

* {{#Ifequals}} - Checks if two values are equal to one another
* {{#tile}} - Creates a tile with the recommended classes to operate with a widget&#x20;
* {{#if}} - Check if a value is true.
* {{#tiles}} - Loop through each tile

To understand how to best utilise the attributes available to you, please have a look at the [Composition of tiles](/ugc/guides/widgets-nextgen/widget-creation-guides/creating-your-first-widget/creating-a-widget-from-blank-canvas-developer-guide/creating-a-new-widget/architecture-of-widgets/composition-of-tiles.md) information sheet.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/ugc/guides/widgets-nextgen/widget-creation-guides/creating-your-first-widget/creating-a-widget-from-blank-canvas-developer-guide/understanding-handlebars.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.