StringDevProgress

StringDevProgress is an element-scoped dev-tool for elements that use string="progress". It adds a play-button badge next to each matching element so you can open a floating panel and:

Scrub the element's progress with a slider.
Type an exact numeric value.
Play the timeline forward or backward automatically.
See which target element you are currently controlling.

While the panel is open, the element's runtime progress is overridden by your manual value. Closing the panel returns control to the element's normal StringProgress runtime behavior.

When to use it

Previewing a progress-driven animation without scrolling the whole page.
Checking what an element looks like at a specific checkpoint such as 33% or 90%.
Comparing the slider position with the eased progress value applied to the element.
Auto-playing through an animation to spot jumps, discontinuities, or broken interpolations.

How to enable

StringDevProgress 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(StringDevProgress)
Hotkey: Shift+P
Dock: click the progress icon
Target elements: any element with string="progress"

Minimal setup:

TypeScript

stringTune.setupSettings({
  accessDevtoolToken: import.meta.env.VITE_STRING_TUNE_DEVTOOLS_TOKEN,
});

stringTune.use(StringProgress);

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

Then press Shift+P, or click the dock icon, and click the play badge next to any string="progress" element.

What you will see

A play badge next to the tracked element.
When clicked, a floating control panel, with:
- A slider from 0 to 100%.
- A numeric input to type a percentage directly.
- A play forward and play backward button for autoplay.
- The target label so you can confirm you are controlling the right element.

Only one panel is open at a time. Clicking outside the panel closes it.

Drag the slider or type into the number field. While you are interacting, the element receives your override instead of its normal runtime value. The slider controls raw progress, while the numeric field reflects the eased progress applied to the element.

If your easing curve is not linear, those two values may differ. That is expected.

Autoplay

Click play forward to play from 0 to 1. Click play backward to play from 1 to 0. Autoplay stops when it reaches the end, or the moment you:

Press the button again.
Touch the slider.
Type into the number field.
Close the panel.

Override cleanup

When you close the panel (click outside, or click the badge again), the manual value is cleared. The element's progress immediately snaps back to whatever the scroll state dictates. When you close the panel (click outside, or click the badge again), the manual value is cleared. The element's progress immediately snaps back to whatever StringProgress currently resolves for that element.

If dev-tools are unloaded entirely while a panel is open, every active override is cleared, so the page is never left in a forced state.

What it attaches to

The tool attaches only to elements whose string="..." attribute includes progress. No extra dev-tool attribute is needed.

Internally, the override does not modify your source attributes — it only shadows them while the panel is open.

Advanced usage patterns

Tune timeline geometry with Inview, then values with Progress

StringDevProgress is strongest when paired with StringDevInview:

Use Inview to confirm the enter/exit markers are correct.
Open the Progress panel for the same element.
Scrub to exact checkpoints such as 25%, 50%, and 75%.
Adjust runtime attributes only after you know whether the problem is geometry or interpolation.

This avoids wasting time changing easing when the real issue is a bad start/end range.

Use stable ids for review-heavy pages

The floating panel shows the current target label. On pages with many progress elements, adding explicit string-id values makes the tool much easier to use during QA and review:

HTML

<section string="progress" string-id="hero-reveal"></section>
<section string="progress" string-id="gallery-intro"></section>
<section string="progress" string-id="pricing-exit"></section>

This is especially useful when designers and developers are discussing exact checkpoints on a shared screen.

Registration

TypeScript

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

const stringTune = StringTune.getInstance();

stringTune.setupSettings({
  accessDevtoolToken: import.meta.env.VITE_STRING_TUNE_DEVTOOLS_TOKEN,
});

stringTune.use(StringProgress);

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

stringTune.start(60);

HTML

<section
  string="progress"
  string-id="hero-reveal"
  string-easing="ease-out-cubic"
>
  <!-- content that animates against --progress -->
</section>

StringProgress — the runtime module this tool controls.
StringDevInview — use together to see where the progress track starts and ends geometrically.
Developer Tools Overview.