Transcription Wireframe Variables

Template variables exposed by the Transcription, Subtitles, and Subtitles Dialog wireframes — bind caption, speaker, and timestamp data for dynamic rendering.

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: 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 and the per-iteration segment / currentTime injected into content-item children.

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

React / Next.js

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

Other Frameworks

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

---

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 — 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.