Framer Cost Tuning

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
• Server API (Free Beta)

Next Steps

For architecture patterns, see framer-reference-architecture.