Report index

Fixing the last ten pixels in the browser without losing the diff

An engineering note on why we moved small visual corrections into the browser while keeping the repository, reviewable diffs and rollback as the source of truth.

Eric Kim 김진모
DevOps Engineer, WIGTN
WIGSS, WIGTN Style Sync Studio
01Problem

The last ten pixels are expensive to describe

Coding agents can produce a first layout quickly. The friction shows up later, when a ten-pixel correction becomes another round of prose, CSS edits, reloads and screenshots.

We did not want the browser to become a second source of truth. WIGSS uses it as the editing surface, then turns each manipulation back into a constrained, reviewable source change.

02Architecture

Keep the gesture in the browser and the change in source

01Scan the live DOM

The editor inspects visible elements and labels reusable groups around the target development server.

02Track an overlay

Bounding boxes follow layout changes with requestAnimationFrame while selection remains outside the iframe.

03Map DOM to source

Component metadata connects the selected node to a file and style strategy.

04Send StyleIntent

Drag and resize events become constrained edit intent over WebSocket.

05Apply a targeted diff

The matching rewriter updates source and reloads the target for verification.

WIGSS browser editor package
FIG.WIGSS wraps the target development server with a visual editor while keeping source code as the final artifact. Published as wigss on npm.

Source rewrite dispatch

Source styleRewrite mechanismRisk to verify
Tailwind utilitiesClass-token updateConflicting responsive variants
CSS ModulesPostCSS syntax treeSelector fan-out
CSS / SCSSRule-level editCascade and specificity
Inline ReactBabel syntax treeComputed style expressions
03Evidence status

Architecture is documented; outcome quality is not yet benchmarked

The package documentation supports the scan-to-rewrite data flow and its source strategies. It does not support a claim that WIGSS is faster, safer or more accurate than editing through a coding agent.

  • 01Required future metric: component-to-source mapping success rate.
  • 02Required future metric: visual fidelity after save at multiple viewport sizes.
  • 03Required future metric: build and type-check pass rate after generated diffs.
  • 04Required future metric: task completion time, diff size and rollback success.
04Limitations

Where the claim stops

  • L01The documented package targets local, single-user development.
  • L02DOM-to-source mapping becomes ambiguous across generated markup and higher-order abstractions.
  • L03No controlled speed, fidelity or code-quality benchmark has been released.