> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.omni.co/feedback

```json
{
  "path": "/visualize-present/dynamic-content",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Creating dynamic dashboard content with Mustache

> Omni supports Mustache syntax in Markdown visualizations and dashboard Markdown tiles, making it easy to add dynamic content to your dashboards.

Mustache enables you to craft tailored dashboards by:

* Personalizing content for viewers by using their name, role, or other details
* Dynamically styling Markdown visualizations [with CSS rules](https://community.omni.co/t/tips-for-dynamic-styling-in-markdown-visualizations/170)

## Supported content

Mustache can be used in the following places:

<AccordionGroup>
  <Accordion title="Markdown visualizations" icon="chart-pie">
    In this example, Mustache tags are used to reference specific values in the query's result set. **Note**: Line breaks have been added for readability:

    ```handlebars wrap theme={null}
    There have been **{{result._totals._first.order_items.order_count.value}}**
    orders placed for **{{result._first.products.brand.value}}** in 
    **{{result._first.users.state.value}}**, and the average selling price is
    **{{result._first.order_items.sale_price_average.value}}**.

    See the 🗺📍 below for **{{result._first.products.brand.value}}** stores
    in the top selling city - **{{result._first.users.city.value}}, 
    {{result._first.users.state.value}}**. 
    ```

    <img src="https://mintcdn.com/omni-e7402367/Qca1lcotWTZT4GON/images/docs/visualization-and-dashboards/markdown.png?fit=max&auto=format&n=Qca1lcotWTZT4GON&q=85&s=c88250cd0fb5f3c8fb9d628110b3772d" alt="" width="1200" height="792" data-path="images/docs/visualization-and-dashboards/markdown.png" />
  </Accordion>

  <Accordion title="Dashboard text / Markdown tiles" icon="font">
    This example demonstrates how to create a dynamic Iframe with Mustache.

    Mustache tags are used to create a Google Maps search with a dynamic URL:

    ```handlebars wrap theme={null}
    <iframe src="https://www.google.com/maps/embed/v1/search?q={{result.0.products.brand.value_static}}+in+{{result._first.users.city.value_static}},{{result._first.users.state.value_static}}&key=AIzaSyCXfF4zpXaYkgVaBzj3oZUtmcDAxpdoOGk&" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    ```

    <img src="https://mintcdn.com/omni-e7402367/Qca1lcotWTZT4GON/images/docs/visualization-and-dashboards/iframe_mustache.png?fit=max&auto=format&n=Qca1lcotWTZT4GON&q=85&s=b944d338f7336f5ed4e70fab71e093ce" alt="" width="1230" height="808" data-path="images/docs/visualization-and-dashboards/iframe_mustache.png" />
  </Accordion>

  <Accordion title="Visualization axis labels" icon="chart-bar">
    In this example, Mustache tags create a dynamic y-axis label that displays summary values and filter details.

    ```handlebars wrap theme={null}
    Order Count ({{result._totals.0.order_items.order_count.value}} Total Orders in {{result.0.users.state.value}})
    ```

    <img src="https://mintcdn.com/omni-e7402367/Qca1lcotWTZT4GON/images/docs/visualization-and-dashboards/vis_mustache_workbook.png?fit=max&auto=format&n=Qca1lcotWTZT4GON&q=85&s=2855858a5e2390f2dd1dd9df41fad816" alt="" width="1868" height="1232" data-path="images/docs/visualization-and-dashboards/vis_mustache_workbook.png" />
  </Accordion>
</AccordionGroup>

## Available tags

Refer to the [Mustache reference](/visualize-present/mustache-reference) for a complete list of the tags Omni currently supports.

## Escaping

All tags are escaped by default. This means that text enclosed in `{{}}` will always render, even if you intend to just display the curly braces themselves.

To return raw contents without escaping, add an extra curly brace:

```handlebars theme={null}
{{{ variable }}}
```

To escape the curly braces and have them render, use backslashes:

```handlebars theme={null}
\{\{variable\}\}
```

For more specifics on syntax and gotchas, refer to the [Mustache docs](https://mustache.github.io/mustache.5.html).
