### Install Dependencies and Run Development Server Source: https://openpencil.dev/development/contributing Installs project dependencies and starts the editor development server. The editor will be accessible at localhost:1420. ```sh bun install bun run dev # Editor at localhost:1420 bun run docs:dev # Docs at localhost:5173 ``` -------------------------------- ### Basic useCanvasInput Setup Source: https://openpencil.dev/programmable/sdk/api/composables/use-canvas-input A basic example demonstrating how to set up useCanvasInput with useCanvas, passing canvas hit-test properties. ```typescript const canvas = useCanvas(canvasRef, editor) useCanvasInput( canvasRef, editor, canvas.hitTestSectionTitle, canvas.hitTestComponentLabel, canvas.hitTestFrameTitle, ) ``` -------------------------------- ### Develop Desktop App on Linux Source: https://openpencil.dev/guide/getting-started Starts the development version of the desktop app on Linux after system dependencies are installed. ```sh bun run tauri dev ``` -------------------------------- ### Install Open Pencil SDK Packages Source: https://openpencil.dev/programmable/sdk/getting-started Install the core, Vue, and CanvasKit WASM packages using bun. ```bash bun add @open-pencil/core @open-pencil/vue canvaskit-wasm ``` -------------------------------- ### Install OpenPencil CLI Source: https://openpencil.dev/programmable/cli/inspecting Install the OpenPencil CLI globally using npm or via Homebrew. ```sh npm install -g @open-pencil/cli # or brew install open-pencil/tap/open-pencil ``` -------------------------------- ### Run Documentation Development Server Source: https://openpencil.dev/guide/getting-started Starts a development server for the documentation site. ```sh bun run docs:dev ``` -------------------------------- ### Clone Repository and Install Dependencies Source: https://openpencil.dev/guide/getting-started Clones the OpenPencil repository and installs project dependencies using Bun. ```sh git clone https://github.com/open-pencil/open-pencil.git cd open-pencil bun install ``` -------------------------------- ### Develop Desktop App on macOS Source: https://openpencil.dev/guide/getting-started Installs the Tauri CLI and starts the development version of the desktop app on macOS. ```sh xcode-select --install cargo install tauri-cli --version "^2" bun run tauri dev ``` -------------------------------- ### Start OpenPencil HTTP MCP Server Source: https://openpencil.dev/programmable/mcp-server Start the OpenPencil MCP server using the HTTP transport. ```sh openpencil-mcp-http ``` -------------------------------- ### Install CLI Source: https://openpencil.dev/guide/features Install the OpenPencil CLI globally using npm or bun. This provides access to command-line tools for .fig file manipulation. ```sh npm install -g @open-pencil/cli ``` ```sh bun add -g @open-pencil/cli ``` -------------------------------- ### Install OpenPencil via Homebrew Source: https://openpencil.dev/guide/getting-started Installs the latest signed release for macOS (Apple Silicon and Intel) using Homebrew. ```sh brew install open-pencil/tap/open-pencil ``` -------------------------------- ### Install MCP Server Source: https://openpencil.dev/guide/features Install the MCP server globally using npm. This enables headless read/write operations for .fig files. ```sh npm install -g @open-pencil/mcp ``` -------------------------------- ### Develop Desktop App on Windows Source: https://openpencil.dev/guide/getting-started Sets up the Rust toolchain and starts the development version of the desktop app on Windows. Requires Visual Studio Build Tools. ```sh rustup default stable-msvc bun run tauri dev ``` -------------------------------- ### Install Desktop App Dependencies on Linux Source: https://openpencil.dev/guide/getting-started Installs necessary system dependencies for building the desktop app on Debian/Ubuntu-based Linux distributions. ```sh sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \ libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev ``` -------------------------------- ### Run Development Server Source: https://openpencil.dev/guide/getting-started Starts the development server with Hot Module Replacement (HMR). Opens the editor at http://localhost:1420. ```sh bun run dev ``` -------------------------------- ### Initialize useMenuModel Source: https://openpencil.dev/programmable/sdk/api/composables/use-menu-model Initialize the useMenuModel composable to access its menu models. This example shows how to get the appMenu, canvasMenu, and selectionLabelMenu. ```typescript const { appMenu, canvasMenu, selectionLabelMenu } = useMenuModel() ``` -------------------------------- ### Basic Locale Switching Example Source: https://openpencil.dev/programmable/sdk/api/composables/use-i18n Demonstrates how to use useI18n to display localized menu items and allow users to switch locales via a select dropdown. ```vue ``` -------------------------------- ### XPath Queries: By Type Source: https://openpencil.dev/programmable/cli/inspecting Examples of querying nodes by their specific types like TEXT, COMPONENT, or INSTANCE. ```sh open-pencil query design.fig "//TEXT" # All text nodes ``` ```sh open-pencil query design.fig "//COMPONENT" # All components ``` ```sh open-pencil query design.fig "//INSTANCE" # All instances ``` -------------------------------- ### Basic useMenuModel Initialization Source: https://openpencil.dev/programmable/sdk/api/composables/use-menu-model A minimal example of initializing useMenuModel to obtain the canvasMenu. Render the 'canvasMenu.value' into your context menu component. ```typescript const { canvasMenu } = useMenuModel() ``` -------------------------------- ### Import useStrokeControls Source: https://openpencil.dev/programmable/sdk/api/composables/use-stroke-controls Import the useStrokeControls composable from the OpenPencil Vue library. This is the initial setup required to use its functionalities. ```typescript import { useStrokeControls } from '@open-pencil/vue' const strokes = useStrokeControls() ``` -------------------------------- ### Fills Panel Example Source: https://openpencil.dev/programmable/sdk/guides/property-panels Shows how to use PropertyListRoot and useFillControls to manage a list of fill properties. It includes functionality to display existing fills, remove them, and add new default fills. ```vue ``` -------------------------------- ### Position Panel Example Source: https://openpencil.dev/programmable/sdk/guides/property-panels Demonstrates how to use the usePosition composable to create a panel for controlling x, y, width, and height properties. Input values are bound and updated using updateProp. ```vue ``` -------------------------------- ### Import usePageList Composable Source: https://openpencil.dev/programmable/sdk/api/composables/use-page-list Import the usePageList composable from the OpenPencil Vue library. This is the initial setup required to use its functionalities. ```typescript import { usePageList } from '@open-pencil/vue' const pageList = usePageList() ``` -------------------------------- ### JSX Component Output Example Source: https://openpencil.dev/programmable/cli/exporting An example of the JSX output generated with the `--style tailwind` option, showcasing a card component with Tailwind utility classes. ```html

