cc-transcript-react

React component library for displaying Claude Code transcripts.

Live Demo (Storybook)

See how it renders your own sessions — no setup needed:

npx cc-transcript-react

Opens http://localhost:3333 with all your Claude Code sessions. Click one to view its full transcript.

# View a specific session
npx cc-transcript-react <session-id>

# Custom port / dark theme
npx cc-transcript-react -p 8080 --dark

Installation

npm install cc-transcript-react

Usage

import { ClaudeCodeTranscript } from 'cc-transcript-react'
import 'cc-transcript-react/styles.css'

function App({ events }) {
  return (
    <ClaudeCodeTranscript
      events={events}
      colorScheme="light"
      projectPath="/path/to/project"
    />
  )
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | events | TranscriptEvent[] | (required) | Array of raw transcript events | | projectPath | string | — | Project path for relative file path display | | colorScheme | 'light' \| 'dark' | 'light' | Color scheme | | className | string | — | CSS class for the root container | | classNames | TranscriptClassNames | — | Slot-based class name overrides | | theme | TranscriptTheme | — | Code highlight theme overrides | | customBlockRenderers | Record<string, (block: DisplayBlock) => ReactNode \| null> | — | Custom renderers by block type or tool name | | generatePermalink | (blockId: string) => string | — | Custom permalink generator | | copyToClipboard | (text: string) => Promise<void> | — | Custom clipboard handler |

Custom Block Renderers

Override rendering for specific tools:

<ClaudeCodeTranscript
  events={events}
  customBlockRenderers={{
    'mcp__myserver__my_tool': (block) => <MyToolCard block={block} />,
  }}
/>

Parsing Session Logs

Convert Claude Code's JSONL session files to TranscriptEvent[]:

import { parseSessionLog } from 'cc-transcript-react/headless'
import fs from 'fs'

const jsonl = fs.readFileSync('~/.claude/projects/.../session.jsonl', 'utf-8')
const events = parseSessionLog(jsonl)

Headless API

For non-React environments (Node.js scripts, React Native, custom renderers):

import {
  parseSessionLog,
  filterHiddenEvents,
  expandEvents,
  extractMessageBlocks,
} from 'cc-transcript-react/headless'

No React or DOM dependency.

License

MIT

If you find this useful, consider buying me a coffee.