About
UiToolbar is a browser extension + CLI tool for direct visual design with IDE bridge integration. Simply select, edit and send structured context to Cursor,Claude Code, or any coding agent — directly from the browser.
Point at any element. Tell your coding agent what to change. Watch it edit the source file.
UiToolbar connects your browser to your codebase through Cursor, Claude Code, or OpenAI Codex.
Select a component on your live React app, type what you want ("make this button red", "add a
loading spinner"), and the AI modifies the actual source file — not a preview, not a mockup.
You see the result instantly via hot reload. No copy-pasting. No context-switching. No
explaining which file to open.
— HOW IT WORKS —
1. Hover over any element — UiToolbar detects the React component name, file path, and line
number automatically
2. Click to select, type your edit in plain English
3. Your coding agent reads the structured context and modifies the source file
4. See the change live on the page. Undo with one click if needed.
— FEATURES —
VISUAL ELEMENT SELECTION
• Click any element to select it. The overlay shows the component name, file path, and tag.
• Shift-click or drag-select to grab multiple elements at once.
• Arrow keys to navigate up to the parent or down to a child component.
• React-aware: extracts component name, props, and source location from the fiber tree.
INLINE TEXT EDITING
• Double-click any text to edit it directly on the page.
• Floating toolbar for font family, size, weight, color, alignment, spacing.
• Apply sends the changes to your coding agent to update the source file.
MOVE & LAYOUT TOOL (Alt+M)
• Drag elements between siblings to reorder them visually.
• Toggle to freeform mode for absolute positioning.
• Resize handles, rotation, alignment snapping, and pixel grid.
• Nudge with arrow keys (1px) or Shift+arrow (10px).
• Apply all layout changes at once — your agent writes the CSS.