framer-install-auth

# Framer Install & Auth ## Overview Set up the Framer Plugin SDK for building editor plugins, or the `framer-api` package for Server API access. Framer has two developer surfaces: **Plugins** (run inside the Framer editor UI) and **Server API** (run from any Node.js server via WebSocket). ## Prerequisites - Node.js 18+ - Framer account (free or paid) - For Server API: API key from site settings ## Instructions ### Step 1: Choose Your Integration Type | Type | Package | Use Case | |------|---------|----------| | Plugin | `framer-plugin` | UI that runs inside Framer editor | | Server API | `framer-api` | Headless CMS sync, CI/CD publishing | | Code Components | React in Framer | Custom components on the canvas | | Code Overrides | React in Framer | Modify existing component behavior | ### Step 2: Set Up a Framer Plugin ```bash # Scaffold a new plugin project npx create-framer-plugin@latest my-plugin cd my-plugin npm install npm run dev ``` This creates a Vite + React project with the `framer-plugin` package pre-configured. The plugin runs inside Framer's editor iframe. ### Step 3: Set Up the Server API (Headless Access) ```bash npm install framer-api ``` ```typescript // server.ts — Server API connection import { framer } from 'framer-api'; const client = await framer.connect({ apiKey: process.env.FRAMER_API_KEY!, // From site settings siteId: process.env.FRAMER_SITE_ID!, }); // List all CMS collections const collections = await client.getCollections(); conso...