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.
Make sure your bookmarks bar is visible: Ctrl/Cmd + Shift + B.
Drag the button above onto the bookmarks bar (a plain click does nothing; it has to be a drag-and-drop).
Open the page you're working on (localhost, staging, production, anywhere).
Click the "Layout Coords Tool" bookmark. A small panel appears in the corner.
Tap any button, image, or container to select it. Tap the same spot again to cycle to the element underneath.
Use the Move handle or the resize dot to adjust it, then tap "Get CSS" to copy the resulting rule.
Paste that CSS into your code, or hand it to your AI coding agent.
Click "Remove tool" when done, or just refresh the page. Nothing persists.
Bookmarks bar not showing, or drag not working in your browser? Right-click the bookmark button above → "Copy Link", then create a new bookmark manually and paste the link as its URL.
Tap "Copy bookmarklet code" above. This copies a short javascript: snippet to your clipboard.
Open your browser, go to any page, and bookmark it (usually the Share icon, or a star/bookmark icon in the address bar, then Add Bookmark or Save).
Open your browser's Bookmarks list, find the bookmark you just saved, and open it for editing (swipe left on it, or use the Edit option — exact wording varies by browser).
Clear the URL field completely, then paste the copied code into it (long-press → Paste).
Change the Name field to Layout Tool, then save/confirm.
Open the page you're working on, open your Bookmarks, and tap Layout Tool. The panel appears in the corner.
Tap any button, image, or container to select it. Tap the same spot again to cycle to the element underneath.
Use the Move handle or the resize dot to adjust it, then tap "Get CSS" to copy the resulting rule.
Paste that CSS into your code, or hand it to your AI coding agent.
Tap "Remove tool" when done, or reload the page. Nothing persists.
Steps above work the same way in Chrome, Safari, and most other mobile browsers — only the exact menu names and icons differ slightly.
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.