markdown-themes
Themed markdown viewer for AI-assisted writing. Watch Claude edit your files in real-time with 30+ visual themes, Git integration, and built-in terminals.
Project Overview
A full-stack themed markdown viewer designed for AI-assisted writing workflows. The Go backend watches your filesystem for changes and pushes updates to the browser in real-time via WebSocket, so you can see Claude Code editing files as it happens. Over 30 visual themes transform your markdown into everything from newspaper broadsheets to cyberpunk terminals.
Tech Stack
Go backend serving a React 19 frontend with Tailwind v4, connected through WebSocket for live file watching. Shiki provides syntax highlighting, Streamdown renders streaming markdown, and xterm.js powers the built-in terminals.
Architecture
A Go backend on port 8130 watches the filesystem with fsnotify, pushes changes over WebSocket, and serves a React SPA that renders themed markdown with Shiki syntax highlighting and Streamdown streaming.
Filesystem | fsnotify (file watcher) | Go Backend (Chi router, port 8130) |--- REST API --- File listing, Git operations, SQLite |--- WebSocket --- Live file change events |--- SSE -------- AI chat streaming | Browser (React 19 + Tailwind v4 + Vite) | +-- Markdown viewer (Streamdown + Shiki) +-- 30+ Theme engine (CSS variables) +-- Git panel (commit graph + diff) +-- Tabbed terminals (xterm.js) +-- Multi-format viewer (code, JSON, CSV, images, PDF, video, audio, SVG) +-- AI chat panel (SSE) +-- Prompty editor
Key Features
Keyboard Shortcuts
Stats
Lessons Learned
Go + React Full-Stack
Go's simplicity and speed as a backend paired with React's component model creates a powerful combination. Chi for routing, fsnotify for watching, SQLite for persistence -- no ORM overhead, just clean code.
File Watching Patterns
Real-time file watching requires debouncing, recursive directory monitoring, and graceful handling of rapid changes. fsnotify handles the OS layer, but the event architecture on top matters just as much.
Theme System Architecture
Building 30+ themes taught deep CSS variable composition. Each theme is a set of CSS custom properties that cascade through every component. The Shiki integration required careful handling of code block backgrounds across light and dark themes.
SSE Streaming
Server-Sent Events are the right choice for AI chat streaming -- simpler than WebSocket for one-way data flow, with automatic reconnection and native browser support. The AI chat panel proved that SSE is underrated.