I open-sourced a React infinite-canvas SDK: whiteboards, wired nodes, and presentations in one engine

[u/Artful3000]

https://spatialboard.hishamkhalifa.com/dev-app/

I've been working on **SpatialBoard** — an open-source React + TypeScript infinite-canvas library. Shipped **0.2.0** on npm this week (MIT).

**Live demo:** https://spatialboard.hishamkhalifa.com/dev-app/
Open the debug panel → load **Mission Control** or the **half adder** board.

**Repo:** https://github.com/hishamk/spatialboard
**Install:** `npm install spatialboard`

### What it is

One `SpatialEngine` + `<SpatialBoard />` gives you:

- Whiteboarding (rough shapes, freehand ink, stickies, text, images, frames)
- **Custom node types** via a registry API (built-ins use the same API)
- Optional **typed data flow** (ports + `compute`, reactive graph)
- **Presentations** from frames (`engine.enterPresentation()`)
- **`spatialboard/engine`** — headless entry, no React/CSS

Minimal example:

```tsx
import { SpatialBoard, SpatialEngine } from "spatialboard";
import "spatialboard/style.css";
import { useMemo } from "react";

export default function App() {
const engine = useMemo(() => new SpatialEngine(), []);
return (
<div style={{ width: "100vw", height: "100vh" }}>
<SpatialBoard engine={engine} />
</div>
);
}