Transcription Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables 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"`

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`	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`	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`	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: <velt-transcription-wireframe>

Property	Value
Extra variables	See Component Config — Transcription and the per-iteration `segment` / `currentTime` injected into content-item children.

React / Next.js
Other Frameworks

<VeltTranscriptionWireframe
  velt-class="'visible': {componentConfig.transcriptionVisible}, 'mode-{componentConfig.mode}': true">
  <header className="my-transcript__summary">
    <p><velt-data field="componentConfig.transcription.summary" /></p>
  </header>
  <ul className="my-transcript__segments">
    <li velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'">
      <velt-data field="segment.text" />
    </li>
  </ul>
</VeltTranscriptionWireframe>

<velt-transcription-wireframe
  velt-class="'visible': {componentConfig.transcriptionVisible}, 'mode-{componentConfig.mode}': true">
  <header class="my-transcript__summary">
    <p><velt-data field="componentConfig.transcription.summary"></velt-data></p>
  </header>
  <ul class="my-transcript__segments">
    <li velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'">
      <velt-data field="segment.text"></velt-data>
    </li>
  </ul>
</velt-transcription-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.

`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)

Putting it together

A typical transcript panel that swaps between summary collapsed / expanded states, renders each segment as an active-state-styled row, and exposes a copy-summary action:

React / Next.js
Other Frameworks

<VeltTranscriptionPanelWireframe
  velt-class="'visible': {componentConfig.transcriptionVisible}">
  <VeltTranscriptionSummaryWireframe>
    <p velt-if="{componentConfig.showMoreSummary}">
      <velt-data field="componentConfig.transcription.summary" />
    </p>
    <VeltTranscriptionSummaryExpandToggleWireframe>
      <span velt-if="{componentConfig.showMoreSummary}">Show less</span>
      <span velt-if="!{componentConfig.showMoreSummary}">Show more</span>
    </VeltTranscriptionSummaryExpandToggleWireframe>
    <VeltTranscriptionCopyLinkWireframe>
      Copy summary
    </VeltTranscriptionCopyLinkWireframe>
  </VeltTranscriptionSummaryWireframe>

  <VeltTranscriptionContentItemWireframe
    velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'">
    <time><velt-data field="segment.startTime" /></time>
    <p><velt-data field="segment.text" /></p>
  </VeltTranscriptionContentItemWireframe>
</VeltTranscriptionPanelWireframe>

<velt-transcription-panel-wireframe
  velt-class="'visible': {componentConfig.transcriptionVisible}">
  <velt-transcription-summary-wireframe>
    <p velt-if="{componentConfig.showMoreSummary}">
      <velt-data field="componentConfig.transcription.summary"></velt-data>
    </p>
    <velt-transcription-summary-expand-toggle-wireframe>
      <span velt-if="{componentConfig.showMoreSummary}">Show less</span>
      <span velt-if="!{componentConfig.showMoreSummary}">Show more</span>
    </velt-transcription-summary-expand-toggle-wireframe>
    <velt-transcription-copy-link-wireframe>
      Copy summary
    </velt-transcription-copy-link-wireframe>
  </velt-transcription-summary-wireframe>

  <velt-transcription-content-item-wireframe
    velt-class="'is-active': '{segment.startTimeInSeconds} <= {currentTime} && {segment.endTimeInSeconds} > {currentTime}'">
    <time><velt-data field="segment.startTime"></velt-data></time>
    <p><velt-data field="segment.text"></velt-data></p>
  </velt-transcription-content-item-wireframe>
</velt-transcription-panel-wireframe>

Transcription — wireframe overview for the transcript panel primitive.
Subtitles — wireframe overview for the subtitles primitive.
Recorder Player Expanded — where the transcription panel is hosted during full-screen playback.
Recorder Wireframe Variables — the parent recorder feature.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Transcription Wireframe Variables

Overview

Component Config — Transcription

Helper functions

Component Config — Subtitles / Subtitles Dialog

Context-Specific Variables

Type Reference

Subcomponents

`transcription`

`subtitles`

`subtitles-dialog`

Deeply-Nested Wireframe Tags

Transcription tags

Subtitles tags

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Component Config — Transcription

​Helper functions

​Component Config — Subtitles / Subtitles Dialog

​Context-Specific Variables

​Type Reference

​Subcomponents

​transcription

​subtitles

​subtitles-dialog

​Deeply-Nested Wireframe Tags

​Transcription tags

​Subtitles tags

​Putting it together

​Related

Overview

Component Config — Transcription

Helper functions

Component Config — Subtitles / Subtitles Dialog

Context-Specific Variables

Type Reference

Subcomponents

`transcription`

`subtitles`

`subtitles-dialog`

Deeply-Nested Wireframe Tags

Transcription tags

Subtitles tags

Putting it together

Related