What is ruler-mode?

ruler-mode adds Figma-style pixel rulers and draggable guide lines to any web app you are building. Instead of measuring spacing and alignment by eye or with browser developer tools, you press a keyboard shortcut and rulers appear along the top and left edges of the page, just like in a design tool. Dragging out from a ruler places a guide line directly on your running app, so you can check alignment against your actual layout rather than a static mockup. It is meant to be small and simple: there are no external dependencies, it works with server-rendered pages, and you add it to a project by copying its folder in rather than pulling in a package manager dependency. In a React app, you mount a single overlay component. In a plain JavaScript project without any framework, you create an instance of it directly and can remove it again when you are done. Once enabled, guides can be dragged to reposition, nudged a pixel at a time with the arrow keys, duplicated by holding a modifier key while dragging, and deleted by pressing delete, right-clicking, or dragging them back onto the ruler they came from. While dragging, a guide shows its exact pixel position, and it stays marked on the opposite ruler for reference. Guides are saved to the browser's local storage so they are still there after you reload the page. The tool accepts a small set of configuration options, including a light or dark appearance, a custom z-index, a custom color for guide lines, and a way to disable the local storage persistence. It also exposes a small programmatic API for toggling ruler mode, adding or removing guides, and reacting to changes.