Minot

A React component library for building whiteboard-style work surfaces, similar to Miro or FigJam.

Installation

npm install minot
# or
pnpm add minot
# or
yarn add minot

Quick Start

import{CanvasProvider,Whiteboard,Toolbar,PropertyPanel,typeComponentCatalog,}from'minot';// Define available shapesconstcatalog: ComponentCatalog={shapes: [{type: 'rectangle',label: 'Rectangle'},{type: 'circle',label: 'Circle'},{type: 'triangle',label: 'Triangle'},{type: 'line',label: 'Line'},{type: 'arrow',label: 'Arrow'},{type: 'text',label: 'Text'},],};functionApp(){return(<CanvasProvidercatalog={catalog}><divstyle={{display: 'flex'}}><Toolbarorientation="vertical"/><Whiteboard/><PropertyPanel/></div></CanvasProvider>);}

Architecture

Minot uses a context-driven architecture where all canvas interactions flow through CanvasProvider:

• CanvasProvider: Wraps your app, accepts a component catalog, manages Fabric.js canvas
• Whiteboard: Main canvas component
• Toolbar: Shape/tool picker (reads from catalog)
• PropertyPanel: Edit selected shape properties
• ViewportControls: Zoom/pan controls

Hooks

import{useCanvas,useInteractionStore}from'minot';// Access canvas operationsconst{ getData, loadData, clearCanvas, gridConfig, setGridConfig }=useCanvas();// Access interaction stateconst{ activeTool, selectedIds, placementShape }=useInteractionStore();

Features

• Built-in shapes: rectangle, circle, triangle, line, arrow, text, image
• JSON serialization/deserialization for save/load
• Grid with snap-to-grid support
• Zoom and pan controls
• Keyboard shortcuts (delete, duplicate, nudge, undo/redo)
• CSS custom properties for theming

Tech Stack

• React + TypeScript
• Fabric.js for canvas rendering
• Zustand for interaction state
• React Context for data flow

License

MIT