Inspect elements, tweak styles, export clean CSS — then paste into your AI chat to apply changes in seconds.
Four steps from design idea to code change — without leaving your browser.
Click the crosshair to enter inspect mode. Hover to see element info — tag, size, font, color. Click to select and open the editor.
Tweak typography, spacing, colors, borders, and more in the floating editor panel. Changes apply live on the page instantly.
Optate tracks every change and exports real CSS — grouped by responsive breakpoint. Desktop, tablet, and
mobile changes are automatically separated into @media
queries.
Copy the changes log with full context — element tag, React component name, CSS selector, and values. Paste into Claude, Cursor, or any AI tool and say "apply these."
Built for the modern AI-assisted development workflow.
Click any element to inspect computed styles, dimensions, font details, and computed color values.
Full style editor with typography, layout, colors, borders, shadows, and transforms — all updated instantly.
Double-click any text element to edit content directly on the page. Changes are tracked and exported.
Hover a second element to measure the pixel distance between your selected element and any other.
Switch between desktop, tablet, and mobile viewport. Changes are tagged and exported with proper media queries.
Full undo and redo support. Step through every change — keyboard shortcuts ⌘Z and ⌘⇧Z.
Automatically detects which React component wraps an element — shown in the export for precise AI context.
One-click export of all changes as valid, formatted CSS — ready to paste into your global stylesheet.
A structured change log with element context, selectors, and values. Built to be understood by any AI coding tool.
No config file changes. Works with any Vite project — React, Vue, Svelte, Solid.
Tip: Add "dev": "optate dev" to your package.json scripts so it replaces vite
permanently.
Dev only. Optate never loads in production builds — the toolbar is completely absent when you deploy.
Every action has a shortcut.
Optate exports changes as a structured context block — element, component, selector, property, old and new value. Paste it into any AI tool and say "apply these changes."
Get started for free →