# 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, ruler guides, snapping, and distance measurements 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. - [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. ### 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. - [PropertySection](https://openpencil.dev/programmable/sdk/api/components/property-section.md): Headless collapsible anatomy for property-panel sections. - [PropertyGrid](https://openpencil.dev/programmable/sdk/api/components/property-grid.md): Headless field-grid and action-rail anatomy for property panels. - [SegmentedControl](https://openpencil.dev/programmable/sdk/api/components/segmented-control.md): Accessible selection and action-only segmented controls. - [PropertyList](https://openpencil.dev/programmable/sdk/api/components/property-list-root.md): Precisely typed headless list anatomy for fills, strokes, and effects. - [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 with interaction lifecycle events. - [ColorInputRoot](https://openpencil.dev/programmable/sdk/api/components/color-input-root.md): Headless color input helper with hex parsing and update helpers. - [ChannelSlider](https://openpencil.dev/programmable/sdk/api/components/channel-slider.md): Accessible scalar channel slider for OkHCL controls. - [FillRoot](https://openpencil.dev/programmable/sdk/api/components/fill-root.md): Headless fill category state and conversion actions. - [FillSwatch](https://openpencil.dev/programmable/sdk/api/components/fill-swatch.md): Binding-aware semantic preview for solid, gradient, and image fills. - [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): Accessible primitive for a selected or draggable gradient stop. - [NumberField](https://openpencil.dev/programmable/sdk/api/components/number-field.md): Headless numeric field primitives with scrubbing, expressions, and keyboard stepping. - [BindableValue](https://openpencil.dev/programmable/sdk/api/components/bindable-value.md): Provider-driven value binding primitives for custom editor controls. - [LayoutControlsRoot](https://openpencil.dev/programmable/sdk/api/components/layout-controls-root.md): Headless root primitive for auto-layout and sizing controls. - [ConstraintsControlRoot](https://openpencil.dev/programmable/sdk/api/components/constraints-control-root.md): Headless constraint state and actions for frame children. - [AppearanceControlsRoot](https://openpencil.dev/programmable/sdk/api/components/appearance-controls-root.md): Headless root primitive for opacity, visibility, blend mode, corner radius, and smoothing 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. - [useConstraints](https://openpencil.dev/programmable/sdk/api/composables/use-constraints.md): Read and update resize constraints for eligible frame children. - [useComponentProperties](https://openpencil.dev/programmable/sdk/api/composables/use-component-properties.md): Read and edit variant, text, boolean, and instance-swap properties on instances. - [useAppearance](https://openpencil.dev/programmable/sdk/api/composables/use-appearance.md): Control visibility, opacity, corner radius, and smoothing for the current selection. - [useSharedStyleBinding](https://openpencil.dev/programmable/sdk/api/composables/use-shared-style-binding.md): Apply and detach local fill, stroke, text, effect, and grid styles. - [useColorModel](https://openpencil.dev/programmable/sdk/api/composables/use-color-model.md): Build precise reactive color controls across RGB, HSL, HSB, and OkHCL. - [useTypography](https://openpencil.dev/programmable/sdk/api/composables/use-typography.md): Read and update font, alignment, case, truncation, and OpenType features 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 state and actions for alignment, sides, caps, joins, and miter limits. - [useEffectsControls](https://openpencil.dev/programmable/sdk/api/composables/use-effects-controls.md): Effects-panel helpers for shadows, blurs, expansion state, and scrub/commit flows. - [useMask](https://openpencil.dev/programmable/sdk/api/composables/use-mask.md): Read and update mask state for the selected node. - [useDocumentWorkspace](https://openpencil.dev/programmable/sdk/api/composables/use-document-workspace.md): Manage document lists, refreshes, lazy previews, and workspace events. - [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. - [useI18n](https://openpencil.dev/programmable/sdk/api/composables/use-i18n.md): Read localized OpenPencil UI messages and switch the active SDK locale. ##### 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. - [useColorBindingProvider](https://openpencil.dev/programmable/sdk/api/advanced/use-color-binding-provider.md): OpenPencil COLOR variable provider for BindableValue fields. - [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. - [useNumberField](https://openpencil.dev/programmable/sdk/api/advanced/use-number-field.md): Context helper for custom NumberField descendants. - [useOkHCL](https://openpencil.dev/programmable/sdk/api/advanced/use-okhcl.md): Persist OkHCL intent for selected node fills and strokes. - [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. - [Locale APIs](https://openpencil.dev/programmable/sdk/api/advanced/locale-apis.md): Lower-level locale stores and metadata exported by @open-pencil/vue. - [useViewportKind](https://openpencil.dev/programmable/sdk/api/advanced/use-viewport-kind.md): Read coarse mobile and desktop viewport flags for responsive editor shells. ### 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 images, PDF, PowerPoint, `.fig`, JSX, or HTML, with font-substitution policies for raster and PDF output. - [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 editable designs using the same declarative authoring library as OpenPencil agents. - [Native JavaScript APIs](https://openpencil.dev/programmable/native-api.md): Find OpenPencil's public document, editor, layout, and design-authoring APIs. - [OpenPencil design authoring](https://openpencil.dev/reference/design-authoring.md) - [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. - [BYOK provider and model compatibility](https://openpencil.dev/programmable/byok-provider-compatibility.md) - [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. - [Figma Feature Matrix](https://openpencil.dev/reference/figma-compatibility.md) - [DOM/CSS mapping reference](https://openpencil.dev/reference/dom-css-mapping.md) - [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. ### Development - [Contributing](https://openpencil.dev/development/contributing.md) - [Testing](https://openpencil.dev/development/testing.md) - [Architecture](https://openpencil.dev/development/architecture.md) - [Tech Stack](https://openpencil.dev/development/tech-stack.md) - [Roadmap](https://openpencil.dev/development/roadmap.md): OpenPencil product roadmap and Figma compatibility tracking. - [Navigation performance benchmark](https://openpencil.dev/development/navigation-performance.md) - [Renderer lifecycle and ownership](https://openpencil.dev/development/renderer-lifecycle.md) - [Renderer Profiler](https://openpencil.dev/development/renderer-profiler.md): Use the CanvasKit renderer profiler HUD and frame capture tools to investigate rendering performance. - [Vector Conversion](https://openpencil.dev/development/vector-conversion.md): Development notes for OpenPencil boolean operations, flattening, text outlines, stroke outlines, and vector geometry conversion. ### Overview - [Getting Started](https://openpencil.dev/getting-started.md) - [Features](https://openpencil.dev/overview/features.md) - [Open Pencil vs Penpot: Architecture & Performance Comparison](https://openpencil.dev/overview/comparison.md) ### Other - [User Guide](https://openpencil.dev/user-guide.md): Learn how to use OpenPencil — canvas navigation, drawing, text, components, auto-layout, and more.