The whiteboard Claude can collaborate
Run one command. Open a shared Excalidraw canvas.
You draw, Claude draws in real-time.
npx openboard-claude
Browser (Excalidraw) ← 1s poll → Server (:3333) ← file I/O → board.json ← Read/Write → Claude Code
openboard bridges visual communication between you and Claude Code. It spins up a local Excalidraw editor that shares a single board.json file with Claude. You sketch architecture diagrams, wireframes, or quick notes and Claude sees them instantly. Claude draws back and you see it in the browser.
No API keys. No signup. No config files. Just npx and go.
cd your-project
npx openboard-claudeThat's it. The CLI will:
- Create
.openboard/board.jsonin your project - Register Claude Code hooks in
.claude/settings.local.json - Start the whiteboard server at
http://localhost:3333
Open your browser and start drawing.
- Zero config · One command. No environment variables, no cloud accounts.
- Real-time sync · 1-second polling keeps the canvas in sync between you and Claude.
- Full Excalidraw editor · Shapes, arrows, text, freehand drawing, infinite canvas.
- Claude native · Works with Claude Code's Read and Write tools. Claude understands the Excalidraw JSON format natively via hooks.
your-project/
├── .openboard/
│ ├── board.json # Shared drawing data (Excalidraw format)
│ └── hooks/
│ ├── session-hint.mjs # SessionStart hook
│ └── pretool-guide.mjs # PreToolUse hook
└── .claude/
└── settings.local.json # Hook registrations (auto-configured)
Hooks are the key integration. When Claude accesses board.json, the PreToolUse hook injects a comprehensive Excalidraw JSON guide, teaching Claude how to draw shapes, use colors, create arrows, and maintain visual hierarchy. Claude doesn't need to be told how to use the whiteboard; it just knows.
| Variable | Default | Description |
|---|---|---|
PORT |
3333 |
Server port |
HOSTNAME |
localhost |
Server hostname |
git clone https://github.com/jayychoii/openboard-claude.git
cd openboard-claude
npm install
npm run dev # Start dev server on port 3000
npm run build # Build standalone server
npm run lint # Run ESLint- Next.js · Full-stack framework with standalone output
- Excalidraw · Open-source whiteboard engine
- React · UI library
- Tailwind CSS · Styling
- TypeScript · Type safety
MIT
Built for Claude Code. Open source with Excalidraw.