Pp Framer

<!-- GENERATED FILE — DO NOT EDIT.
     This file is a verbatim mirror of library/developer-tools/framer/SKILL.md,
     regenerated post-merge by tools/generate-skills/. Hand-edits here are
     silently overwritten on the next regen. Edit the library/ source instead.
     See the repository agent guide, section "Generated artifacts: registry.json, cli-skills/". -->

Framer — Printing Press CLI

Prerequisites: Install the CLI

This skill drives the framer-pp-cli binary. You must verify the CLI is installed before invoking any command from this skill. If it is missing, install it first:

1. Install via the Printing Press installer. It defaults binaries to $HOME/.local/bin on macOS/Linux and %LOCALAPPDATA%\Programs\PrintingPress\bin on Windows:

   npx -y @mvanhorn/printing-press-library install framer --cli-only

2. Verify: framer-pp-cli --version
3. Ensure the reported install directory is on $PATH for the agent/runtime that will invoke this skill.

If the npx install fails (no Node, offline, etc.), fall back to a direct Go install (requires Go 1.26.6 or newer). This installs into $GOPATH/bin (default $HOME/go/bin), so add that directory to $PATH instead:

go install github.com/mvanhorn/printing-press-library/library/developer-tools/framer/cmd/framer-pp-cli@latest

If --version reports "command not found" after install, the runtime cannot see the binary directory on $PATH. Do not proceed with skill commands until verification succeeds.

Framer's Server API is powerful but locked behind a JavaScript SDK with no CLI. framer-pp-cli wraps every API method with offline search, dry-run previews, multi-project management, and migration automation that turns site porting from days into hours.

How It Works (Architecture)

framer-pp-cli is a Go binary that orchestrates a Node.js framer-api subprocess — the bridge (bridge/framer-bridge.mjs) — which speaks Framer's Server API over WebSocket. Any live command (anything that touches the project: publish, changes, pages, nodes, assets, code, redirects, sync, doctor, components, collections, items, project) shells out to this bridge, so Node.js 18+ must be present at runtime. The Go-only install path (go install …) still needs Node at runtime for these live commands — only the local-store commands (snapshot, diff, dashboard, search, cms-sync, cms-validate, cms-schema-diff, styles-import, code-pull, code-push, migrate-scrape, i18n-push, redirects-generate) work fully offline against the local SQLite store.

Run framer-pp-cli doctor to verify Node, the framer-api bridge, and live connectivity in one step.

Environment Variables

Every live / bridge command reads its connection details from the environment. Set these before any command that talks to Framer, or the bridge errors out immediately.

export FRAMER_API_KEY="$(your-secret-source)"
export FRAMER_PROJECT_URL="https://framer.com/projects/<your-project>"   # required for live commands
export FRAMER_BRIDGE_TIMEOUT="5m"                                        # optional

framer-pp-cli doctor   # confirms both vars + Node bridge + connectivity

Local-store commands (snapshot, diff, dashboard, search, etc.) do not require FRAMER_PROJECT_URL once data has been synced, but the initial sync that populates the store does.

When to Use This CLI

Use framer-pp-cli when you need to automate Framer operations from scripts, CI/CD pipelines, or AI agents. Especially valuable for site migrations (importing content, uploading assets, generating redirects), multi-project management, and CMS content pipelines. Not for visual design work — use the Framer editor for that.

Unique Capabilities

These capabilities aren't available in any other tool for this API.

Local state that compounds

• snapshot — Track your Framer project's evolution over time with full structural snapshots and visual diffs

  When an agent needs to understand what changed in a project between two points in time, this is the only way

  framer-pp-cli snapshot --label 'before-redesign' && framer-pp-cli diff latest~1 latest --json

• dashboard — Query across all registered Framer projects at once — stale CMS, unpublished changes, collection health

  When an agent manages multiple client sites and needs a single command to find which projects need attention

  framer-pp-cli dashboard --json

• cms-schema-diff — Declare CMS schema in YAML and diff it against the live project — infrastructure-as-code for Framer CMS

  When an agent needs to verify CMS schema matches the expected structure before syncing content

  framer-pp-cli cms-schema-diff ./schema.yaml --json

• cms-validate — Find broken collection references, orphan items, and circular refs across your CMS

  When CMS grows past 3-4 collections, broken references become invisible — this surfaces them

  framer-pp-cli cms-validate --json

Agent-native plumbing

• cms-sync — Import CMS content from CSV/JSON/Sheets with a preview diff before committing changes

  When an agent needs to bulk-update CMS content safely without risking accidental overwrites or deletions

  framer-pp-cli cms-sync ./blog-posts.csv --collection Blog --dry-run --json

