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

# Transcription Wireframe Variables

> Template variables exposed by the Transcription, Subtitles, and Subtitles Dialog wireframes — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## Overview

The **Transcription / Subtitles** feature renders the voice-to-text transcript panel, the live subtitles overlay during playback, and a popover-variant subtitles dialog. Variables below are available inside any `<velt-transcription-...-wireframe>` or `<velt-subtitles-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                            |
| ------------------------- | --------------------------- | -------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="segment.text" />`               |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfig.transcriptionVisible}"` |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'mode-{componentConfig.mode}': true"` |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form. The page covers three related primitives — transcription, subtitles, and subtitles-dialog — which expose distinct variable sets (documented separately below).
</Note>

## Component Config — Transcription

State on `<velt-transcription>` and its child tags.

| Variable                                   | Type                                                                                                           | Description                                                | Example                                                                      |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `componentConfig.mode`                     | `'floating'` \| `'sidebar'` \| ...                                                                             | Layout mode.                                               | `velt-class="'mode-{componentConfig.mode}': true"`                           |
| `componentConfig.transcription`            | [`Transcription`](/api-reference/sdk/models/data-models#transcription)                                         | The transcript object — includes summary, timestamps, etc. | `<velt-data field="componentConfig.transcription.summary" />`                |
| `componentConfig.transcriptionVisible`     | `boolean`                                                                                                      | Transcript panel is open.                                  | `velt-class="'visible': {componentConfig.transcriptionVisible}"`             |
| `componentConfig.vttFileTextArray`         | `{ startTime: string; endTime: string; startTimeInSeconds: number; endTimeInSeconds: number; text: string }[]` | Parsed VTT segments for display.                           | `<velt-data field="componentConfig.vttFileTextArray.length" />`              |
| `componentConfig.highlightedTextIndex`     | `number`                                                                                                       | Currently-playing segment index.                           | `velt-class="'segment-{componentConfig.highlightedTextIndex}-active': true"` |
| `componentConfig.showMoreSummary`          | `boolean`                                                                                                      | Summary is in expanded state.                              | `velt-class="'summary-open': {componentConfig.showMoreSummary}"`             |
| `componentConfig.copySummaryButtonTooltip` | `string`                                                                                                       | Tooltip text for the copy button.                          | `<velt-data field="componentConfig.copySummaryButtonTooltip" />`             |
| `componentConfig.sidebarVisible`           | `boolean`                                                                                                      | Sidebar-mode panel is visible.                             | `velt-if="{componentConfig.sidebarVisible}"`                                 |
| `componentConfig.darkMode`                 | `boolean`                                                                                                      | Dark mode is active.                                       | `velt-class="'dark': {componentConfig.darkMode}"`                            |
| `componentConfig.showDefaultBtn`           | `boolean`                                                                                                      | Default trigger button should render.                      | `velt-if="{componentConfig.showDefaultBtn}"`                                 |

### Helper functions

The transcription config also exposes callbacks you can attach to your own buttons:

| Function                                          | Description                           |
| ------------------------------------------------- | ------------------------------------- |
| `componentConfig.onDragRelease(...)`              | Drag-to-position release handler.     |
| `componentConfig.copyToClipboard(...)`            | Copy-summary handler.                 |
| `componentConfig.toggleSidebar(...)`              | Toggle the sidebar variant.           |
| `componentConfig.onClose(...)`                    | Close handler.                        |
| `componentConfig.onSeekTo(seconds)`               | Seek the player to a given timestamp. |
| `componentConfig.onTranscriptionButtonClick(...)` | Trigger-button click handler.         |
| `componentConfig.toggleShowMoreSummary(...)`      | Expand / collapse summary handler.    |

## Component Config — Subtitles / Subtitles Dialog

State on `<velt-subtitles>` and `<velt-subtitles-dialog>`. Both primitives share the same config shape — the dialog adds a few CDK-overlay positioning fields.

| Variable                                     | Type                                                                   | Description                                             | Example                                                                      |
| -------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `componentConfig.subtitlesVisible`           | `boolean`                                                              | Subtitles panel is visible.                             | `velt-class="'visible': {componentConfig.subtitlesVisible}"`                 |
| `componentConfig.dialogVisible`              | `boolean`                                                              | Dialog variant is visible.                              | `velt-if="{componentConfig.dialogVisible}"`                                  |
| `componentConfig.highlightedTextIndex`       | `number`                                                               | Active segment index (`-1` when no segment is playing). | `velt-class="'segment-{componentConfig.highlightedTextIndex}-active': true"` |
| `componentConfig.vttFileTextArray`           | `{ startTime, endTime, startTimeInSeconds, endTimeInSeconds, text }[]` | Parsed VTT segments. Same shape as Transcription.       | `<velt-data field="componentConfig.vttFileTextArray.length" />`              |
| `componentConfig.transcription`              | [`Transcription`](/api-reference/sdk/models/data-models#transcription) | The transcript object. Same as Transcription.           | `<velt-data field="componentConfig.transcription.summary" />`                |
| `componentConfig.overlayTrigger`             | `CdkOverlayOrigin`                                                     | CDK overlay anchor.                                     | *Internal — CDK overlay config.*                                             |
| `componentConfig.positions`                  | `ConnectedPosition[]`                                                  | CDK overlay position pairs.                             | *Internal — CDK overlay config.*                                             |
| `componentConfig.cdkConnectedOverlayOffsetX` | `number`                                                               | Overlay horizontal nudge offset.                        | *Internal — used to compute inline style.*                                   |
| `componentConfig.cdkConnectedOverlayOffsetY` | `number`                                                               | Overlay vertical nudge offset.                          | *Internal — used to compute inline style.*                                   |
| `componentConfig.overlayOriginX`             | `OverlayOriginX`                                                       | Anchor origin X axis.                                   | *Internal — CDK overlay config.*                                             |
| `componentConfig.overlayOriginY`             | `OverlayOriginY`                                                       | Anchor origin Y axis.                                   | *Internal — CDK overlay config.*                                             |
| `componentConfig.showDefaultBtn`             | `boolean`                                                              | Default toggle button should render.                    | `velt-if="{componentConfig.showDefaultBtn}"`                                 |
| `componentConfig.onSubtitlesButtonClick`     | `Function`                                                             | Subtitle-button click handler.                          | *Call this from your custom button click.*                                   |

## Context-Specific Variables

These are only resolvable inside the iteration primitive that owns the tag.

| Variable      | Type                                                                                                         | Available in                                                                                 | Example                                                                                                                   |
| ------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `segment`     | `{ startTime: string; endTime: string; startTimeInSeconds: number; endTimeInSeconds: number; text: string }` | `<velt-transcription-content-item-wireframe>` — per-iteration row from `vttFileTextArray`.   | `<velt-data field="segment.text" />`                                                                                      |
| `currentTime` | `number`                                                                                                     | Same content-item iteration. Current playback time (used to compute active-segment styling). | `velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'"` |

