Amber is a small static web page that opens the data export Claude.ai sends you (Settings → Privacy → Export Data) and lets you read every conversation, project, memory, artifact, and visualization the way they looked in Claude — fully offline, in your own browser, never uploading anything.
It's built for the day your Claude account is suspended, banned, or deleted: drop the .zip in, and your archive is right there.
No export yet? Open amber-claude.pages.dev and drag the
amber-demo.zipcard onto the dropzone — Amber loads a hand-crafted demo instantly, no sign-in required.
- 🟠 100% local. The zip is parsed in your browser. No server, no upload, no telemetry. Even the developer can't see your data.
- 📜 Reads everything Claude exports, the way it looked in Claude:
- Conversations — markdown, code with syntax highlighting, LaTeX math, Claude's reasoning ("thinking"), artifacts, tool calls, attachments, file references, summaries.
- Visualize widgets — live re-rendered in a sandboxed iframe (Chart.js, D3, custom SVG diagrams, interactive prototypes).
- Projects — name, description, system prompt, attached docs, project memory.
- Memories — global "conversations memory" and per-project memories.
- Design chats — separate Claude design-canvas threads with their tool calls.
- Account & stats — user profile, conversation timeline histogram, top conversations by message count.
- 🌗 Light + dark mode, with proper code highlighting in both.
- 🌐 Bilingual UI — English + 简体中文, switchable from the top-right.
- 🔍 Full-text search across conversation titles and messages (
/to focus). - 💾 IndexedDB cache so the page survives a reload — clear it any time from the start screen.
- 🛡️ Auditable. One HTML, one CSS, one JavaScript file plus vendored dependencies. Total source ≈ 5,000 lines. Zero build step.
→ Open amber-claude.pages.dev — no install, no sign-in.
The welcome screen shows a small tilted amber-demo.zip card next to the dropzone. Drag it onto the dropzone (or tap on mobile) to load a hand-crafted demo — markdown, math, code, thinking blocks, artifacts, a sandboxed visualization, a chart, file-edit history, and project + memory examples. The demo tracks the page language: switch to 中文 first and the same drag loads the Chinese demo.
- Get your export from Claude: Settings → Privacy → Export Data. Claude emails a download link within a few hours.
- Open Amber, drag
data-…batch-0000.ziponto the dropzone (or click to browse). - Use the sidebar tabs:
- Chats — every conversation, sorted by recency
- Projects — system prompts and uploaded documents
- Design — full-bleed design canvas chats
- Memory — Claude's long-term notes about you
- Account — counts, timeline, source-file metadata
Press / to search, ? for keyboard shortcuts, Esc to clear.
There is no npm install, no build step, no toolchain. The repo is plain HTML/CSS/ES2020 JavaScript plus vendored dependencies.
git clone https://github.com/zhangyuting/Amber.git
cd amber
python3 -m http.server 8765
# Open http://localhost:8765That's it.
1. Open index.html directly. Double-click on macOS, or open index.html.
Note: Chrome blocks IndexedDB on
file://, so the "remember my data" cache won't work — you'll re-drop the zip each visit. Safari and Firefox handlefile://fine. Use option 2 or 3 for caching in Chrome.
2. Any static server. python3 -m http.server 8765, npx serve, caddy file-server, php -S localhost:8000 — anything that serves static files.
3. Cloudflare Pages / GitHub Pages / Netlify. Push to GitHub, point the host at the repo root.
- Build command: leave empty
- Output directory:
/(the repo root is the site root) _headersis preconfigured for Cloudflare Pages with a strict CSP and long-cache for vendored libraries.- A
.nojekyllfile is included so GitHub Pages doesn't transform anything.
The export still parses entirely client-side wherever you host it — your data never reaches the host's servers either.
This is the central promise. The whole project is small enough you can verify it yourself in an evening.
- Strict CSP in
index.htmland_headers:default-src 'self',connect-src 'self',frame-ancestors 'none'. No remote scripts, no analytics, no third-party iframes. - Sanitization. All user-supplied content (zip contents, message text, file_text) flows through DOMPurify before it can reach the DOM.
- Sandboxed widgets. Visualize widgets render in
<iframe sandbox="allow-scripts">— noallow-same-origin, so a malicious widget can't read the parent page. - Same-origin only. After the page loads, the only network call the viewer can make is to its own origin (and only to fetch the bundled
amber-demo-*.zipif you opt into the demo). - Local cache. Parsed JSON sits in your origin's IndexedDB. Clear from the help dialog any time.
┌─────────┐ drag-drop ┌──────────┐ parse ┌──────────────┐
│ .zip │──────────────▶│ JSZip │──────────▶│ JSON in mem │
│ (in │ │ (browser)│ │ (state.{...})│
│ browser)│ └──────────┘ └──────┬───────┘
└─────────┘ │
│ render
▼
┌────────────────────┐
│ marked → DOMPurify│
│ → KaTeX (math) │
│ → highlight.js │
│ → sandboxed iframe│
│ (visualize) │
└─────────┬──────────┘
│
▼
IndexedDB cache
(parsed JSON only)
Vendored dependencies, all loaded from the same origin:
- JSZip — read the zip
- marked — render Markdown
- DOMPurify — sanitize HTML
- KaTeX — render LaTeX math
- highlight.js — syntax-highlight code
amber/
├── index.html # The whole app shell
├── app.js # All logic
├── styles.css # All styles
├── vendor/ # Vendored dependencies
├── amber-demo-en.zip # Demo data — English content
├── amber-demo-zh.zip # Demo data — Chinese content
├── scripts/
│ └── build_demo_zip.py # Regenerate the demo zips
├── docs/
│ └── screenshots/ # Captures referenced from this README
├── _headers # Cloudflare Pages headers (CSP, cache)
├── .nojekyll # GitHub Pages: don't transform anything
├── README.md # English (this file)
├── README.zh-CN.md # 简体中文
├── CONTRIBUTING.md
└── LICENSE
| In the export | In Amber |
|---|---|
| Every message — text, markdown, code, math, tables | ✅ Rendered |
| Claude's reasoning (the "Thinking" blocks) | ✅ Collapsed by default; toggle to expand |
| Tool calls (Web Fetch, MCP servers, etc.) | ✅ Shown |
| Artifacts (code/markdown panels) | ✅ Rendered with syntax highlighting |
visualize:show_widget (Chart.js, D3, SVG, etc.) |
✅ Live in a sandboxed iframe |
Files Claude wrote (create_file / str_replace) |
✅ With download buttons + edit history |
| Projects (system prompt, attached docs, memory) | ✅ Full project view |
| Global memory + per-project memories | ✅ Markdown rendered |
| Design canvas chats | ✅ Separate tab |
| Account info (name, email, UUID) | ✅ Account tab |
| Not in the export | Why |
|---|---|
| Binary outputs Claude generated (xlsx, pdf, png, docx, pptx, zip) | Only the script that produced them is exported — re-run to reproduce |
| Files you uploaded to Claude (the original bytes) | Only the extracted text content is exported |
Claude.ai's web UI shows everything together in an "Artifacts" panel, which can mislead. Rule of thumb: if it shows as text/code/markdown in Claude.ai, it's in the export. If it downloads as Office/PDF/image, only the recipe is.
Issues and PRs welcome. Please read CONTRIBUTING.md first — Amber is intentionally small and dependency-light, and the deploy story (one HTML, one CSS, one JS, no build) is a load-bearing constraint.
Translations of UI strings (beyond EN/中文), bug fixes with a clear repro, accessibility improvements, and renderers for tool-call types we don't handle yet are especially welcome.
MIT — do whatever you want, no warranty.
- Anthropic for Claude and for shipping a clean data-export.
- The maintainers of JSZip, marked, DOMPurify, KaTeX, and highlight.js.
- Everyone whose
data-…batch-0000.zipAmber gets to read.
Why "Amber"? Amber preserves living things exactly as they were — readable forever, even if the original is gone. That's the goal here.