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

> ## Agent Instructions
> Use the names from the glossary at https://docs.visualradioassist.live/glossary: Audio Manager (two words), command (never commando), on air and off air (never live) for programs and studios, and server apps for the VRA apps installed in the studio.
> Say which app an answer applies to, like VRA Cloud, the Core or the Output Player, and the version when the page names one.
> Only give settings, values and steps that are in these docs. Never invent one. If the docs don't cover it, say so.
> When the docs don't answer the question, send the user to Visual Radio Assist support at https://cloud.visualradioassist.live/support.

# Insert live data

> Show live station data in a visual, like the track or program on air, with Insert data on text layers and a data source on image layers.

Live data is station data that updates on air: the track that is playing, the program on air and its presenter, the time, your variables. Insert it in a layer once and the [Visual Designer](https://docs.visualradioassist.live/visual-designer.md) keeps it in sync with your station.

## Insert live data in a text layer

Select a text layer and click **Insert data** in the **Content** pane. On the canvas, type `/` while editing the text, or click the bolt button. Search the list, then click a field to insert it.

The field shows as a chip with its name, like **Title**. In preview, the chip shows the live value.

![](https://mintcdn.com/visualradioassist/cfPiQE-fjZkzRKZ8/images/visual-designer/insert-data/1.png?fit=max\&auto=format\&n=cfPiQE-fjZkzRKZ8\&q=85\&s=b78e3ddbcebfda763280755d5504aa40)

## Live data you can insert

The list shows sources on the left and their fields on the right, with the live value next to each field.

| Source | Fields |
| - | - |
| **Station variables** | Your station variables, see [Variables](https://docs.visualradioassist.live/variables.md) |
| **Visual variables** | The variables of this visual |
| **Time & date** | Time, Time (short), Date, Long date, Date and time, Long date and time |
| **On air item**, **Current music**, **Next item** | Title, Artist, Duration, Chart number, Album, Album cover, Artist image |
| **On-air program**, **Next program** | Title, Description, Start time, End time, Image, Host name, Host image, Guest name, Guest image |

Inside a playlist layer, **Playlist Item** lists the fields of the current item. Turn on **Show all fields** to browse every data field of your station.

Track data comes from your [radio automation](https://docs.visualradioassist.live/radio-automation-data.md), program and presenter data from [Scheduling](https://docs.visualradioassist.live/scheduling.md).

## Show text when live data is empty

Click **Fallback content** in the **Content** pane of a text layer and enter the text under **Fallback**. The layer shows it when its live data is empty, like when no track is playing.

## Show a live image in a visual

Use a **Dynamic media** layer for an image that follows live data. Set **Source** to **Expression** and click **Insert data** to pick an image field: Album cover, Artist image, Image, Host image or Guest image. The expression can also be any image URL.

For album and artist art, the **Album cover** and **Artist cover** layers do the same with less setup. Pick the track under **Music track selection**, like **Onair** or the next track. Add a fallback image for when no cover is available.

## Write live data by hand

A chip is a data path between double curly brackets. You can also type the path yourself, in text, HTML and dynamic media layers. Every path starts with `vra.`:

```yaml theme={null}
# Artist and title of the music on air
{{ vra.np.music.artist }}
{{ vra.np.music.title }}

# Title of the program on air
{{ vra.schedule.onair.title }}
```

For a list, put the position in square brackets:

```yaml theme={null}
{{ vra.variables.field.list.[2] }}
```

Put field names with special characters, other than `_`, in square brackets too:

```yaml theme={null}
{{ vra.variables.api_x.field.deep-123.1.content:encoded }} # does not work

{{ vra.variables.api_x.field.[deep-123].[1].[content:encoded] }} # works
```

To render HTML from a variable as HTML instead of text, use three curly brackets:

```yaml theme={null}
{{{ vra.variables.html_content }}}
```

The syntax is Handlebars, so conditions like `#if` work as well. See the [Handlebars guide](https://handlebarsjs.com/guide/expressions.html#literal-segments).

## Related

* [Variables](https://docs.visualradioassist.live/variables.md)
* [Layer types](https://docs.visualradioassist.live/visual-designer/layers.md)
* [API data sources](https://docs.visualradioassist.live/api-data-sources.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.