## Type Reference

Types referenced by the variables above:

| Type                                                                   | Description                                                       |
| ---------------------------------------------------------------------- | ----------------------------------------------------------------- |
| [`Transcription`](/api-reference/sdk/models/data-models#transcription) | Transcript object — includes `summary`, segments, language, etc.  |
| `CdkOverlayOrigin`                                                     | Overlay anchor reference used by the dialog's positioning engine. |
| `ConnectedPosition`                                                    | Position-pair config used by the dialog's positioning engine.     |
| `OverlayOriginX`                                                       | CDK overlay origin X-axis discriminator.                          |
| `OverlayOriginY`                                                       | CDK overlay origin Y-axis discriminator.                          |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `transcription`

The transcript panel — full transcript with speaker labels and clickable segments.

* **Public element:** `<velt-transcription>`
* **Wireframe tag:** No root wireframe slot — register a wireframe directly on one of the mode-specific tags: `<velt-transcription-floating-mode-wireframe>` or `<velt-transcription-embed-mode-wireframe>`.

| Property        | Value                                                                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Extra variables | See [Component Config — Transcription](#component-config-transcription) and the per-iteration `segment` / `currentTime` injected into content-item children. |

<Note>
  The transcription feature has no root wireframe slot — register a wireframe directly on one of the mode-specific tags (`<velt-transcription-floating-mode-wireframe>` or `<velt-transcription-embed-mode-wireframe>`).
</Note>

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
      <VeltTranscriptionWireframe.FloatingMode veltClass="'visible': {componentConfig.transcriptionVisible}">
        <VeltTranscriptionWireframe.FloatingMode.Panel>
          <div className="my-panel-header">
            <strong>Transcript</strong>
            <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
          </div>
          <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
          <velt-transcription-panel-container-wireframe></velt-transcription-panel-container-wireframe>
        </VeltTranscriptionWireframe.FloatingMode.Panel>
      </VeltTranscriptionWireframe.FloatingMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe>
      <velt-transcription-floating-mode-wireframe velt-class="'visible': {componentConfig.transcriptionVisible}">
        <velt-transcription-panel-wireframe>
          <div class="my-panel-header">
            <strong>Transcript</strong>
            <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
          </div>
          <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
          <velt-transcription-panel-container-wireframe></velt-transcription-panel-container-wireframe>
        </velt-transcription-panel-wireframe>
      </velt-transcription-floating-mode-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

***

### `subtitles`

The live subtitle overlay shown during playback.

* **Public element:** `<velt-subtitles>`
* **Wireframe tag:** `<velt-subtitles-wireframe>`

| Property        | Value                                                                                                 |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Subtitles / Subtitles Dialog](#component-config-subtitles--subtitles-dialog). |

***

### `subtitles-dialog`

The popover variant of subtitles.

* **Public element:** `<velt-subtitles-dialog>`
* **Wireframe tag:** `<velt-subtitles-dialog-wireframe>`

| Property        | Value                                                                       |
| --------------- | --------------------------------------------------------------------------- |
| Extra variables | Same data as `subtitles` — adds CDK overlay positioning fields (see above). |
| `shouldShow`    | `componentConfig.dialogVisible === true`                                    |

## Deeply-Nested Wireframe Tags

The transcription and subtitles primitives decompose further. Each tag below has its own `<velt-transcription-...-wireframe>` or `<velt-subtitles-...-wireframe>` registration.

### Transcription tags

| Tag                                                        | Notes                                                                                              | Example                                                                                                                   |
| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `<velt-transcription-button-wireframe>`                    | The button that opens the transcript panel.                                                        | `velt-if="{componentConfig.showDefaultBtn}"`                                                                              |
| `<velt-transcription-tooltip-wireframe>`                   | Tooltip on the button.                                                                             | *Visual only.*                                                                                                            |
| `<velt-transcription-panel-wireframe>`                     | The transcript panel root.                                                                         | `velt-class="'visible': {componentConfig.transcriptionVisible}"`                                                          |
| `<velt-transcription-panel-container-wireframe>`           | Inner scroll container.                                                                            | (composes the segment list)                                                                                               |
| `<velt-transcription-content-item-wireframe>`              | A single transcript-segment row. Iterates `vttFileTextArray`; injects `segment` and `currentTime`. | `velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'"` |
| `<velt-transcription-summary-wireframe>`                   | Summary section at the top of the panel.                                                           | (composes the summary copy + toggle)                                                                                      |
| `<velt-transcription-summary-expand-toggle-wireframe>`     | Show-more / show-less toggle for the summary.                                                      | (click handler)                                                                                                           |
| `<velt-transcription-summary-expand-toggle-on-wireframe>`  | Variant shown when the summary is expanded.                                                        | `velt-if="{componentConfig.showMoreSummary}"`                                                                             |
| `<velt-transcription-summary-expand-toggle-off-wireframe>` | Variant shown when collapsed.                                                                      | `velt-if="!{componentConfig.showMoreSummary}"`                                                                            |
| `<velt-transcription-copy-link-wireframe>`                 | Copy-summary button.                                                                               | (click handler)                                                                                                           |
| `<velt-transcription-copy-link-button-wireframe>`          | Inner button element.                                                                              | (click handler)                                                                                                           |
| `<velt-transcription-copy-link-tooltip-wireframe>`         | "Copied!" tooltip.                                                                                 | `<velt-data field="componentConfig.copySummaryButtonTooltip" />`                                                          |
| `<velt-transcription-close-button-wireframe>`              | Close button.                                                                                      | (click handler)                                                                                                           |
| `<velt-transcription-floating-mode-wireframe>`             | Variant rendered in floating mode.                                                                 | `velt-if="{componentConfig.mode} === 'floating'"`                                                                         |
| `<velt-transcription-embed-mode-wireframe>`                | Variant rendered in embed mode.                                                                    | `velt-if="{componentConfig.mode} === 'embed'"`                                                                            |

### Subtitles tags

| Tag                                        | Notes                              | Example                                                      |
| ------------------------------------------ | ---------------------------------- | ------------------------------------------------------------ |
| `<velt-subtitles-button-wireframe>`        | The button that toggles subtitles. | `velt-if="{componentConfig.showDefaultBtn}"`                 |
| `<velt-subtitles-tooltip-wireframe>`       | Tooltip on the button.             | *Visual only.*                                               |
| `<velt-subtitles-panel-wireframe>`         | The subtitle text panel.           | `velt-class="'visible': {componentConfig.subtitlesVisible}"` |
| `<velt-subtitles-close-button-wireframe>`  | Close button.                      | (click handler)                                              |
| `<velt-subtitles-floating-mode-wireframe>` | Variant in floating mode.          | (mode-specific layout)                                       |
| `<velt-subtitles-embed-mode-wireframe>`    | Variant in embed mode.             | (mode-specific layout)                                       |

## Related

* [Transcription](./transcription) — wireframe overview for the transcript panel primitive.
* [Subtitles](./subtitles) — wireframe overview for the subtitles primitive.
* [Recorder Player Expanded](./recorder-player-expanded) — where the transcription panel is hosted during full-screen playback.
* [Recorder Wireframe Variables](./wireframe-variables) — the parent recorder feature.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.