Framer Reference Architecture
Prerequisites
Documented site owners, publishing/domain access policy, approved integrations, visitor-data boundaries, synthetic staging site, and rollback owner.
Instructions
Separate editing, publishing, domain/DNS, forms, analytics, and downstream integrations by least privilege. Validate changes in staging, use redacted telemetry, promote a canary, and retain a tested rollback path.
Output
Maintain an architecture record with trust boundaries, approved destinations, access/retention controls, owners, canary result, and rollback mechanism. Exclude credentials and visitor submissions.
Error Handling
Quarantine unknown integration destinations and stop publishing on domain, access, or privacy-policy failures. Restore the prior configuration before retrying.
Examples
Publish a fictional staging page, deny an unapproved analytics consumer, and verify rollback restores the prior site without leaking form data.
Overview
Production architecture for Framer integrations covering plugins, Server API CMS sync, code components, and automated publishing pipelines.
Architecture Diagram
┌─────────────────────────────────────────────┐
│ Framer Editor │
│ ┌──────────┐ ┌───────────┐ ┌──────────┐ │
│ │ Plugins │ │ Code │ │ Code │ │
│ │ (iframe) │ │ Components│ │ Overrides│ │
│ └────┬─────┘ └───────────┘ └──────────┘ │
│ │ framer-plugin SDK │
├───────┴──────────────────────────────────────┤
│ Framer CMS │
│ ┌──────────────┐ ┌───────────────────┐ │
│ │ Managed │ │ Unmanaged │ │
│ │ Collections │ │ Collections │ │
│ └──────┬───────┘ └───────────────────┘ │
├─────────┴────────────────────────────────────┤
│ Server API (WebSocket) │
│ framer-api package │
└─────────┬────────────────────────────────────┘
│
┌─────────┴────────────────────────────────────┐
│ Your Backend │
│ ┌────────────┐ ┌──────────┐ ┌──────────┐ │
│ │ CMS Sync │ │ Webhook │ │ CI/CD │ │
│ │ Service │ │ Handler │ │ Pipeline │ │
│ └────────────┘ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────┘
Project Structure
framer-integration/
├── plugin/ # Framer editor plugin
│ ├── src/
│ │ ├── App.tsx # Plugin UI
│ │ ├── hooks/ # Plugin state hooks
│ │ └── cms/ # CMS sync logic
│ ├── vite.config.ts
│ └── package.json
├── server/ # Server API backend
│ ├── src/
│ │ ├── sync.ts # CMS sync service
│ │ ├── publish.ts # Auto-publish logic
│ │ └── webhooks.ts # External webhook handlers
│ └── package.json
├── components/ # Shared code components
│ ├── AnimatedCounter.tsx
│ ├── DataList.tsx
│ └── index.ts
├── overrides/ # Shared code overrides
│ ├── animations.tsx
│ └── interactions.tsx
└── .env.example
Integration Patterns
| Pattern | When | How | |---------|------|-----| | Plugin CMS Sync | User-initiated sync | Plugin UI → managed collection | | Server API Sync | Automated/scheduled | Node.js → Server API WebSocket | | CI/CD Publish | On content change | GitHub Actions → Server API → publish | | Webhook Bridge | External CMS events | Webhook → your API → Server API |
Decision Matrix
| Need | Solution | |------|----------| | Custom UI in editor | Framer Plugin | | Headless CMS sync | Server API | | Custom interactive elements | Code Components | | Modify existing animations | Code Overrides | | Automated publishing | Server API + CI/CD |
Resources
Next Steps
Start with framer-install-auth to set up your development environment.