Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
---
title: Pen Tool
description: Drawing vector paths with bezier curves using the pen tool in OpenPencil.
---
# Pen Tool
The pen tool creates vector paths using a vector network data model, compatible with Figma's .fig format.
## Activating
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Press < kbd > P< / kbd > to activate the pen tool.
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Placing Points
- **Click** to place a corner point (straight-line segment)
- **Click + drag** to place a curve point with bezier tangent handles — the drag direction and length control the curve shape
2026-03-27 16:27:45 +00:00
- **Hold < kbd > Space</ kbd > ** while dragging (without releasing the mouse button) to move the point itself
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
Click multiple points to build a path segment by segment. A preview line extends from the last placed point to your cursor as you move.
## Closing a Path
Click on the **first point** of the path to close it into a loop. Closed paths can be filled.
## Open Paths
Use <kbd> for keyboard shortcuts across all docs
Wrap all keyboard shortcut references in <kbd> tags in user guide,
reference, and development docs across all 7 locales (en, de, es,
fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Press < kbd > Escape< / kbd > to commit the current path as an open path. Open paths render as strokes only — they're not filled.
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Vector Networks
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Paths in OpenPencil use vector networks — a more flexible model than simple point lists that supports branching paths and complex topology. This is the same model Figma uses, so paths round-trip perfectly in .fig files.
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Keyboard Shortcuts
| Action | Mac | Windows / Linux |
|--------|-----|-----------------|
Wrap remaining single-key shortcuts and key names in <kbd>
Single-letter tool keys (R, O, L, F, S, P, H), Escape, Enter,
Space (and locale equivalents), arrow key names in shortcut tables
and prose. Remove <kbd> from non-key words like 'drag'.
2026-03-08 10:07:08 +00:00
| Pen tool | < kbd > P< / kbd > | < kbd > P< / kbd > |
| Commit open path | < kbd > Escape< / kbd > | Escape |
Add User Guide section with 11 articles derived from OpenSpec specs
New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.
Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.
VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Tips
- The preview line always starts from the last placed point — it won't jump to (0,0).
- Drag longer when placing a curve point to make the curve wider.
- After creating a path, use the properties panel to adjust its fill, stroke, and effects.