framer-core-workflow-a

name	framer-core-workflow-a
description	Execute Framer primary workflow: Core Workflow A. Use when implementing primary use case, building main features, or core integration tasks. Trigger with phrases like "framer main workflow", "primary task with framer".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(npx:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","framer","cms","plugin"]
compatibility	Designed for Claude Code

Framer CMS Plugin — Managed Collections

Overview

Build a Framer plugin that syncs external data into CMS Managed Collections. Managed Collections are plugin-controlled — your plugin creates the schema and populates items. This is the primary integration pattern for connecting Framer to external CMSes, databases, or APIs.

Prerequisites

• Completed framer-install-auth setup
• Plugin dev server running
• Understanding of Framer CMS concepts

Instructions

Step 1: Create a Managed Collection

// src/App.tsx — CMS sync plugin
import { framer } from 'framer-plugin';
import { useState } from 'react';

framer.showUI({ width: 340, height: 400, title: 'Content Sync' });

export function App() {
  const [status, setStatus] = useState('');

  const syncCollection = async () => {
    setStatus('Fetching data...');
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();

    setStatus('Creating collection...');
    const collection = await framer.createManagedCollection({
      name: 'Blog Posts',
      fields: [
        { id: 'title', name: 'Title', type: 'string' },
        { id: 'body', name: 'Body', :  },
        { : , : , :  },
        { : , : , : , :  },
      ],
    });

    ();
     items = posts.(, ).( ({
      : {
        : post.,
        : ,
        : ,
        : post..().(, ).(, ),
      },
    }));

     collection.(items);
    ();
    framer.();
  };

   (
    
  );
}

Step 2: Handle CMS Field Types

// Framer CMS field types reference
const fields = [
  { id: 'title', name: 'Title', type: 'string' as const },
  { id: 'content', name: 'Content', type: 'formattedText' as const },
  { id: 'price', name: 'Price', type: 'number' as const },
  { id: 'featured', name: 'Featured', type: 'boolean' as const },
  { id: 'publishDate', name: 'Published', type: 'date' as const },
  { id: 'heroImage', name: 'Hero', type: 'image' as const },
  { id: 'category', name: 'Category', type: 'enum' as , : [
    { : , :  },
    { : , :  },
  ]},
  { : , : , :   , :  },
];

Step 3: Incremental Sync with Change Detection

async function incrementalSync(collection: ManagedCollection, newData: any[]) {
  const existing = await collection.getItems();
  const existingMap = new Map(existing.map(i => [i.fieldData.slug, i]));
  const toUpsert = newData.map(item => {
    const match = existingMap.get(item.slug);
    return match ? { ...item, id: match.id } : item;
  });
  await collection.setItems(toUpsert);
}

Step 4: Unmanaged Collection Access

// Read from user-created CMS collections (not plugin-managed)
const collections = await framer.getCollections();
for (const col of collections) {
  if (col.type === 'unmanaged') {
    const items = await col.getItems();
    console.log(`${col.name}: ${items.length} items`);
  }
}

Output

• Managed CMS collection with typed fields
• External data synced into Framer CMS
• Incremental sync support
• Image auto-upload from URLs

Error Handling

Error	Cause	Solution
Collection exists	Duplicate name	Use getManagedCollection() first
Invalid field type	Wrong type string	Use: string, formattedText, number, boolean, date, image, enum, slug
Image upload failed	URL not public	Ensure images are publicly accessible
setItems timeout	Too many items	Batch into chunks of 100

Resources

• Framer CMS API
• Managed Collections

Next Steps

For code components and overrides, see framer-core-workflow-b.