A web-based Claude Code raw chat archive viewer built with Next.js and React.
ccraw (Claude Code Raw) is a specialized tool for viewing Claude Code raw chat archives stored in JSONL (JSON Lines) format. It provides a structured view of conversation messages with support for various content types including text, thinking blocks, tool usage, and tool results.
- JSONL File Upload: Drag and drop or select JSONL files containing Claude Code conversation data
- Structured Message Display: Renders conversation messages with proper formatting for different content types:
- Text content
- Thinking blocks
- Tool usage and results
- Message metadata (role, UUID, parent relationships)
- Toggle Views: Switch between structured view and raw JSON view
- Error Handling: Displays invalid lines with error messages
- File Statistics: Shows file size, total lines, valid/invalid line counts
- Navigation: Click on parent message links to navigate through conversation chains
- Responsive Design: Clean, modern interface that works across different screen sizes
- Clone the repository:
git clone https://github.com/hiragram/ccraw.git
cd ccraw- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Open the application in your browser
- Upload a JSONL file containing Claude Code chat archives by:
- Dragging and dropping the file onto the upload area
- Clicking the upload area to select a file
- View the structured chat data with:
- Message roles and content
- Tool usage and results
- Navigation between related messages
- Use the toggle controls to:
- Show/hide raw JSON view
- Show/hide invalid lines
- Click "New File" to upload a different file
The application expects JSONL files where each line contains a JSON object with the following structure:
{
"message": {
"role": "user|assistant",
"content": "string or array of content items"
},
"uuid": "message-uuid",
"parentUuid": "parent-message-uuid",
"isSidechain": false,
"isMeta": false,
"toolUseResult": {}
}- Next.js 15 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Shiki - Syntax highlighting for JSON
- CSS Modules - Styling
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
src/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── FileUpload.tsx
│ ├── JsonlViewer.tsx
│ ├── StructuredMessage.tsx
│ └── JsonHighlight.tsx
├── types/
│ └── jsonl.ts
└── utils/
├── extractMessage.ts
├── formatJson.tsx
└── jsonlParser.ts
MIT