MarkLayer — Visual CSS Debugger & Annotator icon

MarkLayer — Visual CSS Debugger & Annotator

by o.abderrahmen314@gmail.com · Tools
Manifest V3 Free
View in Chrome Web Store Data as of 21 Oct 2026

Inspect, edit, comment, draw, measure & audit any site — breakpoint-aware, fully offline. Export annotations as JSON & PNG.

Users
10
−6 in 30 days
Rating
0.0 / 5
unchanged in 30 days
Ratings
0
0 in 30 days
Store rank
#204K
#171K among extensions
Version
0.5.1
updated 22 Jun 2026

Users

monthly, 4 months
0817Jun 2026Sep 2026Oct 2026
Latest, 21 Oct 2026: 10 usersMove the mouse over the chart for any month

Ratings count

monthly, 4 months
001Jun 2026Sep 2026Oct 2026
Latest, 21 Oct 2026: 0 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About MarkLayer — Visual CSS Debugger & Annotator

MarkLayer turns any website into a visual review surface. Toggle the overlay and you can inspect the box model of any element, live-edit its text, colors, fonts and spacing, drop anchored comments, and draw arrows, boxes and highlights directly on the page — no code, no rebuilds. When you're done, export everything to a single JSON file. A teammate picks "Import & open" from the toolbar, and MarkLayer opens the right site and re-applies your comments, edits and drawings automatically — even across multiple pages and single-page-app routes. FEATURES • Inspect — hover to see margin / border / padding, size, colors and fonts; click to copy a resilient CSS selector. • Edit — change text, text/background/border color, font size & weight, alignment, spacing, radius, opacity, width/height, and an element's link (href) or image (src/alt). Every change is reversible. • Comment — drop pins anchored to elements, with author names, threaded replies, and resolve. • Draw — pen, arrow, rectangle, highlighter and text labels; arrows attach to the element they point at and follow it across screen sizes. • Routes — annotations are scoped per page/route, so reviews survive navigation and SPAs. • Sessions — each annotation set is a session; MarkLayer auto-saves one when you turn the overlay off and keeps your old work safe when you import. Restore, rename, export or delete. • Export / Import — one self-contained .json carries everything; "Import & open" loads it as its own session on the matching site without overwriting your current work. • Works on desktop, tablet and phone widths; supports touch and stylus. PRIVACY MarkLayer stores your annotations locally in your browser. It does not send your data to any server, and there are no accounts or trackers. The only network activity is whatever the website you're viewing already does. HOW TO USE 1. Open any normal website tab. 2. Click the MarkLayer icon (or press Alt+Shift+M) to toggle the overlay. 3. Pick a tool from the bottom toolbar (or press V / E / C / D). 4. Export from the toolbar to share; teammates use "Import & open" to view your work.

Growth

WindowUsersChangeRatingsRating
7 days−7−41.2%00.00
30 days−6−37.5%00.00

Version history

1 versions recorded
0.5.122 Jun 2026

Details

Category
Tools
First seen
22 Jun 2026
Size
89 KB
Languages
en
Pricing
Free
Privacy policy
eclectic-dragon-be0610.netlify.app
Extension ID
pnghkdkcfbhldjgfogpjkjmdaaggeeik

Permissions and risk

Moderate riskimpact 2, likelihood 3
Permissions
storageactiveTabscriptingtabs

Alternatives to MarkLayer — Visual CSS Debugger & Annotator

Extensions that rank for the same store searches or share the Tools category, ordered by users