Infinite Showcase
Draggable infinite canvas with momentum scrolling, scroll-wheel zoom, and built-in zoom controls. Scatter preview nodes at x/y coordinates; use data-canvas-no-pan on interactive regions inside nodes.
Default
Pan and fling across scattered UI primitives; interactive controls use data-canvas-no-pan.
Workflow Canvas
Confetti
Confetti
Multi-step Form
Profile
Tell us how to contact you.
1
Profile2
Plan3
NotesConfirm Button
Items remaining: 3
Smart Form Input
Compare
Drag the slider to compare
50% / 50%
Smart Grid Layout
Dense 3-column grid - use Edit, then drop the large tile onto row 1 to see displacement.
A
A
B
B
C
C
Large widget (2×2)
Drag this over smaller widgets - layout auto-compacts around it.
D
D
E
E
100%
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| items | CanvasItem[] | required | Nodes to render; each has id, x, y, and a React node for the preview card |
| scale | number | 1 | Base scale multiplier combined with interactive zoom |
| minZoom / maxZoom | number | 0.25 / 2 | Interactive zoom limits |
| zoomOnScroll | boolean | true | Zoom toward the cursor with the scroll wheel |
| wheelZoomSensitivity | number | 0.0005 | Scroll zoom speed (lower = slower); scales smoothly with wheel delta |
| zoomStep | number | 1.12 | Zoom factor per click on the in/out buttons |
| controls | boolean | true | Built-in zoom in, zoom out, and fit view controls |
| controlsPosition | "bottom-left" | "bottom-right" | "bottom-left" | Placement of the control cluster |
| className | string | undefined | Classes for the pan/zoom container |