Optate

Real-time design inspection and editing for your local dev server. Inspect elements, tweak styles, export clean CSS — then paste into your AI chat to apply changes instantly.

Install

npm install @optate/plugin

Usage

Replace your vite dev command with optate:

npx @optate/plugin dev

Or add it to your package.json scripts permanently:

{
  "scripts": {
    "dev": "optate dev"
  }
}

No changes to vite.config.ts required. Optate auto-detects your existing config and injects itself.

Features

🎯 Element Inspector — click any element to see computed styles, size, font, and color
✏️ Live Editor — tweak typography, spacing, colors, borders, shadows in a floating panel
💬 Inline Text Edit — double-click any text to edit it directly on the page
📐 Gap Measurement — hover a second element to measure pixel distance
📱 Responsive Modes — desktop / tablet / mobile with proper @media query export
⎌ Undo / Redo — full history with ⌘Z / ⌘⇧Z
⚛️ React Component Names — auto-detected via React fiber for AI context
📤 CSS Export — one-click export of all changes as valid CSS
🧠 AI Context Log — structured change log ready to paste into Claude, Cursor, Copilot

How it works

Install and run npx @optate/plugin dev
Inspect and edit your UI visually
Click Changes → Copy to get a structured CSS + context block
Paste into your AI tool: "Apply these changes to my codebase"

Dev only

Optate never loads in production. The toolbar is completely absent from your deployed app.

License

MIT