CanvasX

CanvasX is the core component of BoardX, an open source digital whiteboard. It builds on top of Fabric.js and provides a set of widgets and utilities for creating interactive canvas‑based applications.

Features

• XCanvas – an extended Fabric.js canvas with built‑in connector and port management
• A rich collection of widgets including text boxes, sticky notes, shapes, connectors, frames, images, files, charts, and markdown
• Helper utilities for alignment guidelines, cropping and drawing
• A Next.js based demo showcasing how the widgets work together

Installation

npm install @boardxus/canvasx-core

Basic Usage

import { XCanvas } from '@boardxus/canvasx-core';

const el = document.getElementById('canvas');
const canvas = new XCanvas(el);
canvas.setDimensions({ width: 500, height: 500 });

After creating an XCanvas instance you can add any of the provided widgets to build interactive experiences.

Running the Demo

This repository includes a full demo under .codesandbox/templates/next. Run the helper script to build the library and start the demo locally:

chmod +x demo.sh
./demo.sh

The script installs dependencies, builds the package and launches the demo on http://localhost:4000.

Development

• npm run build – bundle the library using Rollup
• npm test – run Jest tests
• npm run type-check – run TypeScript type checking

Contributing

Contributions and issues are welcome! Feel free to open pull requests or report problems in the issue tracker.

License

CanvasX is released under the MIT license as specified in package.json.

👁️ Why Canvas X?

Humans—and increasingly human × AI teams—solve complex problems by seeing ideas together.
CanvasX lets you think with your eyes, turning abstract thoughts into shared visual objects that boost communication bandwidth.

• Made for makers – Built on the robust Fabric.js engine you already trust.
• AI‑ready hooks – Drop in your favourite GenAI model to auto‑generate shapes, sticky notes, or layouts.
• Open‑source freedom – MIT‑licensed and part of the wider BoardX ecosystem.
• Solo‑focus – Keep it lightweight: CanvasX ships only the canvas layer—no networking or persistence baked in.
  Bring your own sync/back‑end when you need it.

“Visual collaboration is not decoration—it’s cognition.”

✨ Core Capabilities

| Capability | Description | |------------|-------------| | Fabric.js Wrapper | Simple React component that exposes the full Fabric API plus sensible defaults. | | Extensible Widgets | Sticky notes, connectors, images, free‑draw, and plug‑in zones for your own React widgets. | | Viewport Mini‑Map | Navigate large canvases with a zoomable overview. |

Looking for multi‑user sync? That’s on our roadmap (see below) and intentionally decoupled so you can integrate your preferred real‑time framework (WebRTC, WebSockets, server‑side OT, etc.).

🚀 Quick Start

1. Install

npm install @boardx/canvasx-core fabric

2. Import & render

import { CanvasX } from '@boardx/canvasx-core';

⸻

📝 License

MIT © BoardX, Inc. We believe in open collaboration—use CanvasX freely and help us make visual teamwork ubiquitous.

Paste this into your README.md to give CanvasX a lean, accurate landing page that focuses solely on the whiteboard canvas while leaving sync and persistence for future or user‑chosen solutions.