SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/packages/docs/user-guide/exporting.md

93 lines
4.2 KiB
Markdown
Raw Normal View History

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: Exporting
Update README and docs for new formats and SDK
2026-03-28 12:42:21 +00:00
description: Export images, SVG, and .fig subsets, and open .fig or .pen documents in OpenPencil.
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
---
# Exporting
Update README and docs for new formats and SDK
2026-03-28 12:42:21 +00:00
Export individual nodes as images or `.fig` subsets, and open full `.fig` or `.pen` documents.
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
## Image Export
Select a node and use the Export section in the properties panel.
### Export Settings
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
- **Scale** — 0.5×, 0.75×, 1×, 1.5×, 2×, 3×, or 4× (hidden for SVG — vectors are resolution-independent)
Update README and docs for new formats and SDK
2026-03-28 12:42:21 +00:00
- **Format** — PNG (transparent background), JPG (white background), WEBP (transparent background), SVG (vector), `.fig` (native document subset)
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
You can add multiple export settings to export the same node at different scales or formats in one go. A live preview with a checkerboard background shows what will be exported.
### Export Methods
| Method | Mac | Windows / 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
| Keyboard shortcut | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>E</kbd> |
| Context menu | Right-click <kbd>→</kbd> Export… | Right-click <kbd>→</kbd> Export… |
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
| Properties panel | Click "Export" button | Click "Export" button |
The exported file is saved via a native dialog (desktop) or browser download.
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
In addition to file export, you can copy the selection to the clipboard in multiple formats via the context menu (right-click → Copy/Paste as):
| 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 selection as SVG markup (paste into code editors, Inkscape, etc.)
- **Copy as PNG** — renders at 2× and copies to the clipboard (ready to paste into Slack, Notion, etc.)
- **Copy as JSX** — copies the OpenPencil JSX representation (compatible 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
## .fig File Operations
OpenPencil uses the .fig format for full documents — the same binary format as Figma.
### Opening Files
| Action | Mac | Windows / 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
| Open file | <kbd>⌘</kbd><kbd>O</kbd> | <kbd>Ctrl</kbd> + <kbd>O</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
Update README and docs for new formats and SDK
2026-03-28 12:42:21 +00:00
A file picker dialog opens, filtered for `.fig` and `.pen` files. On the desktop app, this uses the native OS dialog.
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
feat: open documents dropped onto the window (#906) * feat: open documents dropped onto the window Dropping a .fig, .pen, or other readable document did nothing: the canvas drop handler places only images and SVG files and swallowed everything else. The workspace now opens dropped documents in new tabs through the same path as File → Open, passing the file handle where the browser provides one, and reports files it cannot open instead of ignoring them. Images and SVG files dropped on the canvas are still placed. * fix: classify each dropped file instead of matching File identities DataTransferItem.getAsFile() may return a new File, so checking it against the canvas files from dataTransfer.files could miss images and SVG files and open them as documents in engines other than Chromium. Each extracted file is now classified on its own; a spec checks that an SVG dropped on the canvas is placed without opening a tab.
2026-10-05 14:24:43 +00:00
You can also drag a `.fig`, `.pen`, or other supported document onto the window; it opens in a new tab. Images and SVG files dropped on the canvas are placed in the document instead, and any other file reports that it can't be opened.
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
### Saving Files
| Action | Mac | Windows / 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
| Save | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
| Save As | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</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
- **Save** overwrites the currently open file without a dialog
- **Save As** opens a save dialog to choose a new location
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
Saved files are compressed and include a thumbnail image for preview in file browsers.
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
### Round-trip Compatibility
Files exported from OpenPencil can be opened in Figma, and vice versa. The .fig format preserves all node types, properties, fills, strokes, effects, vector data, and layout settings.
## Keyboard Shortcuts
| Action | Mac | Windows / 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
| Export selection | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>E</kbd> |
| Copy as PNG | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>C</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>C</kbd> |
| Open file | <kbd>⌘</kbd><kbd>O</kbd> | <kbd>Ctrl</kbd> + <kbd>O</kbd> |
| Save | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
| Save As | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</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
## Tips
- Use 2× or 3× scale when exporting for high-DPI screens.
- JPG always uses a white background — use PNG or WEBP if you need transparency.
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
- Use SVG export when you need a vector format for further editing in Illustrator, Inkscape, or code.
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 thumbnail in exported .fig files enables preview in file browsers and Figma's file picker.
Reference in a new issue Copy permalink