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: Context Menu
description: Right-click context menu actions in OpenPencil — clipboard, z-order, grouping, components, and more.
---
# Context Menu
Right-click on the canvas to open the context menu. If you right-click on a node, it is selected first. Right-clicking on empty canvas clears the selection.
Sync docs with v0.7.0 and unreleased features
- Update comparison tables: 78 tools (was 75), SVG export no longer a Penpot advantage,
renderer LOC updated to ~3,200 after split into 10 files
- Update figma-comparison: Rename layers ✅, SVG export ✅, +Copy/Paste as, +Tailwind export,
+Stroke align, +per-side stroke weights; coverage 88/152 → 94/158
- Add What's Next roadmap to architecture.md: AI providers, figma-use tool set,
CI tooling, prototyping, CSS Grid, PDF export, .fig fidelity
- Update user-guide: SVG in export format table, Copy/Paste as submenu,
stroke align + per-side weights, layer inline rename, mobile drawer, Code tab format toggle
- Fix keyboard shortcuts: ⌘N/⌘T/⌘W ✅, ⌘\ ✅, add ⇧⌘C ✅
- Expand MCP tools reference from ~25 to all 78 tools in full category tables
- Add Homebrew tap install to Getting Started
- Add new features.md sections: SVG export, Copy/Paste as, stroke align, mobile/PWA,
Tailwind JSX export, Google Fonts fallback, auto-save toggle, Homebrew tap,
layer rename, renderer profiler
- Full locale sync for DE, ES, FR, IT, PL: all 7 files updated in each locale
2026-03-07 16:25:41 +00:00
## Copy/Paste as
The **Copy/Paste as** submenu offers additional clipboard formats for the selected node(s):
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|--------|----------------|----------------------|
| Copy as text | — | — |
| Copy as SVG | — | — |
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
| Copy as PNG | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > C< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > C< / kbd > |
Sync docs with v0.7.0 and unreleased features
- Update comparison tables: 78 tools (was 75), SVG export no longer a Penpot advantage,
renderer LOC updated to ~3,200 after split into 10 files
- Update figma-comparison: Rename layers ✅, SVG export ✅, +Copy/Paste as, +Tailwind export,
+Stroke align, +per-side stroke weights; coverage 88/152 → 94/158
- Add What's Next roadmap to architecture.md: AI providers, figma-use tool set,
CI tooling, prototyping, CSS Grid, PDF export, .fig fidelity
- Update user-guide: SVG in export format table, Copy/Paste as submenu,
stroke align + per-side weights, layer inline rename, mobile drawer, Code tab format toggle
- Fix keyboard shortcuts: ⌘N/⌘T/⌘W ✅, ⌘\ ✅, add ⇧⌘C ✅
- Expand MCP tools reference from ~25 to all 78 tools in full category tables
- Add Homebrew tap install to Getting Started
- Add new features.md sections: SVG export, Copy/Paste as, stroke align, mobile/PWA,
Tailwind JSX export, Google Fonts fallback, auto-save toggle, Homebrew tap,
layer rename, renderer profiler
- Full locale sync for DE, ES, FR, IT, PL: all 7 files updated in each locale
2026-03-07 16:25:41 +00:00
| Copy as JSX | — | — |
- **Copy as text** — copies visible text content from the selection
- **Copy as SVG** — copies the node tree as SVG markup
- **Copy as PNG** — renders at 2×
- **Copy as JSX** — copies the OpenPencil JSX representation for use with `renderJsx()`
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
## Clipboard Actions
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|--------|----------------|----------------------|
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
| Copy | < kbd > ⌘< / kbd > < kbd > C< / kbd > | < kbd > Ctrl< / kbd > + < kbd > C< / kbd > |
| Cut | < kbd > ⌘< / kbd > < kbd > X< / kbd > | < kbd > Ctrl< / kbd > + < kbd > X< / kbd > |
| Paste here | < kbd > ⌘< / kbd > < kbd > V< / kbd > | < kbd > Ctrl< / kbd > + < kbd > V< / kbd > |
| Duplicate | < kbd > ⌘< / kbd > < kbd > D< / kbd > | < kbd > Ctrl< / kbd > + < kbd > D< / kbd > |
| Delete | ⌫ | < kbd > Backspace< / kbd > / Delete |
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
Clipboard actions are disabled when nothing is selected (except Paste, which is available when the clipboard has content).
## Z-Order
| Action | Shortcut |
|--------|----------|
| Bring to front | ] |
| Send to back | [ |
Moves the selected node to the top or bottom of its parent's child list.
## Grouping
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|--------|----------------|----------------------|
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
| Group | < kbd > ⌘< / kbd > < kbd > G< / kbd > | < kbd > Ctrl< / kbd > + < kbd > G< / kbd > |
| Ungroup | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > G< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > G< / kbd > |
| Add auto layout | < kbd > ⇧< / kbd > < kbd > A< / kbd > | < kbd > Shift< / kbd > + < kbd > A< / kbd > |
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
- **Group** requires 2 or more selected nodes
- **Ungroup** appears when a group is selected — children are reparented to the group's parent
- **Add auto layout** wraps the selection in a new [auto layout ](./auto-layout ) frame
## Component Actions
Component actions are displayed in purple to match the component color theme.
| Action | Shortcut (Mac) | Shortcut (Win/Linux) | Available on |
|--------|----------------|----------------------|--------------|
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
| Create component | < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > | < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > K< / kbd > | Frames, groups, multi-selection |
| Create component set | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > K< / kbd > | 2+ selected components |
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
| Create instance | — | — | Components (no shortcut) |
| Go to main component | — | — | Instances |
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
| Detach instance | < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > B< / kbd > | < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > B< / kbd > | Instances |
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
See [Components ](./components ) for details on the component workflow.
## Visibility & Lock
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|--------|----------------|----------------------|
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
| Hide / Show | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > H< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > H< / kbd > |
| Lock / Unlock | < kbd > ⇧< / kbd > < kbd > ⌘< / kbd > < kbd > L< / kbd > | < kbd > Shift< / kbd > + < kbd > Ctrl< / kbd > + < kbd > L< / kbd > |
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
The label toggles based on the node's current state (e.g., "Hide" for a visible node, "Show" for a hidden one).
## Move to Page
The **Move to page** submenu lists all pages except the current one. Select a page to reparent the selected nodes under that page's canvas.
## Tips
- Right-clicking empty canvas gives you access to Paste — useful for placing content at a specific location.
- Component actions only appear when relevant (e.g., "Create instance" only for component nodes).
- The context menu mirrors the keyboard shortcuts — it's a good way to discover shortcuts you don't know yet.
