Framer Install & Auth

Examples

Use a scoped staging credential to confirm a read-only project check, record only the scope and redacted outcome, then revoke the test credential and verify access is denied.

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

# 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)

npm install framer-api

// 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();
console.log('Collections:', collections.map(c => c.name));

Step 4: Configure Environment Variables

# .env (NEVER commit)
FRAMER_API_KEY=framer_sk_abc123...
FRAMER_SITE_ID=abc123def456

# .gitignore
.env
.env.local

Step 5: Verify Plugin Connection

Open Framer, go to your project, click Plugins > Development > select your local plugin. The dev server hot-reloads into the editor.

// Plugin verification — runs inside Framer editor
import { framer } from 'framer-plugin';

export function App() {
  const handleTest = async () => {
    const selection = await framer.getSelection();
    console.log('Selected layers:', selection.length);
    framer.notify(`Found ${selection.length} selected layers`);
  };

  return <button onClick={handleTest}>Test Connection</button>;
}

Output

Plugin project scaffolded with Vite + React
Server API client connected via WebSocket
Environment variables configured
Verified connection to Framer editor or API

Error Handling

Error	Cause	Solution
`Plugin not showing`	Dev server not running	Run `npm run dev` and reload Framer
`Invalid API key`	Wrong key or site ID	Generate new key in site settings
`WebSocket connection failed`	Network/firewall	Allow outbound WSS connections
`framer-plugin not found`	Missing dependency	Run `npm install framer-plugin`

Resources

Next Steps

After setup, proceed to framer-hello-world for your first plugin or component.

framer-install-auth