Examples

Explore the core canvas first, then add extensions for specialized capabilities. Each page includes an interactive example and its source. Example metadata is available immediately; each implementation loads only when its route opens.

For a complete editing surface, open the playground. For coding-agent reference files, see Agents.

Core

Getting started

Example	Try it / observable result	API
Your first drawing	Create, select, move and delete a few shapes using one controller and canvas.	Controller, Canvas
Transform modifiers	Resize from edges/corners, rotate, preserve ratio with Shift and resize from the center with Alt.	Controller
Multi-selection and arrangement	Select, align, distribute, change stacking order and undo separate edits.	Controller
Locks and capabilities	Compare instance locking with a definition that disables resizing and rotation.	Shapes, Hooks

Elements and structure

Example	Try it / observable result	API
Images	Add/replace image content, transform it, and inspect its default undecorated appearance.	Shapes
Drawing and erasing	Pick stroke defaults before drawing, edit the finished stroke and erase with undo.	Shapes
Frames and ownership	Group and ungroup siblings, move nested contents, clip overflow, remove a frame while keeping children, or delete the complete tree.	Shapes
Departmental swimlanes	Arrange department frames in rows or columns without scaling tasks; collapse a lane to show its summary.	Controller

Text

Example	Try it / observable result	API
Plain Text	Edit text without optional formatting.	Plain Text

Canvas and navigation

Example	Try it / observable result	API
Custom tools	Register a tool beside built-ins, with cursor/shortcut and shared verb/preview behavior.	Extensions and options
Grid snapping	Switch dot/line/custom patterns, spacing and increments; vary visibility independently of snapping.	Grids
Fitted and infinite canvas	Switch between an infinite canvas and one that fits the content plus padding.	Canvas
View-only diagrams	Select, pan, scroll and zoom without moving or editing diagram elements.	Canvas

Animation & effects

Example	Try it / observable result	API
Navigation and animation	Jump or animate to cards/bounds, set normal scale and interrupt animation without editing content.	Navigation and motion
Connector effects	Play dots, dashes, arrows and gradient flows, a pulse or a three-time blink along the selected connectors, in a brand color.	Animation & effects
Shape effects	Pulse, blink, ripple or glow, breathe or pop, and fade the selected shape; stop each effect or all of them.	Animation & effects
Element motion	Move, resize and lay out elements with motion; each edit commits at once as one undo step.	Navigation and motion
Custom effect	Play an extension's own effect kind, a turning dashed ring, and edit it in the inspector.	Animation & effects
Live energy flow	Watch generation, storage, demand and grid exchange update across animated power paths.	Animation & effects, Live data

Embedded controls

Example	Try it / observable result	API
Controls inside a node	Use a slider, compact dropdown and button; drag non-interactive space and resize/rotate the node.	Widgets
Portable widget fallback	Compare live controls with their declared portable appearance in output.	Widgets, Output
Widget clipping and layering	Overlap nodes, clip a widget within a frame, and verify input follows visible content after pan/zoom.	Widgets
Custom properties	Edit registered values through the inspector and the widget; observe one canonical value and undo history.	Widgets

Documents and editing

Example	Try it / observable result	API
Events and permissions	Inspect semantic changes, deny an edit, and confirm no partial mutation or extra history entry.	Hooks
Save and load	Round-trip JSON with Rich Text and custom values; reject an invalid or stale replacement.	Persistence
SVG and PNG	Export the same fixture with text, labels, images, clips and widget fallbacks.	Output
Transactions and undo	Preview/commit/cancel a multi-element operation; undo and redo one logical edit.	Undo and redo
Copy, paste and duplicate	Duplicate owned contents with fresh identities and retained text/connection relationships.	Controller
Controller lifetime	Unmount, dispose a controller that joined a diagram, remount the retained document, and undo an earlier edit.	Ownership

Use cases

Example	Try it / observable result	API
Connected building topology	Explore live gateways, building controls, HVAC and EV charging; rearrange or expand the site hierarchy.	Graph layout, Shapes
Regional transport network	Move nodes, mark a connection and undo the change.	Connectors
Construction site coordination	Move nodes, mark a connection and undo the change.	Connectors
Warehouse execution flow	Track receiving, putaway, storage, picking, packing and dispatch with changing operational queues.	Shapes, Connectors
Workplace floor planning	Edit rooms, walls, doors, windows and dimensions while occupancy changes across the plan.	Shapes, Grids
MES production routing	Follow a batch through mixing, quality, rework and release while production telemetry changes.	Shapes, Connectors

Starter kits

Example	Try it / observable result	API

Extensions

Connectors

Example	Try it / observable result	API
Crowded network	Arrange overlapping labels, move equipment into a connection, then explicitly reroute the elbow around it.	Connectors
Connected cards	Switch four routers on bound cards, select a label, and start/stop a path animation.	Connectors
Connector labels	Enter/double-click to edit, add a second label, move it along the path and style/delete each label.	Connectors
Explicit ports	Connect fixed and instance-defined ports; observe hover/snap feedback and owner transforms.	Shapes, Connectors
Connection admission	Allow/reject source/target combinations through one endpoint rule for interaction, verbs and imported documents.	Hooks
Anchors and contour routing	Compare straight, quadratic, cubic and elbow routes at center/edge anchors; inspect contour termination.	Connectors
Connected creation	Create a target and incoming connector atomically, including standalone text; undo both together.	Shapes

Rich text

Example	Try it / observable result	API
Rich Text	Install formatting explicitly and edit styled content.	Rich Text
Paragraphs, lists and checklists	Edit wrapping paragraphs, numbered/bulleted/checklist items and nesting; save and restore their structure.	Text
Fonts and inheritance	Configure the shared font catalog/default and compare explicit versus inherited font choices.	Extensions and options
Single-line and multiline regions	Edit a card title/body and compare admitted body lists with rejected title lists.	Text, Shapes
Range and whole-story formatting	Format a range versus whole text; preserve mixed marks through save/load.	Text

Tables

Example	Try it / observable result	API
Basic tables	Edit cells and add rows in a standalone table.	Tables
Embedded tables	Edit a member table inside a class shape.	Tables
Table styling	Resize tracks and configure borders.	Tables

Canvas assistance

Example	Try it / observable result	API
Editor composition	Toggle panels, toolbar, canvas, minimap and shape overlays; reposition the toolbar.	Canvas
Snap guides	Align neighboring sides and centers with a toggleable guide overlay.	Grids
Snap guide policy	Choose sides, centers and nearby candidate limits.	Grids
Minimap policies	Compare outlines/fills, optional connections and custom thumbnails, including filled text boxes.	Canvas
Layout	Compare layout strategies and their options on the same document.	Extensions
Mermaid import	Paste Mermaid source on the canvas, edit the native shapes, and copy Diagram JSON.	Extensions

See application compositions for service-map and storyboard recipes.