> ## 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](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) overview.

## 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).

## 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`](https://velt.dev/docs/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`](https://velt.dev/docs/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`](https://velt.dev/docs/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>`).

> [tab] 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] 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>
> ```

***

### `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](https://velt.dev/docs/ui-customization/features/async/recorder/transcription.md) — wireframe overview for the transcript panel primitive.
* [Subtitles](https://velt.dev/docs/ui-customization/features/async/recorder/subtitles.md) — wireframe overview for the subtitles primitive.
* [Recorder Player Expanded](https://velt.dev/docs/ui-customization/features/async/recorder/recorder-player-expanded.md) — where the transcription panel is hosted during full-screen playback.
* [Recorder Wireframe Variables](https://velt.dev/docs/ui-customization/features/async/recorder/wireframe-variables.md) — the parent recorder feature.
* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — overview of the `velt-data` / `velt-if` / `velt-class` system.


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