framer-local-dev-loop

# Framer Local Dev Loop ## Overview Set up a fast development workflow for Framer plugins and code components with Vite hot-reload, TypeScript, and testing. ## Prerequisites - Completed `framer-install-auth` setup - Node.js 18+ with npm - Framer editor open ## Instructions ### Step 1: Plugin Dev Environment ```bash npx create-framer-plugin@latest my-plugin cd my-plugin npm install npm run dev # Starts Vite dev server — hot-reloads into Framer editor ``` Project structure: ``` my-plugin/ ├── src/ │ ├── App.tsx # Plugin UI (React) │ ├── main.tsx # Entry point │ └── framer.d.ts # Type definitions ├── package.json ├── vite.config.ts # Vite config with framer-plugin └── tsconfig.json ``` ### Step 2: Connect to Framer Editor 1. Open Framer, go to your project 2. Click **Plugins** > **Development** in the toolbar 3. Select your local dev plugin 4. Changes in `src/App.tsx` hot-reload instantly ### Step 3: Testing Plugin Logic ```typescript // tests/sync.test.ts — test data transformation outside Framer import { describe, it, expect } from 'vitest'; // Extract pure functions for testability function transformPosts(posts: any[]) { return posts.map(p => ({ fieldData: { title: p.title, body: `<p>${p.body}</p>`, slug: p.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').slice(0, 50), }, })); } describe('CMS Sync', () => { it('should transform posts into CMS items', () => { const posts = [{ title: 'Hello ...