The designer ships with a DesignerCanvas component that is zoomable and panable. It has support for keyboard shortcuts and touch gestures.
Wrap your DesignerFrame component with the DesignerCanvas component to enable zooming and panning.
<DesignerCanvas>
<DesignerFrame />
</DesignerCanvas>ActionToolbarZoom
Use the ActionToolbarZoom component to add zoom in and out controls to your designer.
import {
ActionToolbarZoom,
DesignerToolbar,
DesignerToolbarGroup,
} from "@shadcn/designer"
function CustomToolbar() {
return (
<DesignerToolbar>
<DesignerToolbarGroup>
<ActionToolbarZoom />
</DesignerToolbarGroup>
</DesignerToolbar>
)
}Keyboard Shortcuts
You can also use the keyboard shortcuts to zoom in and out.
- CMD or Ctrl + + to zoom in
- CMD or Ctrl + - to zoom out
- CMD or Ctrl + 0 to reset zoom
- CMD or Ctrl + 1 to zoom to fit
- CMD or Ctrl + 2 to zoom to 100%
Custom Zoom Controls
You can bring your own zoom controls using the useZoom and useSetZoom hooks.
function CustomZoomControls() {
const zoom = useZoom()
const setZoom = useSetZoom()
return (
<div className="flex gap-2">
<Button onClick={() => setZoom(zoom + 0.1)}>Zoom In</Button>
<Button onClick={() => setZoom(zoom - 0.1)}>Zoom Out</Button>
<Button onClick={() => setZoom(1)}>Reset</Button>
</div>
)
}designerAction
You can also use the designerAction hook to set more controlled zoom levels.
This will handle maximum and minimum zoom levels.
function CustomZoomControls() {
const designerAction = useDesignerAction()
return (
<div className="flex gap-2">
<Button onClick={() => designerAction("ZOOM_IN")}>Zoom In</Button>
<Button onClick={() => designerAction("ZOOM_OUT")}>Zoom Out</Button>
<Button onClick={() => designerAction("ZOOM_RESET")}>Reset</Button>
</div>
)
}