# OpenPencil

> Open-source, AI-native design editor and toolkit. Opens Figma .fig files, provides a programmable scene graph, CLI, MCP server, and Vue SDK for custom editor shells.

Use this file as the compact map for agents. For complete Markdown content, fetch https://openpencil.dev/llms-full.txt.

## Table of Contents

### Getting Around

- [Canvas Navigation](https://openpencil.dev/user-guide/canvas-navigation.md): Panning, zooming, and the hand tool in OpenPencil.
- [Selection & Manipulation](https://openpencil.dev/user-guide/selection-and-manipulation.md): Selecting, moving, resizing, rotating, duplicating, and organizing nodes in OpenPencil.
- [Context Menu](https://openpencil.dev/user-guide/context-menu.md): Right-click context menu actions in OpenPencil — clipboard, z-order, grouping, components, and more.

### Creating Content

- [Drawing Shapes](https://openpencil.dev/user-guide/drawing-shapes.md): Creating rectangles, ellipses, lines, frames, sections, polygons, and stars in OpenPencil.
- [Text Editing](https://openpencil.dev/user-guide/text-editing.md): Creating and editing text with rich formatting, fonts, and inline editing in OpenPencil.
- [Pen Tool](https://openpencil.dev/user-guide/pen-tool.md): Drawing vector paths with bezier curves using the pen tool in OpenPencil.

### Organizing & Managing

- [Layers & Pages](https://openpencil.dev/user-guide/layers-and-pages.md): Managing layers, pages, and the properties panel in OpenPencil.
- [Exporting](https://openpencil.dev/user-guide/exporting.md): Export images, SVG, and .fig subsets, and open .fig or .pen documents in OpenPencil.

### Advanced Features

- [Auto Layout](https://openpencil.dev/user-guide/auto-layout.md): Flex and grid layout in OpenPencil — direction, gap, padding, alignment, child sizing, and CSS Grid tracks.
- [Components](https://openpencil.dev/user-guide/components.md): Creating reusable components, instances, component sets, overrides, and live sync in OpenPencil.
- [Variables](https://openpencil.dev/user-guide/variables.md): Design variables, collections, modes, and fill bindings in OpenPencil.

### Vue SDK

- [Vue SDK](https://openpencil.dev/programmable/sdk.md): Build OpenPencil-powered editors with headless Vue composables and primitives.
- [SDK Getting Started](https://openpencil.dev/programmable/sdk/getting-started.md): Set up @open-pencil/vue with createEditor, provideEditor, and a canvas.
- [SDK Architecture](https://openpencil.dev/programmable/sdk/architecture.md): Folder structure, public API boundaries, and composition patterns in @open-pencil/vue.
- [Custom Editor Shell](https://openpencil.dev/programmable/sdk/guides/custom-editor-shell.md): Build your own editor shell with provideEditor, CanvasRoot, menus, panels, and toolbars.
- [Property Panels](https://openpencil.dev/programmable/sdk/guides/property-panels.md): Build property panels with control composables and headless list primitives.
- [Navigation Panels](https://openpencil.dev/programmable/sdk/guides/navigation-panels.md): Build page and layer sidebars with PageListRoot, LayerTreeRoot, and selection state.

#### API Reference

- [API Reference](https://openpencil.dev/programmable/sdk/api.md): Reference documentation for @open-pencil/vue components, composables, and advanced APIs.

##### Components

- [Components](https://openpencil.dev/programmable/sdk/api/components.md): Component reference for headless Vue primitives in @open-pencil/vue.
- [CanvasRoot](https://openpencil.dev/programmable/sdk/api/components/canvas-root.md): Headless canvas primitive for OpenPencil rendering surfaces.
- [CanvasSurface](https://openpencil.dev/programmable/sdk/api/components/canvas-surface.md): Canvas element primitive that binds to the nearest CanvasRoot context.
- [LayerTreeRoot](https://openpencil.dev/programmable/sdk/api/components/layer-tree-root.md): Headless structural primitive for layer tree interfaces.
- [LayerTreeItem](https://openpencil.dev/programmable/sdk/api/components/layer-tree-item.md): Headless row primitive for a single layer tree node.
- [ToolbarRoot](https://openpencil.dev/programmable/sdk/api/components/toolbar-root.md): Headless structural primitive for editor toolbar UIs.
- [ToolbarItem](https://openpencil.dev/programmable/sdk/api/components/toolbar-item.md): Headless toolbar item primitive for a single editor tool.
- [PageListRoot](https://openpencil.dev/programmable/sdk/api/components/page-list-root.md): Headless structural primitive for page list UIs.
- [PropertyListRoot](https://openpencil.dev/programmable/sdk/api/components/property-list-root.md): Headless structural primitive for fills, strokes, and effects list UIs.
- [PropertyListItem](https://openpencil.dev/programmable/sdk/api/components/property-list-item.md): Headless item primitive for a single fills, strokes, or effects row.
- [ColorPickerRoot](https://openpencil.dev/programmable/sdk/api/components/color-picker-root.md): Headless popover-based color picker primitive.
- [ColorInputRoot](https://openpencil.dev/programmable/sdk/api/components/color-input-root.md): Headless color input helper with hex parsing and update helpers.
- [FillPickerRoot](https://openpencil.dev/programmable/sdk/api/components/fill-picker-root.md): Headless popover-based fill picker primitive.
- [FontPickerRoot](https://openpencil.dev/programmable/sdk/api/components/font-picker-root.md): Headless searchable font picker built on Reka Combobox.
- [GradientEditorRoot](https://openpencil.dev/programmable/sdk/api/components/gradient-editor-root.md): Headless root primitive for gradient stop editing.
- [GradientEditorBar](https://openpencil.dev/programmable/sdk/api/components/gradient-editor-bar.md): Headless draggable bar primitive for gradient stops.
- [GradientEditorStop](https://openpencil.dev/programmable/sdk/api/components/gradient-editor-stop.md): Headless slot primitive for a single gradient stop row.
- [ScrubInputRoot](https://openpencil.dev/programmable/sdk/api/components/scrub-input-root.md): Headless root primitive for drag-to-scrub numeric input.
- [ScrubInputField](https://openpencil.dev/programmable/sdk/api/components/scrub-input-field.md): Input element primitive for ScrubInputRoot editing mode.
- [ScrubInputDisplay](https://openpencil.dev/programmable/sdk/api/components/scrub-input-display.md): Read-only display primitive for ScrubInputRoot non-editing mode.
- [LayoutControlsRoot](https://openpencil.dev/programmable/sdk/api/components/layout-controls-root.md): Headless root primitive for auto-layout and sizing controls.
- [AppearanceControlsRoot](https://openpencil.dev/programmable/sdk/api/components/appearance-controls-root.md): Headless root primitive for opacity, visibility, and corner-radius controls.
- [PositionControlsRoot](https://openpencil.dev/programmable/sdk/api/components/position-controls-root.md): Headless root primitive for position, size, alignment, and transform controls.
- [TypographyControlsRoot](https://openpencil.dev/programmable/sdk/api/components/typography-controls-root.md): Headless root primitive for font, alignment, and formatting controls.

##### Composables

- [Composables](https://openpencil.dev/programmable/sdk/api/composables.md): Core composable APIs in @open-pencil/vue.
- [provideEditor](https://openpencil.dev/programmable/sdk/api/composables/provide-editor.md): Provide an OpenPencil editor instance to a Vue subtree using injection.
- [useEditor](https://openpencil.dev/programmable/sdk/api/composables/use-editor.md): Access the current injected OpenPencil editor instance.
- [useCanvas](https://openpencil.dev/programmable/sdk/api/composables/use-canvas.md): Attach CanvasKit-backed rendering to a canvas element for an OpenPencil editor.
- [useCanvasInput](https://openpencil.dev/programmable/sdk/api/composables/use-canvas-input.md): Wire canvas pointer input, dragging, selection, resize, rotation, and tool behavior.
- [useTextEdit](https://openpencil.dev/programmable/sdk/api/composables/use-text-edit.md): Manage DOM text editing, composition, formatting, and syncing for canvas text nodes.
- [useSelectionState](https://openpencil.dev/programmable/sdk/api/composables/use-selection-state.md): Reactive selection-derived editor state for current node, count, and selection type.
- [useSelectionCapabilities](https://openpencil.dev/programmable/sdk/api/composables/use-selection-capabilities.md): Derive command-friendly booleans for selection-driven UI and actions.
- [useEditorCommands](https://openpencil.dev/programmable/sdk/api/composables/use-editor-commands.md): Build menus, actions, and command-driven UI on top of the editor.
- [useMenuModel](https://openpencil.dev/programmable/sdk/api/composables/use-menu-model.md): Build app and canvas menu models from the current editor state.
- [usePosition](https://openpencil.dev/programmable/sdk/api/composables/use-position.md): Read and update selected node position, size, rotation, alignment, and flipping.
- [useLayout](https://openpencil.dev/programmable/sdk/api/composables/use-layout.md): Work with auto-layout, sizing, padding, alignment, and grid tracks.
- [useAppearance](https://openpencil.dev/programmable/sdk/api/composables/use-appearance.md): Control visibility, opacity, and corner radius state for the current selection.
- [useTypography](https://openpencil.dev/programmable/sdk/api/composables/use-typography.md): Read and update font family, weight, size, alignment, and formatting for text nodes.
- [useExport](https://openpencil.dev/programmable/sdk/api/composables/use-export.md): Manage export settings like scale and format for the current selection.
- [useFillControls](https://openpencil.dev/programmable/sdk/api/composables/use-fill-controls.md): Fill-panel composable with default fill behavior.
- [useStrokeControls](https://openpencil.dev/programmable/sdk/api/composables/use-stroke-controls.md): Stroke-panel helpers for alignment, side selection, and per-side stroke weights.
- [useEffectsControls](https://openpencil.dev/programmable/sdk/api/composables/use-effects-controls.md): Effects-panel helpers for shadows, blurs, expansion state, and scrub/commit flows.
- [useVariablesEditor](https://openpencil.dev/programmable/sdk/api/composables/use-variables-editor.md): Compose the variables dialog state, table columns, and TanStack table wiring.
- [usePageList](https://openpencil.dev/programmable/sdk/api/composables/use-page-list.md): Read pages and drive page switching, creation, deletion, and renaming.

##### Advanced

- [Advanced](https://openpencil.dev/programmable/sdk/api/advanced.md): Lower-level and specialized APIs in @open-pencil/vue.
- [useNodeProps](https://openpencil.dev/programmable/sdk/api/advanced/use-node-props.md): Low-level selection and mixed-value helper for property panels.
- [useSceneComputed](https://openpencil.dev/programmable/sdk/api/advanced/use-scene-computed.md): Convenience wrapper for scene-derived computed state.
- [useColorVariableBinding](https://openpencil.dev/programmable/sdk/api/advanced/use-color-variable-binding.md): Variable-binding helper for fill and stroke color editors.
- [useFillPicker](https://openpencil.dev/programmable/sdk/api/advanced/use-fill-picker.md): Low-level fill-category and conversion helper.
- [useGradientStops](https://openpencil.dev/programmable/sdk/api/advanced/use-gradient-stops.md): Gradient-stop state and mutation helper for fill editors.
- [useFontPicker](https://openpencil.dev/programmable/sdk/api/advanced/use-font-picker.md): Searchable font-picker state and selection helper.
- [usePropScrub](https://openpencil.dev/programmable/sdk/api/advanced/use-prop-scrub.md): Low-level helper for drag-to-scrub property updates with commit support.
- [useLayerDrag](https://openpencil.dev/programmable/sdk/api/advanced/use-layer-drag.md): Drag-and-drop wiring helper for layer tree reordering.
- [useInlineRename](https://openpencil.dev/programmable/sdk/api/advanced/use-inline-rename.md): Inline rename state and focus-management helper.
- [useToolbarState](https://openpencil.dev/programmable/sdk/api/advanced/use-toolbar-state.md): Presentation-oriented toolbar state helper for mobile category paging.
- [useNodeFontStatus](https://openpencil.dev/programmable/sdk/api/advanced/use-node-font-status.md): Missing-font status helper for text nodes.
- [useCanvasDrop](https://openpencil.dev/programmable/sdk/api/advanced/use-canvas-drop.md): Image file drag-and-drop helper for canvas surfaces.
- [extractImageFilesFromClipboard](https://openpencil.dev/programmable/sdk/api/advanced/extract-image-files-from-clipboard.md): Clipboard utility for extracting accepted image files.
- [toolCursor](https://openpencil.dev/programmable/sdk/api/advanced/tool-cursor.md): Helper that resolves the cursor string for an editor tool.
- [useCanvasContext](https://openpencil.dev/programmable/sdk/api/advanced/use-canvas-context.md): Primitive context helper for CanvasRoot descendants.
- [useLayerTree](https://openpencil.dev/programmable/sdk/api/advanced/use-layer-tree.md): Primitive context helper for LayerTreeRoot descendants.
- [useToolbar](https://openpencil.dev/programmable/sdk/api/advanced/use-toolbar.md): Primitive context helper for ToolbarRoot descendants.
- [usePropertyList](https://openpencil.dev/programmable/sdk/api/advanced/use-property-list.md): Primitive context helper for PropertyListRoot descendants.
- [useScrubInput](https://openpencil.dev/programmable/sdk/api/advanced/use-scrub-input.md): Primitive context helper for ScrubInputRoot descendants.

### Overview

- [Automation](https://openpencil.dev/programmable.md): AI chat, CLI, JSX renderer, MCP server, and other automation surfaces built on the OpenPencil editor engine.
- [CLI Reference](https://openpencil.dev/reference/cli.md): Complete reference for all openpencil commands, options, and flags.
- [Inspecting Files](https://openpencil.dev/programmable/cli/inspecting.md): Browse node trees, search by name or type, and dig into properties from the terminal.
- [Exporting](https://openpencil.dev/programmable/cli/exporting.md): Export document content to PNG, JPG, WEBP, SVG, `.fig`, or JSX, and convert between document formats.
- [Analyzing Designs](https://openpencil.dev/programmable/cli/analyzing.md): Audit colors, typography, spacing, and repeated patterns in .fig files.
- [Scripting](https://openpencil.dev/programmable/cli/scripting.md): Execute JavaScript with a Figma-compatible Plugin API to query, batch-modify, and generate designs.
- [JSX Renderer](https://openpencil.dev/programmable/jsx-renderer.md): Create designs with JSX — the syntax LLMs already know from millions of React components.
- [MCP Server](https://openpencil.dev/programmable/mcp-server.md): Connect Claude Code, Cursor, Windsurf, and other MCP clients to OpenPencil for AI-assisted design inspection and editing.
- [AI Chat](https://openpencil.dev/programmable/ai-chat.md): Built-in AI assistant with 90+ tools for creating and modifying designs.
- [Collaboration](https://openpencil.dev/programmable/collaboration.md): Real-time collaborative editing via P2P WebRTC — no server, no account.

### Reference

- [Keyboard Shortcuts](https://openpencil.dev/reference/keyboard-shortcuts.md): Figma-compatible keyboard shortcut reference for OpenPencil tools, editing commands, view controls, and layer actions.
- [CLI Reference](https://openpencil.dev/reference/cli.md): Complete reference for all openpencil commands, options, and flags.
- [Node Types](https://openpencil.dev/reference/node-types.md): Reference for OpenPencil scene graph node types, Figma Kiwi schema mappings, and supported engine node behavior.
- [Scene Graph](https://openpencil.dev/reference/scene-graph.md): Technical reference for OpenPencil's flat scene graph, node lookup, tree relationships, mutations, events, and traversal APIs.
- [File Format](https://openpencil.dev/reference/file-format.md): Technical reference for OpenPencil .fig and .pen document formats, Kiwi binary structure, import pipeline, and export behavior.

### Guide

- [Getting Started](https://openpencil.dev/guide/getting-started.md)
- [Features](https://openpencil.dev/guide/features.md)
- [Architecture](https://openpencil.dev/guide/architecture.md)
- [Tech Stack](https://openpencil.dev/guide/tech-stack.md)
- [Open Pencil vs Penpot: Architecture & Performance Comparison](https://openpencil.dev/guide/comparison.md)
- [Figma Feature Matrix](https://openpencil.dev/guide/figma-comparison.md)

### Development

- [Contributing](https://openpencil.dev/development/contributing.md)
- [Testing](https://openpencil.dev/development/testing.md)
- [Roadmap](https://openpencil.dev/development/roadmap.md): OpenPencil product roadmap and Figma compatibility tracking.

### Other

- [Locale APIs](https://openpencil.dev/programmable/sdk/api/advanced/locale-apis.md): Lower-level locale stores and metadata exported by @open-pencil/vue.
- [Renderer Profiler](https://openpencil.dev/development/renderer-profiler.md): Use the CanvasKit renderer profiler HUD and frame capture tools to investigate rendering performance.
- [useI18n](https://openpencil.dev/programmable/sdk/api/composables/use-i18n.md): Read localized OpenPencil UI messages and switch the active SDK locale.
- [useOkHCL](https://openpencil.dev/programmable/sdk/api/advanced/use-okhcl.md): Work with RGBA and OkHCL color models for fills and strokes.
- [User Guide](https://openpencil.dev/user-guide.md): Learn how to use OpenPencil — canvas navigation, drawing, text, components, auto-layout, and more.
- [useVariables](https://openpencil.dev/programmable/sdk/api/advanced/use-variables.md): Read and mutate variable collections, variables, and variable values.
- [useVariablesDialogState](https://openpencil.dev/programmable/sdk/api/advanced/use-variables-dialog-state.md): Manage variables dialog editing state on top of useVariables().
- [useVariablesTable](https://openpencil.dev/programmable/sdk/api/advanced/use-variables-table.md): Build TanStack Table column definitions for OpenPencil variables UIs.
- [useViewportKind](https://openpencil.dev/programmable/sdk/api/advanced/use-viewport-kind.md): Read coarse mobile and desktop viewport flags for responsive editor shells.
- [Vector Conversion](https://openpencil.dev/development/vector-conversion.md): Development notes for OpenPencil boolean operations, flattening, text outlines, stroke outlines, and vector geometry conversion.
- [Vector Object Editing](https://openpencil.dev/user-guide/vector-edit.md): How to edit vector path geometry: anchors, bezier handles, modifiers, and Pen tool actions in edit mode.