openboard

The whiteboard Claude can collaborate

Run one command. Open a shared Excalidraw canvas. You draw, Claude draws in real-time.

English · 한국어

npx obc

If you are running from this repository source, use the local script instead: node ./bin/openboard.js or npx --no-install ./bin/openboard.js

How it works

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.

Quick Start

cd your-project
npx obc-cli2

That's it. The CLI will:

1. Create .openboard/board.json in your project
2. Register Claude Code hooks in .claude/settings.local.json
3. Start the whiteboard server at http://localhost:3333

Open your browser and start drawing.

Features

• 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.

Architecture

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.

Environment Variables

| Variable | Default | Description | |---|---|---| | PORT | 3333 | Server port | | OPENBOARD_HOSTNAME | localhost | Server hostname | | OPENBOARD_HOST | localhost | Server hostname alias |

Note: On Windows, the system HOSTNAME environment variable is often set automatically, so openboard uses OPENBOARD_HOSTNAME / OPENBOARD_HOST instead.

Development

git clone https://github.com/dogebi/obc.git
cd obc
npm install
npm run dev       # Start dev server on port 3000
npm run build     # Build standalone server
npm run lint      # Run ESLint

Tech Stack

• Next.js · Full-stack framework with standalone output
• Excalidraw · Open-source whiteboard engine
• React · UI library
• Tailwind CSS · Styling
• TypeScript · Type safety

License

MIT

Built for Claude Code. Open source with Excalidraw.