DEV Community

Cover image for 🧩 Runtime Snapshots #14: From Clipboard to Pipeline
Alechko
Alechko

Posted on

🧩 Runtime Snapshots #14: From Clipboard to Pipeline

#webdev #llm #devtools #javascript

Previously in this series: we captured runtime DOM state as structured JSON and piped it into LLMs. Every snapshot lived in your clipboard — useful, but ephemeral. You'd capture, paste, done. No history, no comparison, no automation.

v2.8.0 changes that.

What's New: Save to File

There's now a toggle in the popup: Clipboard or File.

When you pick File, the snapshot lands in Downloads/sifr-captures/ with a filename like:

sifr-vvvvvvv_com-20260310-151338.json
Enter fullscreen mode Exit fullscreen mode

Format: sifr-{hostname}-{YYYYMMDD}-{HHmmss}.json

That's it. No config required. The directory is created automatically on first capture.

Under the hood it's SiFR v2 JSON — the same structured, salience-weighted format you already know. Nothing changes about what gets captured. You just stop losing it.

Why This Matters: The Pipeline Unlock

Clipboard mode treats snapshots as messages. File mode treats them as records.

Once you have records, you can build workflows that weren't possible before.

1. LLM batch processing

You've been capturing five different states of a UI as you test it. Now you can feed them all to an LLM in sequence:

import json, glob, anthropic

client = anthropic.Anthropic()
snapshots = sorted(glob.glob("Downloads/sifr-captures/sifr-myapp-*.json"))

for path in snapshots:
    with open(path) as f:
        snapshot = f.read()

    response = client.messages.create(
        model="claude-opus-4-6",
        max_tokens=1024,
        messages=[{
            "role": "user",
            "content": f"Analyze this UI state for accessibility issues:\n\n{snapshot}"
        }]
    )
    print(f"\n--- {path} ---")
    print(response.content[0].text)
Enter fullscreen mode Exit fullscreen mode

No copy-paste loop. No lost context between captures.

2. Build a UI history log

If you're working on a complex multi-step flow (wizard, form, checkout), capture a snapshot at each step. You now have a complete record of the UI journey:

sifr-app-20260310-140001.json  ← step 1: landing
sifr-app-20260310-140045.json  ← step 2: form filled
sifr-app-20260310-140112.json  ← step 3: confirmation
sifr-app-20260310-140130.json  ← step 4: success
Enter fullscreen mode Exit fullscreen mode

Feed the whole sequence to an LLM with a single prompt: "Here are 4 snapshots of a checkout flow. Find UX friction points across the journey."

The SiFR v2 Format: A Quick Refresher

For those new to the series — SiFR v2 is E2LLM's structured DOM representation. It's not raw HTML, not a screenshot, not a DOM dump. It's a semantic compression:

  • ~300KB typical output vs 2–3MB raw DOM
  • Salience scoring — nodes ranked high/med/low by visual and functional prominence
  • Spatial clusters — page regions with detected roles (nav, form, content, etc.)
  • Action markers — clickable, fillable, hoverable nodes explicitly flagged
  • Relationship graph — alignment, containment, proximity between elements

This is what makes file-based workflows practical. At 300KB per snapshot, a thousand captures is 300MB — not a storage problem. At 2–3MB per raw DOM export, the same thing becomes unwieldy fast.

Get It

Chrome: E2LLM on Chrome Web Store

Firefox: E2LLM on Firefox Add-ons

Prompts & examples: Here

Toggle File mode in the popup. The sifr-captures/ folder will appear in your Downloads after the first capture.

Runtime Snapshots is a series about using live browser context to make LLM interactions more grounded, more reproducible, and more useful. Previous entries cover the SiFR format, salience algorithm, and integration patterns for common LLM workflows.

Issues, ideas, and pipeline experiments welcome on GitHub.

Top comments (0)