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 |
|--------|----------------|----------------------|--------------|
fix: share Figma's creation and grouping between editor and plugin API (#919)
* fix(core): start new layers with Figma's defaults in the editor and plugin API
The plugin API created bare nodes: frames, components, and shapes without fills, and lines and vectors without strokes, so scripts written for Figma drew nothing. Drawn lines also had a black fill instead of a stroke and were invisible. Both paths now share newLayerDefaults, recorded from Figma desktop 126: frames and components white with frames clipping their content, shapes #D9D9D9, lines and vectors a black 1 px stroke, text black. A stroke a script adds gets the 1 px default weight, and an empty vector has no render bounds.
* fix(core): combine variants as Figma does from the canvas and from scripts
The plugin API and the editor command each built component sets their own way, both with 40 px of padding and a grey fill. Figma's command pads the variants by 20 and outlines the set with a 1 px dashed #8A38F5 stroke; its plugin API wraps them exactly with no fill or stroke. One variantSetProps now places and styles the set for both, with a canvas or script style, and applyVariantProperties derives variant properties for both.
* fix(core): report group children in their container's space in the plugin API
Figma's plugin API places children of groups and booleans relative to the nearest real container and refits a group whenever a script changes one of its children. Ours reported group-relative positions and never refit, so scripts placing layers inside groups landed them in the wrong place. x, y, and relativeTransform now map through the groups around a node, and geometry changes, appendChild, insertChild, and remove refit the surrounding groups. The refit moves to Scene Graph as fitEnclosingGroups, shared by the canvas (with undo) and the plugin API.
* test(core): pass script-style strokes and typed components in parity tests
* test(e2e): expect Figma's default shape grey in the scene freshness spec
* fix(vue): draw lines by length and angle as Figma does
The Line tool sized a line as the box spanned by the drag. With the stroke a new line now gets, that box drew as a rectangle outline. A line now starts at the press point with the drag length as its width, no height, and the drag angle as its rotation, as Figma's Line tool makes it; Shift snaps the angle to 45° steps, as the docs already described, and a click makes a 100 px horizontal line.
* fix(core): give each new layer its own copy of the default paints
The defaults spread each paint shallowly, so every layer shared the colour object of the module-level default and editing one layer's colour in place changed the next new layer. Copy the paints with the Scene Graph copy helpers.
* fix(core): group, ungroup, and combine layers through shared code in the plugin API
The plugin API wrapped layers, ungrouped, made booleans, and made components from layers with its own code. Ungroup moved the children to the top of the stack, booleans were named "Boolean union", and a component made from a frame cloned its children under new ids. These now run through the editor's shared wrap, ungroup, and boolean functions, with the placement and defaults recorded in Figma desktop 126: a group or boolean without an index goes on top, ungrouped children take the group's place, booleans are named after the operation and filled with the default grey, a frame becomes a component in its place with its children, and any other layer is wrapped in a white component named after it. Undoing a wrap in the editor now returns each layer to its own place in the stack.
* fix(core): group, frame, combine, and make components from the canvas as Figma does
Recorded in Figma desktop 126: a container made from the canvas takes the topmost selected layer's place, Frame selection adds no fill and does not clip, a component wrapped around layers is white and takes a single layer's name, and a boolean is filled like its topmost operand, or its base for Subtract, without strokes. The canvas commands and the plugin API now share the wrap parent check, stack ordering, component rules, and boolean paints, and the plugin API's createComponentFromNode converts groups in place as Figma does. Undoing a boolean returns each operand to its own place in the stack.
* refactor(core): reuse translate when centering pasted layers
2026-10-06 12:28:52 +00:00
| Create component | < kbd > ⌥< / kbd > < kbd > ⌘< / kbd > < kbd > K< / kbd > | < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > K< / kbd > | Any selection |
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 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.
