A dev-only, in-page editing overlay. Pin comments and make token-aware visual tweaks — colour roles, spacing, radius, typography — directly on a running page. The controls only offer valid Scale tokens, so every edit stays on-system, and each change is captured to a small queue that a coding agent reads and applies to your real source.
Scale Edit has three parts that hand off to each other:
<sc-edit-layer>) — mounts on the running page. Point at any
element to pin a free-text comment, or open the edit panel to change an attribute, a
text node, or a style — style controls are populated from the design tokens, never
free-form values..scale/edits.json in your project root, and stamps
data-sc-loc="file:line" onto served HTML so items
carry a precise source location./scale-edit
skill) reads the pending queue, applies each item to the source files it points at, and
marks it resolved.The result: design feedback captured where you see it, applied where it lives — with tokens preserved end to end.
Add the plugin to your Vite config. It is inert in production builds
(apply: 'serve') and does nothing in dev either until
you opt in per run.
The overlay is off by default — turn it on per run with the
SCALE_EDIT env var:
Everything can also be set statically in the config instead of via the env var.
Non-Vite setups can mount the overlay manually. Keep the call behind a dev-only condition — the overlay is never meant to ship to production.
Without the Vite bridge there is no queue endpoint, so pair
enableEdit({ endpoint }) with your own handler that
persists the posted items.
Every comment and edit is appended to .scale/edits.json
as a pending item — the structured change (attribute / style / text, with the token name
when one was picked) plus an anchor: tag name, CSS selector, DOM path, and the stamped
file:line source location where available.
An agent applies the queue to source: token styles are written as
var(--sc-…) (never the resolved raw value), typography
edits use the named type styles, and each applied item is removed from the queue via the
bridge. The queue is dev-only state — keep .scale/
out of version control.