framer-local-dev-loop

name	framer-local-dev-loop
description	Configure Framer local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Framer. Trigger with phrases like "framer dev setup", "framer local development", "framer dev environment", "develop with framer".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","framer"]
compatibility	Designed for Claude Code

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

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

// 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, ).(, ),
    },
  }));
}

(,  {
  (,  {
     posts = [{ : , : , :  }];
     items = (posts);
    (items[]..).();
    (items[]..).();
    (items[]..).();
  });

  (,  {
     posts = [{ : , : , :  }];
     items = (posts);
    (items[]..).();
  });
});