Whiteboard SDK
Viewer
Embedded read-only documentation canvas with autoFit and pan/zoom navigation.
<SketchViewer />
<SketchViewer /> is the read-only version of the whiteboard engine. It allows users to pan, zoom, and inspect elements without displaying creation toolbars or properties panels.
It is designed for embedding architecture boards into documentation sites, blogs, dashboards, and modal popups.
Live Interactive Example
Loading whiteboard canvas...
Code Example
"use client";
import React from "react";
import { SketchViewer, type SketchDocument } from "@filekit-studio/sketch";
export function DocsArchitectureEmbed({ doc }: { doc: SketchDocument }) {
return (
<div className="w-full h-[400px] rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-800">
<SketchViewer
value={doc}
autoFit={true}
interactive={true}
showZoomControls={true}
showCopyButton={true}
/>
</div>
);
}Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | SketchDocument | SketchBoardElement[] | required | The document or elements array containing shapes and connectors to render. |
autoFit | boolean | true | Automatically zooms and centers the canvas to fit the bounding box of elements. |
interactive | boolean | true | Allows user panning and wheel zooming. If false, canvas is completely static. |
showCopyButton | boolean | true | Displays a copy JSON button in the top-right corner. |
showZoomControls | boolean | true | Displays a floating zoom in/out/fit pill in the bottom-left corner. |
theme | 'light' | 'dark' | 'light' | Theme resolution for strokes and fills. |
canvasBackground | string | '#f0f4f8' | Custom canvas background color hex. |
gridStyle | 'dots' | 'grid' | 'cross' | 'none' | 'dots' | Background grid pattern. |