- JavaScript 66%
- Rust 22.2%
- HTML 8.3%
- CSS 3.5%
ahmedhanafy725
671b0dafaf
All checks were successful
lab release / release (push) Successful in 21m56s
Export and import were done entirely client-side: export serialized the
board from the canvas in JS, and import orchestrated board.create +
per-object object.create + reparent + connector.create from the browser.
Move both to the server as single RPCs.
Backend (hero_whiteboard_server):
- oschema: add BoardImport input and board_export(id) -> str /
board_import(input) -> Board on BoardService.
- board_export builds the version-1 JSON document from the DB; board_import
parses it and recreates objects + connectors with server-side id remapping
(parent_id/parent_frame_id reparent pass, connector endpoint remap),
tolerating per-row failures so one bad row can't yield an empty board.
created_by is dropped on import (rows are authored fresh; a stale id would
trip the objects.created_by -> users(id) FK).
Frontend (hero_whiteboard_web):
- export.js: JSON export flushes pending edits then calls board.export and
downloads the bytes (client-side fallback only for unsaved local boards).
- home.html: import collapsed to a single board.import call.
- rpc_translate.rs: board.export takes a scalar id, so mark it raw-param
(was wrapped in {input} -> 'missing field id').
Compatibility:
- Keep the version-1 file format so previously exported files still import.
- MindmapNode.description/note are now optional: legacy mindmap nodes carry
only 'comment', and the required fields made object.list fail to
deserialize the whole board (board opened empty).
Adds board export/import round-trip tests.
|
||
|---|---|---|
| .claude | ||
| .forgejo/workflows | ||
| crates | ||
| .gitignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| PURPOSE.md | ||
| README.md | ||
| SPECIFICATIONS.md | ||
Hero Whiteboard
A collaborative visual whiteboard — brainstorm, diagram, plan, present, and document decisions on an infinite canvas with real-time and async collaboration.
Architecture
Hero Whiteboard follows the Hero service model:
| Crate | Purpose |
|---|---|
hero_whiteboard_server |
Business logic, SQLite storage, OpenRPC API (Unix socket) |
hero_whiteboard_sdk |
JSON-RPC client for the server over Unix socket |
hero_whiteboard_web |
End-user whiteboard SPA (Konva.js) + WebSocket realtime |
hero_whiteboard_examples |
SDK usage examples and integration tests |
The admin dashboard is no longer part of this repo — it has moved to the
shared Dioxus admin in hero_components, served by hero_router at
/hero_components/admin/?service=hero_whiteboard.
Sockets
| Service | Path |
|---|---|
| Server | $PATH_SOCKET/hero_whiteboard/rpc.sock |
| UI | $PATH_SOCKET/hero_whiteboard/web.sock |
Quick Start
lab service whiteboard --install # Build and install all binaries
lab service whiteboard --start # Register with hero_proc and start
lab service whiteboard --stop # Stop all components
lab service whiteboard --status # Check service status
API
The server exposes a full JSON-RPC 2.0 API over the Unix socket. See the OpenRPC spec for all 45+ methods across these domains:
workspace.*— multi-tenant workspace managementboard.*— board CRUDobject.*— whiteboard objects (sticky notes, shapes, text, etc.)connector.*— arrows and connectors between objectscomment.*— threaded commentsshare.*— share links and tokensgroup.*— groups and permissionsuser.*— user managementrpc.health,rpc.discover— health and OpenRPC discovery
Browser Compatibility
Hero Whiteboard is tested on modern Chromium-based browsers (Chrome, Edge, Brave) and Firefox.
Brave Browser
Brave's fingerprint protection adds noise to the HTML Canvas API (getImageData), which can interfere with Konva.js hit detection used by the whiteboard. Symptoms include:
- Objects can't be moved (dragging does nothing)
- Right-clicking an object shows the browser's default menu (with "Paste") instead of the whiteboard's copy/cut/delete menu
- Behavior is random: some objects work, others don't; refreshing may change which ones
How to fix:
- Open
brave://settings/shields - Scroll to Fingerprinting and set it to "Allow all fingerprinting", or
- Click the Shields icon (lion) in the address bar on the whiteboard page and turn Shields OFF for the site
If the issue persists:
- Disable Hardware acceleration:
brave://settings/system→ toggle off "Use graphics acceleration when available" - Check
brave://flagsand disable any fingerprinting-related experimental features - Avoid using Private Windows (especially "Private Window with Tor"), which enforce protections that can't be fully disabled
This is a general limitation that affects canvas-based apps (Figma, Miro, etc.) on Brave, not specific to Hero Whiteboard.
Web Frame (Iframe) Limitations
The Web Frame tool embeds external websites using an HTML <iframe>. Many websites block iframe embedding via HTTP headers (X-Frame-Options: DENY/SAMEORIGIN or Content-Security-Policy: frame-ancestors). This is a security feature enforced by the browser and cannot be bypassed by any client-side code.
Sites that typically work
https://example.comhttps://en.wikipedia.org- YouTube embeds (
https://www.youtube.com/embed/<VIDEO_ID>) - CodePen/JSFiddle embeds
- Most documentation sites (MDN, etc.)
- Internal/intranet tools (unless they explicitly set blocking headers)
Sites that will NOT work
- Google, Gmail, Google Docs, Google Maps (standard URLs)
- Facebook, Twitter/X, Instagram, LinkedIn
- Most major news sites (NYT, BBC, CNN)
- Banks and financial services
- Most GitHub pages
When a site blocks embedding, the web frame shows an "Open in new tab" button as a fallback so you can still access the content.
Tips
- For YouTube, use the embed URL format:
https://www.youtube.com/embed/VIDEO_ID - For Google Maps, use the embed URL from "Share → Embed a map"
- Double-click a web frame to change its URL
Documentation
- SPECIFICATIONS.md — Full functional specification