Quey is available on desktop

Style editing

Edit colors, fonts, spacing, and effects visually on the live page. No instructions needed — the toolbar generates the code change for you.

Note
Style editing is one-way: changes are previewed on the page, but you control when they're applied to the source. Use copy-to-agent to send the change to your coding agent, or copy-to-clipboard to paste into your editor.

How to use it

  1. Click the Quey icon and open the Style tab (or press S).
  2. If nothing is selected, the toolbar enters inspect mode. Click any element on the page to select it.
  3. The Style panel opens with three sections: Frame (spacing & layout), Font (typography), and Color (backgrounds & text).
  4. Edit any value and see the change live on the page.
  5. When you're happy, click Copy to agent to send the change to your agent, or copy the code to your clipboard.
Tip
Use the Reset button to undo all unsaved changes and return to the original style.

What you can edit

Frame

Padding, margin, width, height, and display properties. Visualized as a box model diagram.

  • Padding — inner spacing (inside the border)
  • Margin — outer spacing (outside the border)
  • Width / Height — explicit size (if not auto)
  • Gap — space between flex or grid children

Font

Font family, size, weight, line height, and text decoration.

  • Family — the font typeface
  • Size — font size in px, em, or rem
  • Weight — boldness (400, 500, 600, 700, etc.)
  • Line height — spacing between lines
  • Text decoration — underline, line-through, etc.

Color

Text color, background color, border color, and effects.

  • Text — foreground color
  • Background — background color (solid or gradient)
  • Border — border color and width
  • Shadow — box shadow or text shadow
  • Opacity — transparency (0 to 1)
Note
Some computed styles are read-only (e.g., colors inherited from parent elements). The panel marks these clearly. You can still override them by adding a more specific rule or using !important.

Copy to agent

Click Copy to agent (or press Cmd+Enter) to send the style change to your coding agent through the MCP bridge.

This generates a structured payload that includes:

  • The element you selected and where to find it in the source
  • A before/after diff of the CSS changes
  • A visual instruction (screenshot region)

The agent receives this through the MCP tools and applies the change to the source file. You'll see a diff in the toolbar and can approve or reject the change.

Copy to clipboard

Click Copy CSS to copy just the CSS changes to your clipboard. Paste directly into your editor:

.btn-primary {  padding: 16px;  color: #0066ff;  font-weight: 600;}

This is useful if you want to make the change manually or merge it with other edits.

Undo & redo

Changes are live-previewed on the page but not saved until you approve. Use:

  • Undo button (or Cmd+Z) — revert one change at a time
  • Reset button — discard all unsaved changes and return to original

If you copy to agent and the agent makes a change, use the toolbar's Undo to revert the entire agent change and try again.

Next

Agent handoff

Send selection context and instructions to your coding agent.