iinkTS Examples

INTERACTIVITY All types

Get Started

Get started with the Interactive Ink Canvas — draw, edit and recognize text, math and shapes.

View Code

INTERACTIVITY All types

Showcase

Interactive Ink Canvas feature tour — inspect symbols, history, selection and backend rendering.

View Code

INTERACTIVITY All types

Gestures

All 6 gesture types with visual reference and gesture menu configuration.

View Code

INTERACTIVITY All types

Override Default Options

Configure canvas defaults, behavior overrides, and initial settings.

View Code

INTERACTIVEINK All types

Override Theme

Customize background, menu panels, and input appearance via cssVars CSS custom properties.

View Code

INTERACTIVITY All types

Configure Menu Visibility

Show or hide specific menus and toolbar actions without custom code.

View Code

INTERACTIVITY All types

Override Menu

Replace built-in menus with fully custom menu classes.

View Code

INTERACTIVITY All types

Stroke Playback

Replay a recorded set of strokes on the canvas with its original timing, with play/pause/speed control.

View Code

INTERACTIVITY All types

Create Symbols

Programmatically create and inject ink symbols into the canvas.

View Code

INTERACTIVITY All types

Zoom & Pan

Programmatic zoom and pan — set zoom level, fit to content, and shift the viewport via the API.

View Code

INTERACTIVITY All types

Selection API

Programmatic symbol selection — select all, select by ID, react to selection events, zoom to selection.

View Code

INTERACTIVITY All types

Minimap

Bird's-eye overview panel for navigating large ink canvases.

View Code

INTERACTIVITY All types

Keyboard Shortcuts

Keyboard navigation and shortcut bindings for hands-free editing.

View Code

INTERACTIVITY All types

Live Monitor

Real-time canvas state snapshot and timestamped action log — symbols, selection, undo/redo, zoom, and clipboard.

View Code

INTERACTIVITY All types

Connection Status

Live connection state indicator with automatic reconnect handling.

View Code

INTERACTIVITY All types

TLDraw Integration

Handwriting recognition embedded inside a TLDraw collaborative canvas (React).

View Code

INTERACTIVITY Math

Computation Modes

Switch between numeric evaluation and symbolic computation modes.

View Code

INTERACTIVITY Math

Dependencies

Track variables across linked math blocks for dependency-aware computation.

View Code

INTERACTIVITY Math

Context Menu

Surround a math expression to compute, evaluate functions, set variables, or check the solver diagnostic.

View Code

INTERACTIVITY Math

Variables

Declare variables as ink expressions, substitute them across blocks, and manage global fallbacks via the variable canvas.

View Code