Fix UI bugs with the visual editor

inspecta’s visual editor turns your browser into a live CSS workspace. Select any element, tweak its styles, and see updates instantly, with no DevTools panels or code editor required.

Open the editor

Install the inspecta Chrome extension.
Navigate to the page with the bug, whether staging or production.
Click the inspecta icon and select the element you want to fix.

The inspector panel opens with every editable property grouped by category.

Properties you can edit

inspecta supports the CSS properties teams touch most often during visual QA:

Layout: display, flex direction, alignment, gap
Size: width, height, min/max constraints
Spacing: margin and padding per side or all at once
Color: text, background, and border colors
Typography: font family, size, weight, line height, letter spacing
Border & radius: width, style, color, corner rounding
Position & opacity: offsets, z-index, transparency

Changes apply to the live DOM so you see the real result. When you’re signed in, your edits are saved automatically and stay in place when you refresh the page or open the extension again next time.

Common bug fixes

Misaligned spacing

Select the container, open Spacing, and nudge padding or margin until the layout matches your design.

Wrong font or color

Use the Typography and Color panels to match Figma values. Paste styles from the Figma plugin for faster setup.

Broken flex layout

Switch to Layout, adjust flex-direction, justify-content, and align-items until items sit where they should.

After you fix it

Export CSS: copy snippets for a pull request.
Send to AI: hand off to Cursor or VS Code with full context.
Share a link: let your team review before you commit.