Transcript viewer

A React component in Beamline's Voice & audio category.

A recording and its words together: the spoken word lights up as it plays and the transcript follows it, any word or paragraph time plays from there, speakers become paragraphs with marks on the scrub bar. Takes word timings from speech-to-text or character alignment from text-to-speech.

Use it for

Call reviews, meeting recordings and voice notes with timed words.
Playing generated speech with its text in step.

Not for

A transcript without audio (a plain text block).
Live captions of a call in progress (the voice-agent block shows those).
Audio without words (audio-player).

Anatomy

player row (play, title, speed)
transcript (paragraphs: speaker, time button, words)
active word
scrub bar with a mark per paragraph

Variants

input: words (speech-to-text: text, start, end, speaker), alignment (text-to-speech: per-character times)

States

paused
playing (active word lit, transcript follows)
following paused while you scroll (resumes after a few seconds)
audio tags shown as cues or hidden
no words (empty state)
audio failed (the player's error and retry)

Keyboard

Tab: play, speed, each paragraph's time button, the transcript (scrolls with arrows), the scrub bar
A paragraph's time button plays from its start (Enter / Space)
Scrub bar: ← → seek 5 s, Home / End, Space plays and pauses

Motion

The spoken word's tint and underline is one plate that travels word to word as the audio plays (--pui-duration-fast); the transcript scrolls to keep it in view (smoothly, or at once under reduced motion).

Props

Prop	Type	Default	Description
`src` (required)	`string`	—	The audio.
`words`	`TranscriptWord[]`	—	{ text, start, end, speaker? } from speech-to-text.
`alignment`	`CharacterAlignment`	—	Per-character timing from text-to-speech; turned into words.
`title / subtitle`	`string`	—
`hideAudioTags`	`boolean`	—	Hide bracketed delivery cues like [laughs] (shown as quiet cues by default).
`follow`	`boolean`	`true`	Keep the spoken word in view.
`height`	`number`	`240`	Transcript height in px; it scrolls inside.
`onWordClick`	`(word: TranscriptWord) => void`	—	Default: play from the word.
`classNames`	`TranscriptViewerClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—
`playerClassNames`	`AudioPlayerClassNames`	—

Built from

Dependencies

lucide-react

Import

import { TranscriptViewer } from "@/components/transcript-viewer/transcript-viewer";

Get it

Transcript viewer is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent