Attach to any page and edit its design live. Reads the project's own design tokens; exports a change log.
Users
16
store count
Rating
5.0 / 5
unchanged in 30 days
Ratings
4
total ratings
Store rank
#162K
#135K among extensions
Version
1.0.1
updated 5 Oct 2026
About Leech
Leech is a design tool for people who review and adjust real pages, not mockups.
Open it on any page and it becomes an in-place editor: pick an element, change
its colour, type, spacing, borders or text, and see the result immediately. When
you are done, export the list of changes and hand it to whoever writes the code.
WHAT MAKES IT DIFFERENT
Leech reads the design system out of the page it is standing on. It scans the
project's CSS custom properties and offers them BY TOKEN NAME, so an edit writes
var(--color-primary) rather than a raw hex that no reviewer would accept. If the
page has no tokens, it falls back to the colours actually in use, ranked by
frequency. Spacing and type scales are derived the same way. A free colour field
is there when you genuinely need a value the page does not have.
Where an element renders text, its colour is checked against WCAG AA contrast
as you work, adjusted for large text, so an unreadable combination is caught
before anyone signs off on it. Lower a colour's opacity and the check follows
the blended result rather than the value you typed, because that is what the
eye actually sees. On an element with no text, or over a gradient where the
blend cannot be known, Leech says so instead of showing a number that would
mean nothing.
WHAT IT DOES
- Inspector: with the panel open, hover any element for its size, typography,
colours, effects and layout — only the values that are actually set, never a
wall of defaults.
- Edit colours, typography, per-side spacing, radius, borders, shadows.
- Set a colour's opacity on its own, the way a fill works in a design tool,
keeping the token name in the exported value.
- Step through the project's own scale, or type an exact number.
- Preview at desktop, tablet and mobile widths — the window itself resizes,
so the page's real breakpoints switch.
- Edit text content, including elements that contain other elements.
- Drag to reorder, align or space children inside one component, never outside it.
- Undo and redo.
- Remembers your edits across page reloads, per page.
- Export as a plain change list, or as a written brief for a developer.
- Hebrew and English interface.
PRIVACY
Nothing leaves your device. Your edits are stored locally in the browser and are
never transmitted anywhere. There are no accounts, no analytics, no network
requests of any kind.