StringDevLayout

StringDevLayout is an element-scoped dev-tool. You opt an element in by adding string="layout", and the tool attaches a small HUD to its top-right corner. From the HUD you can stack multiple guide types on top of that element: columns, rows, a center cross, rule of thirds, a golden rectangle, or a dot grid.

A global instance is also available for drawing page-wide guides without attaching to any specific element.

When to use it

• Verifying that a hero section sits on a 12-column grid.
• Checking that a composed illustration lines up with a golden rectangle.
• Overlaying a dot grid on top of a page to verify spacing rhythm.
• Exporting a layout configuration from one element and re-importing it on another.

How to enable

• StringDevLayout 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(StringDevLayout)
• Declare a host: add string="layout" on the element you want to inspect.
• Hotkey: Shift+L
• Dock: click the layout icon
• Global grid: use the global settings control next to the layout icon in the dock to open a HUD that draws onto the whole page.

Minimal setup:

stringTune.use(StringDevLayout);

<section string="layout"></section>

Then press Shift+L, or click the dock icon, and click the trigger badge on the element you want to inspect.

You may have any number of string="layout" elements; each gets its own HUD and its own saved state.

What you will see

• A trigger badge anchored to the top-right of the element. Clicking it toggles the HUD.
• A HUD panel with:
  • A list of active guides (columns, rows, dots, etc.) each with a toggle and a drag handle to reorder.
  • An add-guide button that opens a picker for built-in grid types.
  • A settings panel per guide (step size, counts, colors, shape for dot grids, etc.).
  • A responsive switcher (S, M, ...) that swaps the layout configuration per breakpoint.
  • Export / Import buttons for copying a configuration between elements.

The trigger badge stacks cleanly when multiple string="layout" elements overlap: deeper elements get an offset so all badges are reachable.

Built-in grid types

You can also extend the built-in Layout tool with your own grid type at registration time:

stringTune.use(StringDevLayout, { adapters: [MyAdapter] });

See GridAdapter if you need to add a custom guide type to StringDevLayout. This extends the existing Layout tool; it is not a separate dev-tool module workflow.

Interactions

• Drag a list item to reorder how guides stack.
• Toggle the switch next to a list item to hide that guide without deleting it.
• Click a list item to open its settings panel.
• Click the + button to add a new guide type on top.
• Rename the panel title to remind yourself what each layout block represents.
• Rename an instance (individual guide in the list) so "Columns" can become "Article grid".
• Export downloads the current configuration as a JSON file. Import opens a file picker and loads a JSON export back in.
• Responsive switcher keeps distinct guide sets per breakpoint. When the HUD is closed, Layout falls back to the breakpoint resolved for the current viewport; while the HUD is open, you can inspect and edit a specific layout directly.

If you are opening Layout for the first time, the shortest path is: enable the tool, click the badge on one element, add Columns, then adjust count, margin, and gap until the overlay matches the design you are checking.

What it attaches to

• Element mode: elements that declare string="layout" receive a HUD.
• Global mode: a page-wide instance is available through the dock's global settings control. No HTML attribute required.

Saved layouts survive reloads and soft navigations. Elements with stable string-id or DOM id are the most reliable; unnamed elements fall back to a generated DOM-path storage key, which depends on the page structure staying stable.

Advanced usage patterns

Element guide plus page guide

Use both Layout modes together when the question is partly local and partly global:

• Open the global Layout HUD to establish the page-wide rhythm.
• Add string="layout" to one component that needs extra scrutiny.
• Compare the local grid to the global one without leaving the same overlay family.

This is usually cleaner than trying to solve both problems with Rulers alone.

Reusable layout presets

Export / Import is useful when your team reuses the same composition logic across several templates:

• Create a guide stack once on a reference component.
• Export the JSON.
• Import it into other string="layout" hosts that should follow the same visual system.

This keeps the built-in Layout tool consistent across pages without introducing project-specific dev-tool code.

Extend the existing Layout tool

If the built-in guide catalog is close but not enough, you can extend StringDevLayout with extra adapters while still keeping the same HUD, persistence, and workflow:

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

const stringTune = StringTune.getInstance();

if (import.meta.env.DEV) {
  stringTune.use(StringDevLayout, {
    adapters: [MyAdapter],
  });
}

That is an extension point for the built-in Layout tool, not a separate dev-tool authoring path.

Registration

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

const stringTune = StringTune.getInstance();

if (import.meta.env.DEV) {
  stringTune.use(StringDevLayout);
}

stringTune.start(60);

<section string="layout">
  <!-- your layout content -->
</section>

Related

• GridAdapter — extend StringDevLayout with a custom guide type.
• StringDevRulers — complementary tool for one-off guide lines that are not tied to a layout element.
• Developer Tools Overview.