Livewire Snapshot Extractor Autor: Jefferson Simão Gonçalves

Livewire Snapshot Extractor gives Laravel developers instant visibility into the live state of every Livewire component on screen — formatted and ready to paste into Claude Code, Cursor, GitHub Copilot, or any AI coding assistant as structured screen context.
Supports Livewire v2, v3, and v4 out of the box.

The Problem
When asking an AI assistant to help debug or extend a Livewire page, you have to manually describe what components exist, what properties they hold, and how they are nested. This is tedious, error-prone, and gives the AI shallow context.

The Solution
One click extracts everything. The extension reads wire:snapshot and wire:id attributes directly from the DOM, reconstructs the full component tree, and formats the result as clean Markdown, JSON, or a compact one-liner — sized to fit comfortably in any AI context window.

Key Features
• Supports Livewire v2, v3, and v4 — full extraction via wire:snapshot (v3/v4) and wire:initial-data (v2)
• Slim Mode strips Livewire internals (checksum, htmlHash, dataMeta, listeners…) keeping only what matters for AI context
• Three output formats: Markdown (best for Claude Code), JSON (structured data), and Compact (minimum tokens)
• Live payload size display — see raw DOM size vs. final output size before copying
• Depth, Array, and String sliders to fine-tune output without re-extracting
• Full component hierarchy showing parent/child relationships
• Per-component selection — include only the components relevant to your question
• Works entirely in-browser — no server, no tracking, no data ever leaves your machine
• Minimal permissions: activeTab, scripting, and clipboardWrite only

How to Use
• Navigate to any page built with Livewire
• Click the ⚡ icon in your browser toolbar
• Components and their current state appear instantly
• Select the components you want, choose a format, and click Copy
• Paste into Claude Code: "Here is the current screen state — [paste]"

Supported Livewire Versions
• Livewire 4.x — full extraction via wire:snapshot
• Livewire 3.x — full extraction via wire:snapshot
• Livewire 2.x — extraction via wire:initial-data

Perfect for
• Debugging reactive Livewire components with AI assistance
• Describing the current screen state without typing it manually
• Reviewing live property values during development
• Teams using Claude Code, Cursor, GitHub Copilot, or similar tools

Privacy
This extension operates entirely in your local browser. It makes no outbound network requests, requires no account, and collects no analytics or telemetry of any kind. The only permissions requested are activeTab (to read the DOM of the current page), scripting (to inject the extraction script), and clipboardWrite (to copy the output).