Anchor Port
Port marker for object inputs, outputs, and bidirectional links on the canvas. Install Anchor Port from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
1 storyView componentCanvas View
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support. Install Canvas View from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Canvas View is an interactive viewport for spatial surfaces — infinite boards, diagrams, mind maps, and node editors. It manages pan and zoom state so your content moves as a single transformed layer. Users pan by holding space and dragging or using the middle mouse button, and zoom with the plus and minus keys or a modifier-held wheel. It exposes viewport callbacks, an imperative reset handle, min and max zoom bounds, and an overlay slot. Reach for it whenever content outgrows its container.
UtilityPreview
Switch between light and dark to inspect the embedded Storybook preview.
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support. Part of the utility family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add Canvas View to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/canvas-view.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Canvas View?
- Canvas View is a React component that provides an interactive pan-and-zoom viewport for spatial surfaces like diagrams, boards, and node editors. Content moves as one transformed layer, and it supports pointer, wheel, and keyboard navigation plus an optional overlay slot.
- How do I add Canvas View?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/canvas-view.json` to install it into your React project via the shadcn CLI, then import and render CanvasView around your content.
- How do users pan and zoom Canvas View?
- Users pan by holding the space bar and dragging, by using the middle mouse button, or by scrolling the wheel. They zoom with the plus and minus keys or a control/command-held wheel, and press 0 to reset the viewport. The interaction region is labeled for screen readers.