Text & Typography

The text system supports rich typography with multiple font families, weights, styles, and alignment options. Text objects can be edited inline by double-clicking on the canvas.

Adding Text

The toolbar provides three text presets: Heading, Subheading, and Body. Programmatically, you use engine.addText(content, options) with different font sizes and weights.

// Heading
engine.addText('Main Title', {
  left: 100,
  top: 100,
  fontSize: 48,
  fontWeight: 'bold',
  fontFamily: 'Inter',
  fill: '#1a1a1a',
});

// Subheading
engine.addText('Section Subtitle', {
  left: 100,
  top: 180,
  fontSize: 32,
  fontWeight: '600',
  fontFamily: 'Inter',
  fill: '#4a4a4a',
});

// Body text
engine.addText('Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
  left: 100,
  top: 240,
  fontSize: 16,
  fontWeight: 'normal',
  fontFamily: 'Inter',
  fill: '#666666',
  width: 400,  // enables text wrapping
});

💡

Text wrapping

Set the width property to enable text wrapping. Without it, text will extend as a single line.

Text Properties

All text properties can be updated after creation using engine.updateObject().

// Update text properties
engine.updateObject(textId, {
  fontFamily: 'Georgia',
  fontSize: 24,
  fontWeight: 'bold',        // 'normal' | 'bold' | '100'-'900'
  fontStyle: 'italic',       // 'normal' | 'italic'
  textAlign: 'center',       // 'left' | 'center' | 'right' | 'justify'
  lineHeight: 1.5,           // line spacing multiplier
  charSpacing: 50,           // character spacing in units
  fill: '#2563eb',
});

Text Properties

Name	Type	Default	Description
`fontFamily`	`string`	`'Inter'`	Font family name
`fontSize`	`number`	`16`	Font size in pixels
`fontWeight`	`string \| number`	`'normal'`	Font weight: 'normal', 'bold', or numeric 100-900
`fontStyle`	`string`	`'normal'`	Font style: 'normal' or 'italic'
`textAlign`	`string`	`'left'`	Horizontal alignment: 'left', 'center', 'right', 'justify'
`lineHeight`	`number`	`1.2`	Line height multiplier
`charSpacing`	`number`	`0`	Character spacing in 1/1000 em units
`fill`	`string`	`'#000000'`	Text color (hex, rgb, or named)
`text`	`string`	—	The text content itself
`width`	`number`	—	Text box width (enables wrapping when set)

Inline Editing

Users can double-click any text object on the canvas to enter inline editing mode. The text becomes directly editable with a blinking cursor. Clicking outside or pressing Escape exits edit mode.

// Programmatically enter edit mode on a text object
engine.enterTextEditing(textId);

// Exit edit mode
engine.exitTextEditing();

// Update text content
engine.updateObject(textId, {
  text: 'Updated content here',
});

ℹ️

Keyboard shortcut

Press T to activate the text tool from the toolbar. Click on the canvas to place a new text object and immediately enter edit mode.

Fonts

The editor includes a set of built-in Google Fonts. You can also load custom fonts at runtime.

// Get available fonts
const fonts = engine.getAvailableFonts();
// Returns: string[]
// e.g. ['Inter', 'Roboto', 'Open Sans', 'Lato', 'Montserrat', ...]

// Load a custom font before using it
await engine.loadFont('CustomFont', 'https://example.com/fonts/custom.woff2');

// Now use it
engine.addText('Custom Font Text', {
  fontFamily: 'CustomFont',
  fontSize: 24,
});

Built-in Font Families

Sans-serif: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway
Serif: Georgia, Playfair Display, Merriweather, Lora, PT Serif
Monospace: Fira Code, JetBrains Mono, Source Code Pro
Display: Oswald, Bebas Neue, Anton, Righteous
Handwriting: Dancing Script, Pacifico, Caveat, Satisfy

💡

Font loading

Custom fonts should be loaded before creating text objects that use them. Otherwise the text will render with a fallback font and re-render once the font loads.

UI Controls

When a text object is selected, the Property Panel displays typography controls including:

Font family dropdown with preview
Font size input with increment/decrement buttons
Bold, Italic, Underline, and Strikethrough toggle buttons
Text alignment buttons (left, center, right, justify)
Line height and character spacing sliders
Text color picker