Infinite canvas
Pannable, zoomable board: drag or Space+drag to pan, wheel or pinch to zoom around the pointer, zoom keys, reset and Fit, a scaling dot grid and a minimap; keyboard pan/zoom/fit.
Preview
Ideas
This week
Signals
Pop-up stall at the night market?
Bundle mugs with the new glaze
Ask regulars what to restock
Workshop: throw your own bowl
Spring restock
- Order kraft mailers
- Photograph new mugs
- Update shop listings
- Email the regulars
Market day
- Book the van
- Print price cards
- Pack the float
Orders per week
Last 7 weeks · +22
Workshop sign-ups
Last 7 weeks · +9
Drag the background or hold Space and drag to pan; scroll or pinch to zoom. Click the canvas for arrow keys, + / − and 0 to fit.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items / renderItem | { id; x; y; width; height }[] / (item) => ReactNode | — | World-space rects and their content (sized to the rect). |
| background | ReactNode | — | World-space layer under the items, e.g. connectors or zones. |
| defaultView | { x; y; zoom } | { x: 0, y: 0, zoom: 1 } | Starting pan and zoom. |
| fitOnMount | boolean | false | Fit every item into view after measuring. |
| minZoom / maxZoom | number | 0.25 / 3 | Zoom limits for wheel, pinch, keys and buttons. |
| minimap | boolean | true | Show the minimap (click or drag to move the view). |
| label | string | "Canvas" | Accessible name of the canvas. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.