Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (obc-cli2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Excalidraw Claude

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

openboard shared Excalidraw whiteboard for Claude Code

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:

Create .openboard/board.json in 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.

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.