Layout Coords Tool

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.

Layout Coords Tool
Drag this button to your bookmarks bar.
Later, click it on any page you're working on.
  1. Make sure your bookmarks bar is visible: Ctrl/Cmd + Shift + B.
  2. Drag the button above onto the bookmarks bar (a plain click does nothing; it has to be a drag-and-drop).
  3. Open the page you're working on (localhost, staging, production, anywhere).
  4. Click the "Layout Coords Tool" bookmark. A small panel appears in the corner.
  5. Tap any button, image, or container to select it. Tap the same spot again to cycle to the element underneath.
  6. Use the Move handle or the resize dot to adjust it, then tap "Get CSS" to copy the resulting rule.
  7. Paste that CSS into your code, or hand it to your AI coding agent.
  8. 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.

  1. Tap "Copy bookmarklet code" above. This copies a short javascript: snippet to your clipboard.
  2. Open Safari, go to any page, tap the Share icon, then tap Add Bookmark → Save.
  3. Tap the Bookmarks icon (open book) → find the bookmark you just saved → swipe left on it (or tap Edit in the top right) → tap Edit.
  4. Clear the URL field completely, then paste the copied code into it (long-press → Paste).
  5. Change the Name field to Layout Tool, then tap Done.
  6. Open the page you're working on, tap the Bookmarks icon, and tap Layout Tool. The panel appears in the corner.
  7. Tap any button, image, or container to select it. Tap the same spot again to cycle to the element underneath.
  8. Use the Move handle or the resize dot to adjust it, then tap "Get CSS" to copy the resulting rule.
  9. Paste that CSS into your code, or hand it to your AI coding agent.
  10. Tap "Remove tool" when done, or reload the page. Nothing persists.

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.