Drag elements to where they should be, get exact CSS coordinates, hand them to your AI. No install, no account, no risk — it never touches your codebase.
Drag this button to your bookmarks bar.
Later, click it on any page you're working on.
Drag the button above to your browser's bookmarks bar (not click — drag).
Open your own site or project (localhost, staging, wherever you're working).
Click the bookmark. A small panel appears on your page.
Drag any button or image to where you want it, drop it, and copy the CSS shown.
Paste that CSS into your code, or hand it to your AI coding agent.
Click "Remove tool" when done — nothing is left behind.
There's no bookmarks bar to drag to on iPad — instead, copy the code above, then follow the steps below to turn it into a working bookmark.
Tap "Copy bookmarklet code" above.
Bookmark any page first (tap the Share icon → "Add Bookmark").
Go to your Bookmarks list (Book icon in Safari), swipe/tap "Edit" on the bookmark you just made.
Delete its URL, and paste the copied code in its place.
Rename it to "Layout Tool" so it's easy to find, then tap Done.
Now, whenever you're on your own site, open Bookmarks and tap "Layout Tool" — the panel appears.
Drag any button or image to where you want it, drop it, and copy the CSS shown.
Tap "Remove tool" when done — nothing is left behind.
Prefer the console? (desktop only)
If you're already in DevTools, paste this into the Console on your own page instead:
var s = document.createElement('script');
s.src = 'https://layout-coords-tool.pages.dev/overlay.js';
document.body.appendChild(s);
⚠️ Nothing is saved or installed. The tool only exists in the current browser tab. Refresh the page, or tap "Remove tool," and it's completely gone — your project files are never touched.