Card Title

Description text

``` -------------------------------- ### List All Pages in Document Source: https://openpencil.dev/programmable/cli/inspecting Get a list of all pages contained within the design file. ```sh open-pencil pages design.fig ``` -------------------------------- ### Render a Card Component with JSX Source: https://openpencil.dev/programmable/jsx-renderer Demonstrates creating a UI card with nested text elements using JSX. This example showcases basic layout, typography, and styling props. ```jsx Card Title Description text ``` -------------------------------- ### Launch Figma with Debugging Port Source: https://openpencil.dev/development/testing Start the Figma desktop application with the Chrome DevTools Protocol debugging port enabled. This is a prerequisite for Figma CDP reference tests. ```sh bun run figma:debug ``` -------------------------------- ### Basic Vue Component with Canvas and Selection Display Source: https://openpencil.dev/programmable/sdk/getting-started A complete example demonstrating how to set up a canvas, use editor composables, and display the selected item count. The useCanvas composable includes an optional onReady callback. ```vue ``` -------------------------------- ### CSS Grid Track Sizing Example Source: https://openpencil.dev/user-guide/auto-layout Defines three columns for a grid layout: two flexible columns using fractional units and one fixed-size column in the center. This is useful for dashboard or gallery layouts. ```css 1fr 200px 1fr ``` -------------------------------- ### Basic ScrubInputDisplay Usage Source: https://openpencil.dev/programmable/sdk/api/components/scrub-input-display This example shows how to use ScrubInputDisplay within a ScrubInputRoot. It renders the display when the input is not in edit mode. Ensure ScrubInputRoot is correctly bound to a model value. ```vue ``` -------------------------------- ### JSX Design Diff Example Source: https://openpencil.dev/programmable/jsx-renderer Illustrates a visual diff between two versions of a JSX design. This highlights how changes in design are represented as readable code diffs. ```diff - Old Title + New Title Description ``` -------------------------------- ### Get current page name in live app mode Source: https://openpencil.dev/programmable/cli/scripting Execute a script without specifying a file path to operate on the currently open document in the desktop app. Requires the app to be running with a document open. ```sh open-pencil eval -c "return figma.currentPage.name" ``` -------------------------------- ### Build Documentation Site Source: https://openpencil.dev/guide/getting-started Generates a static build of the documentation site. ```sh bun run docs:build ``` -------------------------------- ### Build for Production Source: https://openpencil.dev/guide/getting-started Creates a production build of the application. ```sh bun run build ``` -------------------------------- ### Run OpenPencil MCP Server from Source (Bun) Source: https://openpencil.dev/programmable/mcp-server Configure an MCP client to run the OpenPencil MCP server directly from source using Bun. ```json { "mcpServers": { "open-pencil": { "command": "bun", "args": ["/path/to/open-pencil/packages/mcp/src/stdio.ts"] } } } ``` -------------------------------- ### Register MCP Package with Claude Code Source: https://openpencil.dev/programmable/mcp-server Install the MCP package and register it with Claude Code for use. ```sh npm install -g @open-pencil/mcp claude mcp add --scope user open-pencil -- openpencil-mcp ``` -------------------------------- ### Create and configure a frame Source: https://openpencil.dev/programmable/cli/scripting Create a new frame node, set its name, size, and layout mode using JavaScript. ```sh open-pencil eval design.fig -c " const frame = figma.createFrame() frame.name = 'Card' frame.resize(300, 200) frame.layoutMode = 'VERTICAL' frame.itemSpacing = 12 return { id: frame.id, name: frame.name } " ``` -------------------------------- ### Build Desktop App for Distribution Source: https://openpencil.dev/guide/getting-started Builds the desktop application for the current platform or a specified target. ```sh bun run tauri build bun run tauri build --target universal-apple-darwin ``` -------------------------------- ### Import and Use useVariablesTable Source: https://openpencil.dev/programmable/sdk/api/advanced/use-variables-table Import the useVariablesTable composable from the OpenPencil Vue SDK and call it with options to get table columns. ```typescript import { useVariablesTable } from '@open-pencil/vue' const { columns } = useVariablesTable(options) ``` -------------------------------- ### Create an Editor Instance Source: https://openpencil.dev/programmable/sdk/getting-started Instantiate the editor with specified width and height using createEditor from the core package. ```typescript import { createEditor } from '@open-pencil/core/editor' const editor = createEditor({ width: 1200, height: 800, }) ``` -------------------------------- ### Run OpenPencil MCP Server from Source (Node.js/npx) Source: https://openpencil.dev/programmable/mcp-server Configure an MCP client to run the OpenPencil MCP server directly from source using Node.js and npx with tsx. ```json { "mcpServers": { "open-pencil": { "command": "npx", "args": ["tsx", "/path/to/open-pencil/packages/mcp/src/stdio.ts"] } } } ``` -------------------------------- ### Get Document Information Source: https://openpencil.dev/programmable/cli/inspecting Retrieve a summary of the design file, including page count, node count, fonts, and file size. ```sh open-pencil info design.fig ``` -------------------------------- ### Penpot Architecture Diagram Source: https://openpencil.dev/guide/comparison Depicts Penpot's distributed client-server architecture, requiring Docker Compose and involving multiple services including a ClojureScript frontend, Clojure backend, PostgreSQL, Redis (Valkey), MinIO, and an exporter using headless Chromium. ```text ┌───────────────────────────────────────────────────────┐ │ Docker Compose │ │ ┌──────────────┐ ┌─────────────┐ ┌──────────────┐ │ │ │ Frontend │ │ Backend │ │ Exporter │ │ │ │ ClojureScript│ │ Clojure │ │ (Chromium) │ │ │ │ shadow-cljs │ │ JVM │ │ │ │ │ │ ┌─────────┐ │ │ ┌────────┐ │ └──────────────┘ │ │ │ │render- │ │ │ │Postgres│ │ │ │ │ │wasm │ │ │ │Valkey │ │ ┌──────────────┐ │ │ │ │(Rust→ │ │ │ │ MinIO │ │ │ MCP │ │ │ │ │ Skia │ │ │ │ │ │ │ Server │ │ │ │ │ WASM) │ │ │ └────────┘ │ └──────────────┘ │ │ │ └─────────┘ │ │ │ │ │ └──────────────┘ └─────────────┘ │ └───────────────────────────────────────────────────────┘ ``` -------------------------------- ### Track Cursor Movement with useCanvasInput Source: https://openpencil.dev/programmable/sdk/api/composables/use-canvas-input Example of using useCanvasInput to track cursor movement within the canvas space by providing a callback function. ```typescript useCanvasInput( canvasRef, editor, hitTestSectionTitle, hitTestComponentLabel, hitTestFrameTitle, (cx, cy) => { console.log(cx, cy) }, ) ``` -------------------------------- ### Access Editor Commands and Selection State Source: https://openpencil.dev/programmable/sdk/getting-started Import and use useEditorCommands and useSelectionState composables from @open-pencil/vue to interact with the editor and get selection information. ```typescript import { useEditorCommands, useSelectionState } from '@open-pencil/vue' const selection = useSelectionState() const commands = useEditorCommands() ``` -------------------------------- ### OpenPencil System Overview Diagram Source: https://openpencil.dev/guide/architecture Visual representation of the OpenPencil architecture, showing the interaction between the Editor (Web), Core Engine, File Format Layer, MCP Server, and P2P Collaboration modules. ```mermaid graph TB subgraph Tauri["Tauri v2 Shell"] subgraph Editor["Editor (Web)"] UI["Vue 3 UI
Toolbar · Panels · Properties
Layers · Color Picker"] Skia["Skia CanvasKit (WASM, 7MB)
Vector rendering · Text shaping
Effects · Export"] subgraph Core["Core Engine (TS)"] SG[SceneGraph] --- Layout[Layout - Yoga] SG --- Selection Undo[Undo/Redo] --- Constraints Constraints --- HitTest[Hit Testing] end subgraph FileFormat["File Format Layer"] FigIO[".fig import/export"] --- Kiwi[Kiwi codec] Kiwi --- SVG[SVG export] end end MCP["MCP Server (90 tools, stdio+HTTP)"] Collab["P2P Collab (Trystero + Yjs)"] end ``` -------------------------------- ### useViewportKind Source: https://openpencil.dev/programmable/sdk/api/advanced/use-viewport-kind Returns simple responsive flags used by the OpenPencil editor UI. This composable is useful when your shell requires a light abstraction over breakpoints, rather than directly integrating useBreakpoints. ```APIDOC ## useViewportKind() ### Description Provides simple responsive flags for the OpenPencil editor UI, abstracting breakpoint logic for shell implementations. ### Returns - **isMobile** (boolean) - Flag indicating if the viewport is considered mobile. - **isDesktop** (boolean) - Flag indicating if the viewport is considered desktop. ### Usage Example ```ts import { useViewportKind } from '@open-pencil/vue' const { isMobile, isDesktop } = useViewportKind() ``` ``` -------------------------------- ### Process JSON Output with jq Source: https://openpencil.dev/programmable/cli/inspecting Utilize the `--json` flag to get machine-readable output and pipe it to tools like `jq` for further processing. ```sh open-pencil tree design.fig --json | jq '.[] | .name' ``` -------------------------------- ### Select Stroke Side Source: https://openpencil.dev/programmable/sdk/api/composables/use-stroke-controls Limit a stroke to a single side using the selectSide method. This example demonstrates selecting the 'TOP' side for the active node. ```typescript strokes.selectSide('TOP', activeNode) ``` -------------------------------- ### Basic Page List Rendering with PageListRoot Source: https://openpencil.dev/programmable/sdk/api/components/page-list-root Demonstrates how to use PageListRoot to render a list of pages and handle page switching. It provides access to pages, the current page ID, and a switchPage function via slots. ```vue ``` -------------------------------- ### Import useOkHCL Source: https://openpencil.dev/programmable/sdk/api/advanced/use-okhcl Import the useOkHCL composable from the OpenPencil SDK. This is the initial step to access OkHCL color functionalities. ```typescript import { useOkHCL } from '@open-pencil/vue' const okhcl = useOkHCL() ``` -------------------------------- ### Using GradientEditorBar in Vue Source: https://openpencil.dev/programmable/sdk/api/components/gradient-editor-bar Example of how to integrate the GradientEditorBar component in a Vue.js application. It demonstrates binding props and listening to custom events for managing gradient stops. ```vue ``` -------------------------------- ### Basic useCanvas with Options Source: https://openpencil.dev/programmable/sdk/api/composables/use-canvas Configure the useCanvas composable with options to show rulers and log a message when the renderer is ready. ```vue ``` -------------------------------- ### useEditor Source: https://openpencil.dev/llms.txt Accesses the current injected OpenPencil editor instance within a Vue component. This composable is used to get a reference to the editor that was provided using `provideEditor`. ```APIDOC ## useEditor ### Description Access the current injected OpenPencil editor instance. ### Method Not applicable (Vue Composable) ### Endpoint Not applicable (Vue Composable) ### Parameters None. ### Request Example ```javascript // In your Vue setup function: import { useEditor } from '@open-pencil/vue'; const editor = useEditor(); ``` ### Response Returns the injected OpenPencil editor instance. ``` -------------------------------- ### CLI Control Live Editor Source: https://openpencil.dev/guide/features Control the live OpenPencil editor via RPC using the CLI. This allows for real-time manipulation of the current document. ```sh open-pencil tree ``` -------------------------------- ### Using GradientEditorRoot in Vue Source: https://openpencil.dev/programmable/sdk/api/components/gradient-editor-root Example of how to integrate GradientEditorRoot into a Vue application. It binds a fill object and listens for updates, passing the slot props to a custom UI component. ```vue ``` -------------------------------- ### Basic PropertyListRoot Usage Source: https://openpencil.dev/programmable/sdk/api/components/property-list-root Demonstrates how to use PropertyListRoot to manage a list of items, allowing for removal of individual items and addition of new ones. It requires the 'fills' prop key and provides access to items, add, and remove functions via slots. ```vue
``` -------------------------------- ### Run Figma CDP Reference Tests Source: https://openpencil.dev/development/testing Connect to a running Figma instance via the Chrome DevTools Protocol and capture reference screenshots for pixel-perfect comparison. ```sh bun run test:figma ``` -------------------------------- ### Import and Initialize useCanvas Source: https://openpencil.dev/programmable/sdk/api/composables/use-canvas Import necessary functions and initialize the useCanvas composable with a canvas reference and the editor instance. ```typescript import { ref } from 'vue' import { useCanvas, useEditor } from '@open-pencil/vue' const canvasRef = ref(null) const editor = useEditor() useCanvas(canvasRef, editor) ``` -------------------------------- ### Basic useEditor Usage in Vue Source: https://openpencil.dev/programmable/sdk/api/composables/use-editor Demonstrates how to use the useEditor composable within a Vue component's script setup to access editor state, such as the current page ID. ```vue ``` -------------------------------- ### Live App Screenshot Source: https://openpencil.dev/programmable/cli/exporting Take a screenshot of the current canvas in the running OpenPencil application by omitting the file argument. Exports as PNG by default. ```sh open-pencil export -f png # screenshot the current canvas ``` -------------------------------- ### Update Export Scale and Format Source: https://openpencil.dev/programmable/sdk/api/composables/use-export Update the scale and format for a specific export preset using its index. This example changes the first preset (index 0) to 2x scale and WEBP format. ```typescript exportState.updateScale(0, 2) exportState.updateFormat(0, 'WEBP') ``` -------------------------------- ### CLI Screenshot Live Canvas Source: https://openpencil.dev/guide/features Take a screenshot of the live OpenPencil canvas using the CLI. This is useful for quick previews or documentation. ```sh open-pencil export -f png ``` -------------------------------- ### OpenPencil Engine NodeType Union Source: https://openpencil.dev/reference/node-types The engine's NodeType union uses simplified names, with some differing from the Kiwi schema. For example, 'COMPONENT' maps to Kiwi 'SYMBOL' and 'POLYGON' maps to Kiwi 'REGULAR_POLYGON'. ```typescript type NodeType = | 'CANVAS' | 'FRAME' | 'RECTANGLE' | 'ROUNDED_RECTANGLE' | 'ELLIPSE' | 'TEXT' | 'LINE' | 'STAR' | 'POLYGON' | 'VECTOR' | 'BOOLEAN_OPERATION' | 'GROUP' | 'SECTION' | 'COMPONENT' | 'COMPONENT_SET' | 'INSTANCE' | 'CONNECTOR' | 'SHAPE_WITH_TEXT' ``` -------------------------------- ### Operate on Live App Canvas Source: https://openpencil.dev/programmable/cli/inspecting Interact with the currently open document in the OpenPencil desktop application by omitting the file argument. ```sh open-pencil tree # inspect the live document ``` ```sh open-pencil eval -c "..." # query the editor ``` -------------------------------- ### Import useFillControls Source: https://openpencil.dev/programmable/sdk/api/composables/use-fill-controls Import the useFillControls composable from the OpenPencil Vue SDK. This is the initial step to using its features. ```typescript import { useFillControls } from '@open-pencil/vue' const fills = useFillControls() ``` -------------------------------- ### Build a "move to page" submenu Source: https://openpencil.dev/programmable/sdk/api/composables/use-editor-commands This snippet shows how to construct a submenu for moving the editor selection to different pages. It utilizes `otherPages` to get a list of available pages and `moveSelectionToPage` to perform the action. ```APIDOC ## moveSelectionToPage ### Description Moves the current editor selection to a specified page. ### Method `moveSelectionToPage(pageId: string)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters * **pageId** (string) - Required - The ID of the target page to move the selection to. ### Request Example ```ts import { useEditorCommands } from '@open-pencil/vue' const { otherPages, moveSelectionToPage } = useEditorCommands() const items = otherPages.value.map(page => ({ label: page.name, action: () => moveSelectionToPage(page.id), })) ``` ### Response This method does not return a value directly, but performs an action within the editor. ``` -------------------------------- ### Import useAppearance Composable Source: https://openpencil.dev/programmable/sdk/api/composables/use-appearance Import the useAppearance composable from the OpenPencil Vue SDK. This is the initial step to access its functionalities. ```typescript import { useAppearance } from '@open-pencil/vue' const appearance = useAppearance() ``` -------------------------------- ### Import useEditor Source: https://openpencil.dev/programmable/sdk/api/composables/use-editor Import the useEditor composable from the OpenPencil Vue SDK. This is the first step before calling it. ```typescript import { useEditor } from '@open-pencil/vue' const editor = useEditor() ``` -------------------------------- ### Basic Vue Component Usage Source: https://openpencil.dev/programmable/sdk/api/composables/provide-editor In a Vue component, import provideEditor, define props for the editor, and then provide the editor instance to the subtree. ```vue ``` -------------------------------- ### Using FillPickerRoot in Vue Source: https://openpencil.dev/programmable/sdk/api/components/fill-picker-root Example of using FillPickerRoot in a Vue component. It binds the 'fill' prop and listens for the 'update' event. The default slot is used to render category information, conversion buttons, and a custom fill editor. ```vue ``` -------------------------------- ### OpenPencil .fig File Import Pipeline Source: https://openpencil.dev/reference/file-format Describes the sequence of operations for importing a .fig file, from parsing the header to rendering the scene graph. ```text .fig file → parse header → decompress Zstd → decode Kiwi schema → decode message → NodeChange[] → build SceneGraph → resolve blob refs → render on canvas ``` -------------------------------- ### Using GradientEditorStop with a Custom Row Component Source: https://openpencil.dev/programmable/sdk/api/components/gradient-editor-stop This example demonstrates how to use the GradientEditorStop component and pass its slot props to a custom component for rendering a gradient stop row. It shows how to bind the context provided by the slot to a child component. ```vue ``` -------------------------------- ### provideEditor Source: https://openpencil.dev/llms.txt Provides an OpenPencil editor instance to a Vue subtree using injection. This is typically used at the root of your application or a specific section that requires editor functionality. ```APIDOC ## provideEditor ### Description Provide an OpenPencil editor instance to a Vue subtree using injection. ### Method Not applicable (Vue Composable) ### Endpoint Not applicable (Vue Composable) ### Parameters None explicitly documented for direct invocation. ### Request Example ```javascript // In your Vue setup function: import { provideEditor } from '@open-pencil/vue'; const editor = provideEditor(); ``` ### Response Provides an editor instance to the Vue context. ``` -------------------------------- ### Get JSON Output for Color Analysis Source: https://openpencil.dev/programmable/cli/analyzing All analyze commands support the `--json` flag for machine-readable output. This allows the results to be piped into tools like `jq` or used in CI checks for enforcing design token budgets. ```sh open-pencil analyze colors design.fig --json ``` -------------------------------- ### Import and Provide Editor Source: https://openpencil.dev/programmable/sdk/api/composables/provide-editor Import the provideEditor composable and call it with an editor instance. ```typescript import { provideEditor } from '@open-pencil/vue' provideEditor(editor) ``` -------------------------------- ### Export Design to JSX Source: https://openpencil.dev/programmable/jsx-renderer Shows how to export designs from a file into JSX format using the OpenPencil CLI. Supports different style outputs like Tailwind CSS. ```sh open-pencil export design.fig -f jsx # OpenPencil format ``` ```sh open-pencil export design.fig -f jsx --style tailwind # Tailwind classes ``` -------------------------------- ### Import useTypography Composable Source: https://openpencil.dev/programmable/sdk/api/composables/use-typography Import the useTypography composable from the OpenPencil Vue SDK. This is the initial step to access its functionalities. ```typescript import { useTypography } from '@open-pencil/vue' const typography = useTypography() ``` -------------------------------- ### useEditor() Source: https://openpencil.dev/programmable/sdk/api/composables/use-editor Returns the current injected OpenPencil editor instance. This is the main entry point for accessing editor functionalities and state. ```APIDOC ## useEditor() ### Description Retrieves the current OpenPencil editor instance. This composable must be called within a component that is a descendant of a `provideEditor` call. ### Method Signature ```typescript function useEditor(): Editor ``` ### Usage Example ```typescript import { useEditor } from '@open-pencil/vue' const editor = useEditor() // Now you can use the editor instance, e.g.: // const selectedNodes = editor.getSelectedNodes() // editor.zoomToFit() ``` ### Error Behavior If `useEditor()` is called outside of an editor provider tree, it will throw an error indicating that the editor context is missing. ``` -------------------------------- ### useToolbarState Source: https://openpencil.dev/programmable/sdk/api/advanced Manages the state of the toolbar in the Open Pencil SDK. ```APIDOC ## useToolbarState ### Description Manages the state of the toolbar. ### Method N/A (SDK function) ### Endpoint N/A (SDK function) ### Parameters N/A (SDK function) ### Request Example N/A (SDK function) ### Response N/A (SDK function) ``` -------------------------------- ### Add OpenPencil Skills to AI Agent Source: https://openpencil.dev/programmable/mcp-server Integrate OpenPencil tools into your AI coding agent by adding its skills. ```sh npx skills add open-pencil/skills@open-pencil ``` -------------------------------- ### Basic ColorPickerRoot Usage Source: https://openpencil.dev/programmable/sdk/api/components/color-picker-root Demonstrates how to use ColorPickerRoot with custom trigger and content templates. The trigger displays a color swatch, and the content uses a custom color editor component. ```vue ``` -------------------------------- ### Import useLayout Composable Source: https://openpencil.dev/programmable/sdk/api/composables/use-layout Import the useLayout composable from the OpenPencil Vue SDK. ```typescript import { useLayout } from '@open-pencil/vue' const layout = useLayout() ```