Framer Cost Tuning

---
name: framer-cost-tuning
description: 'Optimize Framer costs through tier selection, sampling, and usage monitoring.

  Use when analyzing Framer billing, reducing API costs,

  or implementing usage monitoring and budget alerts.

  Trigger with phrases like "framer cost", "framer billing",

  "reduce framer costs", "framer pricing", "framer expensive", "framer budget".

  '
allowed-tools: Read, Grep
version: 1.5.0
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
tags:
- saas
- framer
compatibility: Designed for Claude Code
---
# Framer Cost Tuning

## Prerequisites

Current plan/billing information, aggregate usage, a cost owner, required availability/features, and a staging site for changes.

## Instructions

Measure aggregate usage, evaluate plan or asset changes against current terms, obtain owner approval, and test any performance/publishing effect before production.

## Output

Record the measurement period, approved change, expected effect, owner, verification date, and rollback state. Do not include visitor data or billing credentials.

## Error Handling

Revert changes that reduce required publishing, domain, privacy, or performance behavior; quarantine unexpected usage or access changes for review.

## Examples

Test an asset optimization on a fictional staging page, compare aggregate performance, and promote only after the site owner approves the evidence.

## Overview

Optimize Framer costs across plans and features. The Server API is free during beta. Main costs are Framer site plans, custom domains, and team seats.

## Framer Plans

| Plan | Price | CMS Items | Custom Domain | Pages |
|------|-------|-----------|---------------|-------|
| Free | $0 | 100 | No | 2 |
| Mini | $5/mo | 200 | Yes | 150 |
| Basic | $15/mo | 1,000 | Yes | 300 |
| Pro | $30/mo | 10,000 | Yes | Unlimited |
| Enterprise | Custom | Unlimited | Yes | Unlimited |

## Cost Optimization Strategies

### Step 1: CMS Item Budgeting

```typescript
// Track CMS item usage to avoid plan overages
async function checkCMSUsage(client: any) {
  const collections = await client.getCollections();
  let totalItems = 0;
  for (const col of collections) {
    const items = await col.getItems();
    totalItems += items.length;
    console.log(`${col.name}: ${items.length} items`);
  }
  console.log(`Total CMS items: ${totalItems}`);
  // Pro plan: 10,000 limit
  console.log(`Usage: ${((totalItems / 10000) * 100).toFixed(1)}% of Pro limit`);
}
```

### Step 2: Minimize Publish Frequency

```typescript
// Batch CMS updates before publishing (each publish rebuilds the site)
async function batchUpdateAndPublish(updates: Array<{ collection: string; items: any[] }>) {
  const client = await getClient();
  for (const update of updates) {
    const col = (await client.getCollections()).find(c => c.name === update.collection);
    if (col) await col.setItems(update.items);
  }
  // Single publish after all updates
  await client.publish();
}
```

### Step 3: Development vs Production Sites

Use a free plan site for development and testing. Only pay for the production site.

## Resources

- [Framer Pricing](https://www.framer.com/pricing/)
- [Server API (Free Beta)](https://www.framer.com/developers/server-api-introduction)

## Next Steps

For architecture patterns, see `framer-reference-architecture`.