This content originally appeared on DEV Community and was authored by Alechko
TL;DR.
Your LLM isn’t missing logic — it’s missing runtime state.
HTML and code describe intention, but only a runtime snapshot shows what the interface actually did.
Visibility, overlays, async validators, and virtualized lists — all of that defines what the model really needs to know.
The problem: HTML and code aren’t the ground truth
Code describes intent.
HTML describes structure.
But bugs happen in what actually rendered and ran:
Elements exist in the DOM but are not visible (tabs, modals, overlays).
Inputs flip disabled after async validation.
Virtualized lists include off-viewport items.
Race conditions cause delayed UI changes.
Lazy elements trigger on brief intersects during fast scroll.
LLMs that see only static HTML or code must guess.
Give them runtime snapshots — and guessing stops.
What a runtime snapshot actually is
A useful snapshot isn’t a screenshot.
It’s a machine-readable state — what was really there and how it behaved.
{
"meta": {
"url": "https://example.com/signup",
"timestamp": "2025-10-26T07:31:12Z",
"viewport": {"w": 1536, "h": 695},
"scroll": {"x": 0, "y": 1420}
},
"elements": [
{
"role": "button",
"selector": "#submit",
"text": "Create account",
"visible": false,
"disabled": true,
"computed": {"opacity": 0.5},
"why_invisible": ["covered-by: #spinner", "ancestor[aria-hidden=true]"],
"validation": {"ready": false, "pending": ["emailAsyncCheck"]}
},
{
"role": "input",
"selector": "#email",
"value": "alex@example.com",
"validity": {"valid": false, "customError": "MX lookup failed"}
}
],
"events_recent": [
{"type": "input", "target": "#email", "t": -420},
{"type": "network", "target": "/check-email", "status": 200, "t": -360}
]
}
That snapshot explains why the “Submit” button was disabled — no need for a 500-word bug report.
Case study: the “blink-and-load” trap
Scenario.
In long virtualized lists, images lazy-load when visible.
Fast scrolling causes hundreds of off-screen items to briefly intersect — wasting bandwidth and delaying what the user actually stopped on.
Static code says:
“Load when visible.” ✅
Runtime snapshot shows:
intersected: true but visible_ms: 28 and visible_now: false. ❌
Snapshot extract:
{
"list_item": {
"selector": "li[data-team='Eagles']",
"intersections": [{"t": -220, "ratio": 0.12, "ms": 28}],
"visible_now": false,
"image": {"src": "placeholder.svg", "lazy_loaded": false}
}
}
Now you can ask your LLM:
“Propose a throttling rule that loads images only if visible_now=true for ≥150 ms or ratio≥0.5.”
It answers deterministically — with measurable fixes, not vibes.
Why logs and screenshots aren’t enough
Screenshots show how it looked, not how it behaved.
Console logs show what you logged, not what the UI was.
HTML shows structure, not visibility, validation, or timing.
A runtime JSON snapshot is your UI’s flight recorder — it captures what actually happened.
A simple LLM prompt template
When the model receives consistent snapshot structure, prompts stay clean:
You receive a JSON snapshot {meta, elements[], events_recent[]}.
Task: explain why #submit is disabled and propose minimal fix.
Rules:
- Use visibility, disabled, validity, and why_invisible.
- If async validation pending, suggest UX feedback (spinner/notice) and debounce.
- If aria-hidden or overlay blocks pointer, propose z-index/focus fix.
Output: {root_cause[], minimal_fix[], test_to_reproduce[]}
Checklist for teams
Capture runtime, not static code.
Include visibility, disabled, validity, overlays, and recent events.
Keep snapshots consistent and small (before/after).
Ask LLM for root cause → minimal diff → reproducible test.
Treat snapshots as fixtures — review diffs in PRs.
The bigger picture
E2LLM began as a browser add-on.
Now teams use it to stream runtime snapshots → JSON RAG feeds into their LLM stacks.
That’s the next layer: UI-state → machine context.
Stop describing bugs.
Start capturing reality.
This content originally appeared on DEV Community and was authored by Alechko
Alechko | Sciencx (2025-10-26T09:31:34+00:00) 🧩 Runtime Snapshots #4 — The Invisible JSON: when hidden state breaks your LLM. Retrieved from https://www.scien.cx/2025/10/26/%f0%9f%a7%a9-runtime-snapshots-4-the-invisible-json-when-hidden-state-breaks-your-llm/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.