Framer Webhooks Events

---
name: framer-webhooks-events
description: 'Implement Framer webhook signature validation and event handling.

  Use when setting up webhook endpoints, implementing signature verification,

  or handling Framer event notifications securely.

  Trigger with phrases like "framer webhook", "framer events",

  "framer webhook signature", "handle framer events", "framer notifications".

  '
allowed-tools: Read, Write, Edit, Bash(curl:*)
version: 1.5.0
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
tags:
- saas
- framer
compatibility: Designed for Claude Code
---
# Framer Webhooks & Events

## Prerequisites

Approved event source/destinations, signing or authentication controls where supported, event ledger, redaction policy, and synthetic fixtures.

## Error Handling

Reject unknown event schemas/destinations, deduplicate replayed events, bound retries, and pause downstream actions on access or privacy failures.

## Examples

Deliver a fictional event twice, process it once under an opaque ID, and reject an unknown destination without forwarding page or visitor data.

## Overview

Framer's Server API uses a WebSocket channel for real-time communication, not traditional REST webhooks. For event-driven integrations, you subscribe to changes via the WebSocket connection or set up your own webhook endpoints that trigger Framer sync via the Server API.

## Instructions

### Step 1: Subscribe to CMS Changes via Server API

```typescript
import { framer } from 'framer-api';

async function watchChanges() {
  const client = await framer.connect({
    apiKey: process.env.FRAMER_API_KEY!,
    siteId: process.env.FRAMER_SITE_ID!,
  });

  // Subscribe to collection changes
  const collections = await client.getCollections();
  for (const col of collections) {
    col.subscribe((items) => {
      console.log(`Collection "${col.name}" updated: ${items.length} items`);
    });
  }
}
```

### Step 2: External Webhook → Framer Sync

```typescript
// Receive webhook from your CMS, sync to Framer
import express from 'express';
import { framer } from 'framer-api';

const app = express();
app.use(express.json());

app.post('/webhooks/cms-update', async (req, res) => {
  const { event, data } = req.body;

  // Validate webhook source
  const signature = req.headers['x-webhook-signature'];
  if (!verifySignature(req.body, signature as string)) {
    return res.status(401).json({ error: 'Invalid signature' });
  }

  if (event === 'content.updated') {
    const client = await framer.connect({
      apiKey: process.env.FRAMER_API_KEY!,
      siteId: process.env.FRAMER_SITE_ID!,
    });

    const col = (await client.getCollections()).find(c => c.name === data.collection);
    if (col) {
      await col.setItems(data.items.map(i => ({ fieldData: i })));
      await client.publish();
      console.log(`Synced ${data.items.length} items and published`);
    }
  }

  res.json({ received: true });
});
```

### Step 3: Plugin Event Subscriptions

```tsx
// Inside a Framer plugin — subscribe to canvas changes
import { framer } from 'framer-plugin';

// Watch for selection changes
framer.subscribeToSelection((selection) => {
  console.log('Selection changed:', selection.length, 'layers');
});

// Watch for code file changes
framer.subscribeToCodeFiles((codeFiles) => {
  console.log('Code files updated:', codeFiles.map(f => f.name));
});
```

## Output

- WebSocket-based real-time CMS subscriptions
- External webhook handler triggering Framer sync
- Plugin event subscriptions for canvas changes

## Resources

- [Framer Server API](https://www.framer.com/developers/server-api-introduction)
- [Plugin Subscriptions](https://www.framer.com/developers/reference)

## Next Steps

For performance, see `framer-performance-tuning`.