Headless Composition & Custom UI
Build bespoke canvas applications and embeddable toolbars using modular subcomponents.
Headless Canvas Composition
While <SketchEditor /> provides a turnkey, full-featured whiteboard suite out of the box, @filekit-studio/sketch also exports modular subcomponents for developers who need to build custom canvas interfaces, floating docks, or tailored dashboard tools.
1. Exported Modular Subcomponents
All individual UI layers are exported directly from the primary package:
import {
SketchBoardCanvas,
SketchBoardToolBar,
SketchBoardPropertiesPanel,
SketchBoardTopBar,
SketchBoardMinimap,
SketchBoardFloatingDock,
SketchBoardContextMenu,
SketchBoardExportModal,
SketchBoardPresentationMode,
SketchBoardTechStencilsModal,
SketchBoardTemplatesFlyout,
SketchBoardLaserDock,
SketchBoardSpotlightOverlay,
} from "@filekit-studio/sketch";| Component | Role |
|---|---|
<SketchBoardCanvas /> | Pure HTML5 2D canvas stage handling drawing, pointer events, and pan/zoom transforms. |
<SketchBoardToolBar /> | The left vertical tool palette (select, pencil, rectangle, arrow, text, eraser). |
<SketchBoardPropertiesPanel /> | Floating right-side inspector for stroke color, fill style, font, and opacity. |
<SketchBoardTopBar /> | Top navigation bar with brand pill, document title, undo/redo, and export trigger. |
<SketchBoardMinimap /> | Interactive radar overview in the bottom-right corner. |
<SketchBoardFloatingDock /> | Bottom quick-action bar for zoom controls and canvas centering. |
2. Minimal Custom Layout Example
Here is how you can embed the raw <SketchBoardCanvas /> with a custom floating toolbar in a tailored layout:
"use client";
import React, { useRef, useState } from "react";
import {
SketchBoardCanvas,
SketchBoardToolBar,
useSketchTheme,
type SketchBoardElement,
} from "@filekit-studio/sketch";
import "@filekit-studio/sketch/styles.css";
export function CustomStudio() {
const [elements, setElements] = useState<SketchBoardElement[]>([]);
const [activeTool, setActiveTool] = useState<string>("select");
return (
<div className="relative w-screen h-screen overflow-hidden bg-neutral-900 text-white">
{/* 1. Custom Floating Header */}
<header className="absolute top-4 left-6 z-20 flex items-center gap-3 bg-neutral-800/80 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10 shadow-lg">
<h1 className="text-sm font-semibold tracking-wide">My Design Studio</h1>
<span className="text-xs text-neutral-400">({elements.length} elements)</span>
</header>
{/* 2. Interactive Canvas Stage */}
<div className="w-full h-full">
<SketchBoardCanvas
elements={elements}
onElementsChange={setElements}
activeTool={activeTool}
/>
</div>
{/* 3. Floating Left Toolbar */}
<div className="absolute left-6 top-1/2 -translate-y-1/2 z-20">
<SketchBoardToolBar
activeTool={activeTool}
onSelectTool={setActiveTool}
/>
</div>
</div>
);
}3. Theme Hook: useSketchTheme()
When building custom UI surrounding the canvas, use useSketchTheme() to access the active theme state:
import { useSketchTheme } from "@filekit-studio/sketch";
export function CustomStatusPill() {
const { resolvedTheme, isDark, panelVariant } = useSketchTheme();
return (
<div className="text-xs font-mono">
Theme: {resolvedTheme} | Dark: {isDark ? "Yes" : "No"} | Panel: {panelVariant}
</div>
);
}4. UI Visibility Flags (uiConfig)
If you want to use the full <SketchEditor /> but hide specific sections (such as hiding the top bar or property panel), use uiConfig instead of rebuilding from subcomponents:
<SketchEditor
uiConfig={{
showTopBar: true,
showToolBar: true,
showPropertiesPanel: false, // Hides property inspector
showMinimap: false, // Hides bottom-right radar
showTemplates: false, // Hides blueprint templates
}}
/>