Editor
Complete guide and API reference for the full-featured whiteboard editor component with drawing tools, stencils, and export engine.
<SketchEditor /> is the complete interactive canvas with creation tools, shape drawing, cloud tech stencils, history (undo/redo), presentation mode, and multi-format export dialogs.
1. Live Interactive Canvas Embed
Try interacting with the live whiteboard canvas below. Select elements to inspect resize handles, or drag an arrow endpoint to test magnetic anchor snapping:
2. Step-by-Step Next.js 16 Integration
<SketchEditor /> must be imported dynamically with ssr: false in Next.js:
"use client";
import React, { useRef } from "react";
import dynamic from "next/dynamic";
import type { SketchController, SketchDocument } from "@filekit-studio/sketch";
// 1. Dynamic import with SSR disabled
const SketchEditor = dynamic(
() => import("@filekit-studio/sketch").then((mod) => mod.SketchEditor),
{
ssr: false,
loading: () => (
<div className="w-full h-full flex items-center justify-center bg-gray-50 dark:bg-zinc-950 text-neutral-400 font-mono text-xs">
Loading whiteboard workspace...
</div>
),
},
);
export default function WhiteboardPage() {
const controllerRef = useRef<SketchController | null>(null);
const handleDocumentChange = (doc: SketchDocument) => {
console.log("Document updated:", doc.name, doc.elements.length);
};
const handleSave = (doc: SketchDocument) => {
// Persist to database or cloud storage
console.log("Saved document:", doc.id);
};
return (
// 2. Full-viewport or bounded-height workspace container
<div className="w-screen h-screen overflow-hidden">
<SketchEditor
controllerRef={controllerRef}
storageKey="my_app_whiteboard_v1" // Automatic localStorage sync
boardName="System Design" // Title displayed in top bar
theme="light" // "light" | "dark"
onChange={handleDocumentChange}
onSave={handleSave}
/>
</div>
);
}3. Navigation & Exit Handling (onExit vs exitHref)
<SketchEditor /> adapts seamlessly to both embedded split-screen layouts and fullscreen studio pages:
A. Embedded / Split-Screen View (No Back Button)
When embedding the whiteboard inside a dashboard, modal, or split-screen workspace (e.g. Code Editor on the left, Whiteboard on the right), omit both onExit and exitHref. The top-left back arrow button is automatically hidden:
// Embedded workspace: Back button is completely hidden
<SketchEditor storageKey="split_view_whiteboard" />B. Simple Route Navigation (exitHref)
For simple route navigation without boilerplate router code, provide exitHref:
// Navigates to target route when clicked
<SketchEditor exitHref="/dashboard" />C. Custom Router / Action Handling (onExit)
For frameworks with client-side SPA routers (Next.js router.push, React Router navigate), or for toggling component visibility, pass an onExit callback:
const router = useRouter();
// Triggers client-side routing
<SketchEditor onExit={() => router.push('/')} />[!TIP] Data Loss Protection: If the user has made unsaved changes to their board, clicking the exit button automatically triggers an Exit Confirmation Dialog (Save & Exit, Discard & Exit, or Cancel) to prevent accidental loss of work.
4. Imperative Controller API (controllerRef)
Pass a React ref to controllerRef to control the whiteboard programmatically:
const controllerRef = useRef<SketchController | null>(null);
// 1. Viewport & Camera Navigation
controllerRef.current?.zoomIn();
controllerRef.current?.zoomOut();
controllerRef.current?.zoomToFit();
controllerRef.current?.panTo(0, 0);
controllerRef.current?.setZoom(1.5);
// 2. Programmatic Element Insertion
controllerRef.current?.addElement({
type: "rectangle",
x: 200,
y: 300,
width: 180,
height: 90,
strokeColor: "#4f46e5",
text: "Dynamic Microservice",
color: "indigo",
});
// 3. Selection & History
controllerRef.current?.setSelection(["box1", "box2"]);
controllerRef.current?.clearSelection();
controllerRef.current?.undo();
controllerRef.current?.redo();
controllerRef.current?.clear();
// 4. Programmatic High-Resolution Export
const pngBlob = await controllerRef.current?.exportAsPng({
scale: 2,
padding: 40,
});
const svgString = await controllerRef.current?.exportAsSvg();
const pdfBlob = await controllerRef.current?.exportAsPdf();5. Props Reference Table
| Prop | Type | Default | Description |
|---|---|---|---|
controllerRef | RefObject<SketchController | null> | undefined | Imperative handle to zoom, reset, export, or insert elements. |
initialDocument | SketchDocument | undefined | Initial document loaded into state on mount. |
value | SketchDocument | undefined | Controlled document value (use alongside onChange). |
storageKey | string | undefined | Key used for automatic browser localStorage persistence. |
boardName | string | 'Untitled Board' | Title displayed in the top bar. |
uiConfig | Partial<SketchUIConfig> | DEFAULT_UI_CONFIG | Granular boolean flags to show/hide any toolbar button or menu. |
theme | 'light' | 'dark' | 'light' | Color theme for canvas and interface panels. |
guideHref | string | 'https://sketch.filekitstudio.com/docs' | Optional URL opened when clicking the bottom-left Guide pill. Pass custom URL or internal route path. |
onOpenGuide | () => void | undefined | Optional callback executed when clicking the Guide button. When provided, replaces link navigation with a custom handler (e.g. opens your app's own help modal). |
onChange | (doc: SketchDocument) => void | undefined | Fired whenever elements or canvas settings are mutated. |
onSave | (doc: SketchDocument) => void | undefined | Fired when the user presses Ctrl+S / Cmd+S or clicks Save. |
onExit | () => void | undefined | Fired when the user clicks the exit arrow button in the top bar. |
exitHref | string | undefined | Destination URL or route path for the exit button. If unsaved changes exist, an exit confirmation dialog is shown first. |