Transcript Viewer

Component

About

A scrollable, clickable transcript list for audio/video recordings where each line jumps playback to the moment it was spoken.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Transcript Viewer to your project and fits it to your theme.

Code

How Transcript Viewer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import {
  TranscriptViewer,
  type TranscriptCue,
} from "@/components/ui/transcript-viewer";

const cues: TranscriptCue[] = [
  {
    id: "1",
    start: 0,
    end: 4,
    speaker: "Alex",
    text: "So the plan is to ship the new onboarding flow this week.",
  },
  {
    id: "2",
    start: 4,
    end: 9,
    speaker: "Jordan",
    text: "Sounds good, but we still need to test the edge cases.",
  },
  {
    id: "3",
    start: 9,
    end: 14,
    speaker: "Alex",
    text: "Agreed. I'll put together a checklist today.",
  },
  {
    id: "4",
    start: 14,
    end: 19,
    speaker: "Sam",
    text: "I can help review it once it's ready.",
  },
  {
    id: "5",
    start: 19,
    end: 25,
    speaker: "Jordan",
    text: "Great, let's sync again tomorrow morning.",
  },
  {
    id: "6",
    start: 25,
    end: 30,
    speaker: "Alex",
    text: "Works for me. I'll send the invite.",
  },
];

const settings = {
  time: 10,
  follow: true,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="w-full max-w-md">
      <TranscriptViewer cues={cues} time={s.time} follow={s.follow} />
    </div>
  );
}