framer-hello-world

# Framer Hello World ## Overview Build a minimal Framer plugin that inserts a styled text layer onto the canvas, and a code component that renders inside Framer sites. Both use the `framer-plugin` SDK which provides the `framer` global for editor interaction. ## Prerequisites - Completed `framer-install-auth` setup - Framer editor open with a project - Plugin dev server running (`npm run dev`) ## Instructions ### Step 1: Hello World Plugin ```tsx // src/App.tsx — Plugin UI that runs inside Framer editor import { framer } from 'framer-plugin'; framer.showUI({ width: 300, height: 200, title: 'Hello World Plugin' }); export function App() { const insertText = async () => { await framer.addText('Hello from my plugin!', { position: { x: 100, y: 100 }, style: { fontSize: 24, color: '#333' }, }); framer.notify('Text inserted on canvas!'); }; const insertImage = async () => { await framer.addImage({ url: 'https://picsum.photos/400/300', position: { x: 100, y: 200 }, }); }; return ( <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8 }}> <h2>Hello World</h2> <button onClick={insertText}>Insert Text</button> <button onClick={insertImage}>Insert Image</button> </div> ); } ``` ### Step 2: Hello World Code Component ```tsx // Code component — renders inside Framer sites (not a plugin) // Create via: Framer editor > Assets > Code > New Component import { addPropertyControl...