Text tool
Add editable text layers with full typography control — font, size, weight, color, stroke, shadow, alignment, and curved text on a path.
The text tool (T) creates inline-editable text layers.
#Adding & editing
| Action | Binding |
|---|---|
| Add text at cursor | Click empty canvas |
| Select text layer | Click the layer |
| Edit inline | Double-click |
| Confirm / deselect | Esc (or click outside) |
| Delete | Del |
When you double-click into edit mode, the editor swaps a <textarea> into place sized to the layer. Type, then Esc to commit.
#Typography panel
The right-side panel exposes:
- Font family — bundled families plus any web fonts the editor has loaded
- Font size — px or pt
- Bold / Italic
- Alignment — left, center, right
- Color
- Opacity
- Stroke — color, width (outlined text)
- Shadow — color, blur, offset, opacity
- Line height, letter spacing
#Curved text on path
Text can be rendered along a curve. Open Path in the text panel and pick a preset (arc up, arc down, circle, wave) or (planned) draw a custom path.
When path is set on a text layer, the renderer measures each glyph and rotates it along the path tangent. Editing the text live updates the path layout.
Tip: combine curved text with a transparent ellipse to get a circular badge — a "Limited edition / 50% off / Free shipping" rosette in three layers.
#Roles
A text layer can carry an optional role — headline, subheadline, body, caption, quote. Roles are metadata: they let templates and AI agents reason about content semantically without parsing visual style.
#Layer data shape
interface TextLayer {
id: string
type: 'text'
x: number; y: number
width: number; height: number // wrap width
rotation: number
text: string
fontFamily: string
fontSize: number
fontWeight: number // 400, 600, 700, ...
italic: boolean
align: 'left' | 'center' | 'right'
color: string
opacity: number
stroke?: { color: string; width: number }
shadow?: { color: string; blur: number; dx: number; dy: number; opacity: number }
path?: { kind: 'arc-up' | 'arc-down' | 'circle' | 'wave'; ... }
role?: 'headline' | 'subheadline' | 'body' | 'caption' | 'quote'
// ...
}