# Livewire Snapshot Extractor

> Extract Livewire component snapshots (v2, v3, v4) as structured context for Claude Code and other AI coding assistants

Canonical page: [https://chrome-stats.com/d/livewire-snapshot-extractor](https://chrome-stats.com/d/livewire-snapshot-extractor)

## Overview

- **ID:** `livewire-snapshot-extractor`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Jefferson Simão Gonçalves
- **Category:** web-development
- **Daily users:** 6
- **Rating:** 5.00 / 5 (1 ratings)
- **Version:** 1.0.1
- **Last updated:** 2026-03-28
- **First published:** 2026-03-25
- **Size:** 28 KB
- **Data as of:** 2026-09-08
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/livewire-snapshot-extractor/)
- **Privacy policy:** [https://addons.mozilla.org/firefox/addon/livewire-snapshot-extractor/privacy/](https://addons.mozilla.org/firefox/addon/livewire-snapshot-extractor/privacy/)

## Description

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).

## Rankings

- #40,619 — Overall
- #51 — component
- #130 — email extractor
- #185 — extract

## Permissions and access

### Permissions

- `activeTab`
- `clipboardWrite`

## Safety

- **Risk impact:** Low risk impact
- **Risk likelihood:** Moderate risk likelihood

### Analysis details

- Allows reading and modifying clipboard content, which can be sensitive, posing a moderate privacy risk.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Livewire devtools](https://chrome-stats.com/d/livewire-devtools) — 10 users
- [Web to AI Agent](https://chrome-stats.com/d/web-to-ai-agent) — 3 users
- [Bunny Inspector](https://chrome-stats.com/d/bunny-inspector) — 1 users
- [Element Snapshot](https://chrome-stats.com/d/element-snapshot) — 2 users
- [Loggy - Console + Network Log Collector](https://chrome-stats.com/d/5dcdd43f5fa642e69f21) — 50 users
- [Lumist Hue Extractor](https://chrome-stats.com/d/lumist-hue-extractor)
- [SnapAI: Sidebar for Claude](https://chrome-stats.com/d/snapai-sidebar-for-claude) — 1 users
- [Living Web: AI Assistant & Content Summarizer](https://chrome-stats.com/d/living-web-ai-assistant) — 2 users, 5.00 / 5
- [DOM Snipper Studio Pro](https://chrome-stats.com/d/dom-snipper-studio-pro)
- [lilHelper](https://chrome-stats.com/d/lilhelper) — 2 users, 5.00 / 5
- [Blazor Developer Tools](https://chrome-stats.com/d/blazor-developer-tools) — 8 users
- [ScrapLLM - Web to Markdown for AI](https://chrome-stats.com/d/scrapllm)

---

Source: [Chrome-Stats](https://chrome-stats.com/d/livewire-snapshot-extractor)