Danila Poyarkov a4b810620f Add Programmable docs section with CLI, JSX, MCP, AI, Collab

New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode

Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference

2026-03-08 13:22:36 +03:00

1.8 KiB

Raw Blame History

title	description
Inspecting Files	Browse node trees, search by name or type, and dig into properties from the terminal.

Inspecting Files

The CLI lets you explore .fig files without opening the editor. Every command also works on the live app — just omit the file argument.

Install

bun add -g @open-pencil/cli

Or with Homebrew:

brew install open-pencil/tap/open-pencil

Document Info

Get a quick overview — page count, total nodes, fonts used, file size:

open-pencil info design.fig

Node Tree

Print the full node hierarchy:

open-pencil tree design.fig

[0] [page] "Getting started" (0:46566)
  [0] [section] "" (0:46567)
    [0] [frame] "Body" (0:46568)
      [0] [frame] "Introduction" (0:46569)
        [0] [frame] "Introduction Card" (0:46570)
          [0] [frame] "Guidance" (0:46571)

Find Nodes

Search by type:

open-pencil find design.fig --type TEXT

Search by name:

open-pencil find design.fig --name "Button"

Both flags can be combined to narrow results further.

Node Details

Inspect all properties of a specific node by its ID:

open-pencil node design.fig --id 1:23

Pages

List all pages in the document:

open-pencil pages design.fig

Variables

List design variables and their collections:

open-pencil variables design.fig

Live App Mode

When the desktop app is running, omit the file argument — the CLI connects via RPC and operates on the live canvas:

open-pencil tree              # inspect the live document
open-pencil eval -c "..."     # query the editor

JSON Output

All commands support --json for machine-readable output — pipe into jq, feed to CI scripts, or process with other tools:

open-pencil tree design.fig --json | jq '.[] | .name'

1.8 KiB Raw Blame History