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 <[e-mail]>
tags	["saas","framer"]
compatibility	Designed for Claude Code

Framer Webhooks & Events

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

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

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

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

app.(,  (req, res) => {
   { event, data } = req.;

  
   signature = req.[];
   (!(req., signature  )) {
     res.().({ :  });
  }

   (event === ) {
     client =  framer.({
      : process..!,
      : process..!,
    });

     col = ( client.()).( c. === data.);
     (col) {
       col.(data..( ({ : i })));
       client.();
      .();
    }
  }

  res.({ :  });
});