framer-webhooks-events

# 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 ```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!,...