lhumina_code/hero_whiteboard
24
0
Fork 0
Code Issues 56 Pull requests Projects Releases Packages Wiki Activity Actions
No description
202 commits 5 branches 0 tags 4.5 MiB
  • JavaScript 52%
  • Rust 25.1%
  • HTML 10.3%
  • Shell 7.2%
  • CSS 5%
  • Other 0.4%
Find a file
Exact
AhmedHanafy725 25f575b77a
All checks were successful
CI / build (push) Successful in 2m18s
Details
fix(present): mask outside-frame content and freeze canvas while presenting 
Edge-to-edge fit only fills one axis; the perpendicular axis still showed
adjacent canvas content (other frames, stickies, etc.). And the canvas
remained pannable / wheel-zoomable mid-presentation, so the slide could
slide out from under the user.

frames.js now computes the focused frame's screen-pixel rect after each
focusFrame and ships it through the setOnChange callback. board.html
positions a #pres-spotlight overlay over that rect; a 9999px box-shadow
fills the rest of the viewport with a dark backdrop, hiding any content
outside the slide. body.wb-presenting also locks pointer-events on
#whiteboard-container so wheel/drag pan are disabled for the duration.
The control bar lives in its own DOM and is unaffected.

#93
2026-04-28 16:29:52 +03:00
.claude Fix linting and formating 2026-04-20 13:25:47 +02:00
.forgejo/workflows Support eraser and fix the ci (#8) 2026-04-14 16:12:38 +00:00
crates fix(present): mask outside-frame content and freeze canvas while presenting 2026-04-28 16:29:52 +03:00
schemas Enhance whiteboard UI, dashboard, and service architecture 2026-03-17 21:09:25 +01:00
scripts validate: scripts cleanup and service registration pattern check 2026-04-05 05:47:43 +02:00
.gitignore Initial project setup with specifications and technical instructions 2026-03-17 11:00:29 +01:00
buildenv.sh Add VERSION and PATCHLEVEL to buildenv.sh 2026-04-05 06:51:33 +02:00
Cargo.lock fix: remove standalone body class restriction and clean up unused patch entries 2026-04-12 18:25:28 +02:00
Cargo.toml feat: sessions 17-18 — native dioxus islands, new URL routing, OSIS auth fix, build safety 2026-04-12 09:58:06 -04:00
INSTRUCTIONS_TECH.md Rename project from hero_miro to hero_whiteboard 2026-03-17 21:27:19 +01:00
Makefile fix: migrate sockets to hero_sockets per-service directory layout 2026-04-06 09:34:12 +02:00
README.md Add button for open the url on a new tab for web frame 2026-04-20 09:37:28 +02:00
SPECIFICATIONS.md Rename project from hero_miro to hero_whiteboard 2026-03-17 21:27:19 +01:00

README.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 three-crate 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_ui End-user whiteboard UI + admin dashboard (Axum + Konva.js)
hero_whiteboard_examples SDK usage examples and integration tests
hero_whiteboard CLI for registering and managing services via hero_proc

Sockets

Service Path
Server ~/hero/var/sockets/hero_whiteboard_server.sock
UI ~/hero/var/sockets/hero_whiteboard_ui.sock

Quick Start

make build          # Build all crates
make install        # Install binaries to ~/hero/bin/
make run            # Start server + UI
make status         # Check service status
make logs           # View server logs
make logs-ui        # View UI logs
make stop           # Stop all services
make restart        # Restart all services

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 management
  • board.* — board CRUD
  • object.* — whiteboard objects (sticky notes, shapes, text, etc.)
  • connector.* — arrows and connectors between objects
  • comment.* — threaded comments
  • share.* — share links and tokens
  • group.* — groups and permissions
  • user.* — user management
  • rpc.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:

  1. Open brave://settings/shields
  2. Scroll to Fingerprinting and set it to "Allow all fingerprinting", or
  3. 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://flags and 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.com
  • https://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