Skedraopen source

@skedra/react

Stable npm versions are published from Skedra vX.Y.Z release tags and use the matching X.Y.Z version. The source manifest intentionally uses 0.0.0-development; release automation replaces it only in the published package.

React SDK for embedding the Skedra canvas without the Skedra app shell.

The package includes the full client-side canvas tooling layer: drawing tools, images and cropping, sticky notes, frames, Kanban boards, flowcharts, mindmaps, graphical sequence diagrams with optional Mermaid import, templates, shape libraries, grid snapping, history, clipboard, properties, saved views, presentations, portable files, visual exports, local state, controlled state, and an imperative API. Auth, roles, comments, and collaboration transport are intentionally left to the host app or optional adapters.

This package uses AGPL-3.0-only. Use, modify, embed and redistribute it under that license, including its source and notice obligations.

This package is the shared editor surface. Workspace features such as accounts, teams, comments, hosted collaboration, AI backends, and voice/screen-share rooms live in the open-source, self-hosted Skedra workspace or integrations configured by the host. The SDK only exports typed hooks for those integrations.

The package is ESM-only. Import the CSS explicitly alongside the component.


import { SkedraCanvas } from "@skedra/react";
import "@skedra/react/style.css";

export function Whiteboard() {
	return (
		<div style={{ height: 600 }}>
			<SkedraCanvas onChange={(elements) => console.info(elements)} />
		</div>
	);
}

The host owns the size of the SDK container; the bundled editor responds to that container rather than only to the browser viewport. Its toolbar, properties panel, popovers, touch targets, and safe-area spacing therefore use the same responsive implementation as the Community canvas. Full-screen hosts can override --canvas-editor-safe-* or the other documented --canvas-editor-* variables through the style prop when surrounding product chrome reserves additional space.

The main layout hooks are:

Props

Imperative API


import { useRef } from "react";
import { SkedraCanvas, type SkedraCanvasApi } from "@skedra/react";

export function Board() {
	const apiRef = useRef<SkedraCanvasApi | null>(null);

	return (
		<>
			<button onClick={() => apiRef.current?.insertGanttChart()}>
				Add Gantt chart
			</button>
			<button
				onClick={() =>
					apiRef.current?.insertVisualSequenceDiagram("checkout")
				}
			>
				Add visual sequence diagram
			</button>
			<button
				onClick={() =>
					apiRef.current?.insertSequenceDiagram(
						"sequenceDiagram\nUser->>API: Request\nAPI-->>User: Response",
					)
				}
			>
				Add sequence diagram
			</button>
			<div style={{ height: 600 }}>
				<SkedraCanvas ref={apiRef} />
			</div>
		</>
	);
}

The ref exposes the complete editor command surface, including:

The stable command IDs are available as SKEDRA_CANVAS_COMMAND_IDS and through the @skedra/react/commands subpath.

The built-in toolbar covers the complete shared ToolType contract: select, lasso, pan, shapes, line/arrow, freehand, text, frame, eraser, laser, and eyedropper. SDK-specific insertion tools add sticky notes, Kanban boards, mindmaps, a visual sequence-diagram builder with Mermaid import, and all shared templates, including structured Gantt charts. SKEDRA_SDK_TOOL_IDS exposes the supported tool IDs to host applications.

Choosing the Gantt template opens the same dynamic editor used by the Web app. Hosts can also embed that surface directly with SkedraGanttPanel.

Files, libraries, images, and exports

The package root and @skedra/react/io expose standalone helpers for plain and PBKDF2/AES-GCM encrypted .skedra documents, .skedralib files, .excalidrawlib conversion, browser clipboard payloads, image data elements, and crop operations. @skedra/react/exporters creates SVG, PNG, PDF, and PPTX blobs from the rendered canvas. These helpers have no dependency on Skedra's web application or internal workspace services.

Canvas parity

The SDK and the Skedra web application use the same SDK-scoped canvas implementation. @skedra/canvas-core owns storage-independent mutation plans, drawing and selection geometry, keyboard commands, template generation and layout, Kanban/Flowchart operations, alignment/distribution, grouping, clipboard relation remapping, and mindmap operations. @skedra/canvas-editor owns shared editor gestures and interaction UI, @skedra/canvas-react owns the SVG renderer, and @skedra/canvas-io owns file codecs, encryption, and visual exporters. The web application only adapts these layers to its Yjs, translation, dialog, and collaboration services; the public package adapts them to controlled or local React state.

Multi-line points, corner/curve modes, legacy elbow rendering, hover previews, start-point closing snaps, closing/filling, and path point editing run through the same @skedra/canvas-editor controller and components in the Community app and SDK. Core geometry remains in @skedra/canvas-core. The internal editor package is bundled into @skedra/react, so SDK consumers install only the public SDK package. Repository boundary and parity checks require both surfaces to keep using the shared implementation.

Product-only concerns such as accounts, authorization, billing, comments, hosted collaboration transport, and application panels intentionally remain outside the SDK scope.

Factories

Factory helpers are exported from the package root and the @skedra/react/factories subpath:


import {
	createSkedraGanttChartElements,
	createSkedraKanbanBoardElements,
	createSkedraSequenceDiagramElements,
	createSkedraVisualSequenceDiagramElements,
	createSkedraTemplateElements,
} from "@skedra/react/factories";

const gantt = createSkedraGanttChartElements({
	x: 100,
	y: 100,
	startDate: "2026-07-13",
	tasks: [
		{ id: "design", title: "Design", startDay: 0, durationDays: 5 },
		{ id: "build", title: "Build", startDay: 5, durationDays: 8 },
	],
	dependencies: [{ fromTaskId: "design", toTaskId: "build" }],
});

const sequence = createSkedraSequenceDiagramElements({
	x: 500,
	y: 400,
	source: `sequenceDiagram
    actor User
    participant API
    User->>API: Request
    API-->>User: Response`,
});

const visualSequence = createSkedraVisualSequenceDiagramElements({
	preset: "checkout",
	x: 500,
	y: 400,
});

For collaboration, keep this package as the rendering and tooling layer and pass synced elements in controlled mode.

Workspace Hooks

@skedra/react/workspace-hooks exports typed status/callback contracts for workspace integrations without shipping the provider implementation:


import type { SkedraWorkspaceHooks } from "@skedra/react/workspace-hooks";

The public hooks can represent state such as isInCall, isMuted, isSpeaking, and isScreenSharing. The actual room orchestration and provider wiring belongs in the workspace app or a host-provided adapter.