StringDevRulers

StringDevRulers is a global dev-tool that puts draggable horizontal and vertical guide lines on top of your page. Pull a ruler in from the edge, drop it next to an element, and the line snaps to the nearest edge, center, or configured grid line. Useful for aligning loose pieces without committing to a full layout grid.

When to use it

• Quickly checking that two distant elements share the same horizontal baseline.
• Measuring spacing between unrelated components.
• Temporarily marking where a new element should go before writing CSS.
• Validating an element's edge against a configured column grid.

How to enable

• StringDevRulers is part of the early-access dev-tools set. Before registering it, configure a valid accessDevtoolToken as shown in Developer Tools Overview.
• Register: stringTune.use(StringDevRulers)
• Hotkey: Shift+R
• Dock: click the ruler icon

Minimal setup:

stringTune.use(StringDevRulers);

Then press Shift+R, or click the dock icon, and drag a guide in from the top or left edge of the viewport.

Optional configuration at registration time:

stringTune.use(StringDevRulers, {
  triggers: [
    { type: 'keyboard', key: 'R', shiftKey: true, action: 'toggle' },
  ],
  grid: { type: 'columns', count: 12, margin: '24px', gap: '16px' },
});

What you will see

While active, ruler handles appear on the top and left edges of the viewport. Drag from a handle to pull a guide onto the page. Each guide:

• Is draggable after creation — grab the line and move it.
• Is removable by dragging it back into the ruler chrome, or by middle-clicking the line.
• Snaps to nearby targets, with color-coded feedback:
  • Amber glow — snapping to an element edge or center.
  • Green glow — snapping to a layout-grid line.

The tool supports multiple modes (see below), each with its own set of lines.

Modes

Ruler lines are stored per mode. Use the mode switch in the rulers overlay to cycle between them; the active mode is remembered across reloads.

• Default — freehand guides with element snapping.
• Center — ruler values are shown relative to the viewport center, with a fixed center cross rendered on screen.

Switching modes swaps the visible set of lines. Lines from other modes are preserved and restored when you switch back.

Snapping

Rulers can snap to three kinds of targets:

• nearby element edges and centers
• configured grid lines
• fixed numeric steps

Element snapping

Enabled by default. The tool snaps rulers to the edges and centers of tracked elements within a configurable pull radius.

Settings:

Grid snapping

If you pass a grid or grid-array setting, rulers also snap to those layout lines:

stringTune.use(StringDevRulers, {
  grid: [
    { type: 'columns', count: 12, margin: '24px', gap: '16px' },
    { type: 'rows', size: '64px', gap: '8px' },
  ],
});

There is also a numeric rulers-snap step. Set it to a positive number to snap in uniform increments.

Column overlay

If you only need a quick column or row reference, you can turn on a lightweight overlay without configuring the full grid setting:

stringTune.use(StringDevRulers, {
  'rulers-columns': 12,
  'rulers-margin': '24px',
  'rulers-gap': '16px',
});

A row variant exists too (rulers-rows, rulers-rows-gap).

Visual styling

Tune line color and opacity through the module settings:

stringTune.use(StringDevRulers, {
  'rulers-color': 'rgba(255, 120, 0, 0.8)',
  'rulers-opacity': 0.6,
});

Defaults are a translucent blue at full opacity.

Triggers

Besides the built-in Shift+R, you can register extra triggers for the existing Rulers overlay:

stringTune.use(StringDevRulers, {
  triggers: [
    { type: 'keyboard', key: 'g', ctrlKey: true, action: 'show' },
    { type: 'element', selector: '#open-rulers', event: 'click', action: 'toggle' },
  ],
});

Supported trigger types:

• keyboard — key, shiftKey, ctrlKey, altKey, metaKey, plus action.
• element — selector and optional event (defaults to click).
• event — name on the StringTune event bus, plus optional action.

Actions: toggle, show, hide.

What it attaches to

Rulers are a single global overlay — not an element-level tool. You do not add an attribute to your markup to enable them. Toggle the overlay via the dock, the hotkey, or any custom trigger you registered.

Advanced usage patterns

Grid-backed rulers for page QA

If your team reviews page alignment against a known system, configure the grid once at registration time and keep using free rulers on top of it:

stringTune.use(StringDevRulers, {
  grid: { type: 'columns', count: 12, margin: '24px', gap: '16px' },
  'rulers-snap-threshold': 12,
});

This gives you two layers of feedback:

• the configured grid for structural checks
• movable rulers for one-off measurements and visual notes

Add project-specific entry points

Custom triggers are useful when the dock is not the only place you want to open the overlay. For example, a QA toolbar button can toggle the same built-in Rulers tool:

stringTune.use(StringDevRulers, {
  triggers: [
    { type: 'element', selector: '#open-rulers', event: 'click', action: 'toggle' },
  ],
});

This extends how users reach the existing tool. It does not create a separate rulers workflow or a new dev-tool module.

Registration

import StringTune, { StringDevRulers } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

if (import.meta.env.DEV) {
  stringTune.use(StringDevRulers, {
    grid: { type: 'columns', count: 12, margin: '24px', gap: '16px' },
    'rulers-snap-threshold': 12,
  });
}

stringTune.start(60);

Related

• StringDevLayout — when you need full layout guides attached to a specific element, not free-floating rulers.
• Developer Tools Overview.