940d0de5b6
- 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
90 lines
3.4 KiB
Markdown
90 lines
3.4 KiB
Markdown
---
|
||
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.
|
||
## 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 | — | — |
|
||
| Copy as PNG | ⇧ ⌘ C | Shift + Ctrl + C |
|
||
| 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× and places on the system clipboard (paste into Slack, Notion, etc.)
|
||
- **Copy as JSX** — copies the OpenPencil JSX representation for use with `renderJsx()`
|
||
|
||
## Clipboard Actions
|
||
|
||
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|
||
|--------|----------------|----------------------|
|
||
| Copy | ⌘ C | Ctrl + C |
|
||
| Cut | ⌘ X | Ctrl + X |
|
||
| Paste here | ⌘ V | Ctrl + V |
|
||
| Duplicate | ⌘ D | Ctrl + D |
|
||
| Delete | ⌫ | Backspace / Delete |
|
||
|
||
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) |
|
||
|--------|----------------|----------------------|
|
||
| Group | ⌘ G | Ctrl + G |
|
||
| Ungroup | ⇧ ⌘ G | Shift + Ctrl + G |
|
||
| Add auto layout | ⇧ A | Shift + A |
|
||
|
||
- **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 |
|
||
|--------|----------------|----------------------|--------------|
|
||
| Create component | ⌥ ⌘ K | Ctrl + Alt + K | Frames, groups, multi-selection |
|
||
| Create component set | ⇧ ⌘ K | Shift + Ctrl + K | 2+ selected components |
|
||
| Create instance | — | — | Components (no shortcut) |
|
||
| Go to main component | — | — | Instances |
|
||
| Detach instance | ⌥ ⌘ B | Ctrl + Alt + B | Instances |
|
||
|
||
See [Components](./components) for details on the component workflow.
|
||
|
||
## Visibility & Lock
|
||
|
||
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|
||
|--------|----------------|----------------------|
|
||
| Hide / Show | ⇧ ⌘ H | Shift + Ctrl + H |
|
||
| Lock / Unlock | ⇧ ⌘ L | Shift + Ctrl + L |
|
||
|
||
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.
|