framer-webhooks-events

npx skills add jeremylongshore/claude-code-plugins-plus-skills --skill framer-webhooks-events --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# 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'];