• nodes set — Set node attributes through the live Framer bridge

  When an agent needs to update canvas node attributes by ID

  framer-pp-cli nodes set abc123 --json --dry-run

• publish — Create a preview deployment, then optionally promote it to production

  When an agent needs a shareable preview URL or an explicit production deploy

  framer-pp-cli publish --json

• code-push — Edit TSX components locally in your editor, then push to Framer — eliminates copy-paste workflow

  When a developer needs to edit Framer components in their preferred editor without the copy-paste dance

  framer-pp-cli code-pull HeroSection -o hero.tsx && vim hero.tsx && framer-pp-cli code-push hero.tsx --name HeroSection

Migration automation

• migrate-scrape — Planned stub for scraping a site into a Framer migration plan

  Do not use for production migration planning yet; the command reports that this feature is planned

  framer-pp-cli migrate-scrape https://old-site.com --depth 3 --dry-run --json

• assets upload — Upload a directory of images and auto-bind them to CMS items by filename-to-slug matching

  When an agent needs to upload dozens of images and link them to the right CMS records in one operation

  framer-pp-cli assets upload --dry-run --json

• i18n-push — Planned stub for syncing translations between standard i18n formats and Framer localization

  Do not use for production translation sync yet; the command reports that this feature is planned

  framer-pp-cli i18n-push translations.csv --format csv --dry-run

• redirects-generate — Planned stub for generating redirect maps from an old sitemap

  Do not use for production redirect generation yet; the command reports that this feature is planned

  framer-pp-cli redirects-generate --old-sitemap https://old-site.com/sitemap.xml --json

• styles-import — Import CSS variables or Tailwind config as Framer color and text styles — no manual recreation

  When porting a site with an existing design system, this eliminates hours of manual style recreation

  framer-pp-cli styles-import --from tailwind.config.js --json

HTTP Transport

This CLI uses Chrome-compatible HTTP transport for browser-facing endpoints. It does not require a resident browser process for normal API calls.

Command Reference

The shipped binary exposes a bridge-flattened surface: the primary live operations are single leaf commands (no list/preview/deploy subcommands), while CMS, nodes, and a handful of others keep nested subcommands. Every command below exists in the binary — verify any of them with framer-pp-cli <command> --help.

Live / bridge commands

These talk to the Framer Server API through the Node.js bridge. They require FRAMER_API_KEY and FRAMER_PROJECT_URL.

publish — Create a preview deployment, then optionally promote to production. Single command (no preview/deploy subcommands); pass --yes to auto-deploy.

• framer-pp-cli publish — Preview, print the URL + deployment ID, prompt to deploy
• framer-pp-cli publish --yes — Non-interactive: auto-deploy to production

changes — List added, removed, and modified paths since last publish (single command, no subcommands).

• framer-pp-cli changes — Show changed paths as a table or JSON

pages — List pages from the live project (single command, no subcommands).

• framer-pp-cli pages — List all pages

nodes — Canvas node operations.

• framer-pp-cli nodes get <id> — Get a node by ID with all attributes
• framer-pp-cli nodes children <id> — List children of a node
• framer-pp-cli nodes set <id> — Set attributes on a node
• framer-pp-cli nodes move <id> — Move a node to a new parent / reorder by index
• framer-pp-cli nodes clone <id> — Clone a node
• framer-pp-cli nodes create-frame — Create a new frame node on the canvas
• framer-pp-cli nodes remove <id> — Remove a node from the canvas

assets — Image asset upload.

• framer-pp-cli assets upload — Upload images to Framer and get back asset URLs

code — Code file management (live).

• framer-pp-cli code list — List all code files in the project
• framer-pp-cli code get <id> — Get a code file's content

components — Component operations.

• framer-pp-cli components add — Add a code component instance to the canvas by URL or name

redirects — URL redirect management (live).

• framer-pp-cli redirects list — List all project redirects
• framer-pp-cli redirects add --from /old --to /new — Add a redirect

collections — List CMS collections directly from the Framer API (live).

• framer-pp-cli collections — List collections with fields and item counts

items — List CMS items in a collection (live).

• framer-pp-cli items — List items in the specified collection

cms-fields — Add, remove, or reorder collection fields.

• framer-pp-cli cms-fields --collection-id <id> — Manage a collection's fields

fonts — Font management.

• framer-pp-cli fonts — List all available fonts with weights and styles

project — Framer project management.

• framer-pp-cli project get — Get project name, ID, and metadata
• framer-pp-cli project user — Get current authenticated user info

sync — Sync all Framer project data into the local store (single command).

• framer-pp-cli sync — Pull collections, items, pages, code, etc. into local SQLite

doctor — Verify the live API connection via the Node.js bridge.

• framer-pp-cli doctor — Check Node, the framer-api bridge, and connectivity