PHPackages make-dev/orca-harpoon - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. make-dev/orca-harpoon ActiveLibrary make-dev/orca-harpoon ===================== Extract HTML elements into Livewire components with a single click. OrcaHarpoon lets you visually inspect any element on your page and instantly scaffold a new Livewire component from it. v0.2.1(1mo ago)07MITBladePHP ^8.4 Since Mar 14Pushed 1mo agoCompare [ Source](https://github.com/lets-make-dev/orca-harpoon)[ Packagist](https://packagist.org/packages/make-dev/orca-harpoon)[ RSS](/packages/make-dev-orca-harpoon/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (2)Versions (6)Used By (0) [![Orca Logo](art/logo.png)](art/logo.png) Extract any HTML element into a Livewire component with a single click. Point. Click. Component. OrcaHarpoon turns visual element inspection into instant Livewire scaffolding — complete with AI refactor prompts for seamless source code integration. [![PHP 8.4+](https://camo.githubusercontent.com/25012e98b640e282284d84348b9c496c315c270928666c27e504e5fa10802102/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e342b2d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://php.net)[![Laravel 12](https://camo.githubusercontent.com/cefd0d247fb4898c829a8e41b76d9663721d33c7b486e081b00e91141ca83051/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322d4646324432303f6c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://laravel.com)[![Livewire 4](https://camo.githubusercontent.com/5513bec6793441dab166e52f8cc0c9961c6c39862ebefa2c5e290203f2c63d64/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d342d4642373041393f6c6f676f3d6c69766577697265266c6f676f436f6c6f723d7768697465)](https://livewire.laravel.com) What is OrcaHarpoon? -------------------- [](#what-is-orcaharpoon) OrcaHarpoon is a developer tool that lets you visually inspect any element on your page and instantly scaffold a fully-wired Livewire component from it. It generates the PHP class, Blade view, and service provider registration — then produces an AI refactor prompt so Claude can replace the original HTML with your new `@livewire()` tag. Quick Start ----------- [](#quick-start) ``` composer require make-dev/orca-harpoon ``` That's it. OrcaHarpoon auto-injects into every page in local environments via middleware. How It Works ------------ [](#how-it-works) ``` 1. Click the harpoon icon (bottom-left corner) 2. Hover over elements — a blue highlight follows your cursor 3. Click an element to capture it 4. Name your component (PascalCase, e.g. TaskQueue) 5. Click "Harpoon It" ``` OrcaHarpoon then: - Creates `Modules/{Module}/app/Livewire/{ComponentName}.php` extending `MakeDevModuleComponent` - Creates `Modules/{Module}/resources/views/livewire/{component-name}.blade.php` with the captured HTML - Adds `Livewire::component()` registration to the module's service provider - Stores an AI refactor prompt in the session for [Orca](../Orca) to pick up - Dispatches a `harpoon-complete` Livewire event with all file paths and the refactor prompt The generated component includes transition traits, module metadata, overlay positioning, and Agent README support out of the box. Features -------- [](#features) - **Visual Element Inspector** — Browser-native DOM inspection with live blue highlight overlay, element tag + class labels, and XPath generation. - **One-Click Scaffolding** — Generates a complete Livewire component: PHP class, Blade view, and service provider registration in a single action. - **PascalCase Validation** — Client-side and server-side validation ensures component names follow convention. - **AI Refactor Prompts** — Automatically generates a structured prompt that instructs Claude to find the source Blade code and replace it with `@livewire('component-alias')`. - **Orca Integration** — Refactor prompts are stored in the session (`orca.pending_harpoon_refactor`) so Orca can pick them up after the Vite file-watcher triggers a page refresh. - **Module-Aware** — Automatically detects which module owns the current page from the route's controller namespace and scopes all generated files to that module. UI States --------- [](#ui-states) StateVisualInteraction**Idle**Harpoon icon button (dark, bottom-left)Click to start inspecting**Inspecting**Pulsing blue button + highlight overlay following cursorClick any element to capture, Esc to cancel**Naming**Modal dialog with XPath, HTML preview, name input, prompt previewEnter name and click "Harpoon It", Esc to cancel**Success**Green toast notificationAuto-dismisses after 5 secondsConfiguration ------------- [](#configuration) Publish the config file: ``` php artisan vendor:publish --tag=orcaharpoon-config ``` VariableDefaultDescription`MODULE_ORCA_HARPOON_ENABLED``true`Enable/disable OrcaHarpoon entirelyOrcaHarpoon only activates in the **local environment** (`app()->isLocal()`). It will never appear in production. Generated Component Example --------------------------- [](#generated-component-example) When you harpoon an element named `TaskQueue` in the `DemoSimpleHomepage` module, you get: **`Modules/DemoSimpleHomepage/app/Livewire/TaskQueue.php`** ``` namespace Modules\DemoSimpleHomepage\Livewire; use MakeDev\MakeDev\Concerns\TransitionFadeIn; use MakeDev\MakeDev\Concerns\TransitionFadeOut; use MakeDev\MakeDev\Livewire\MakeDevModuleComponent; class TaskQueue extends MakeDevModuleComponent { use TransitionFadeIn, TransitionFadeOut; public function moduleInfo(): array { return [ 'name' => 'TaskQueue', 'description' => 'Extracted component from DemoSimpleHomepage.', 'version' => '1.0.0', // ... ]; } public function render() { return view('demosimplehomepage::livewire.task-queue'); } } ``` **`Modules/DemoSimpleHomepage/resources/views/livewire/task-queue.blade.php`** Contains the captured outer HTML from the browser. Architecture ------------ [](#architecture) ``` src/ ├── Http/Middleware/ │ └── InjectOrcaHarpoon.php # Auto-injects component into HTML responses ├── Livewire/ │ └── Harpoon.php # Core extraction logic and file generation └── Providers/ └── OrcaHarpoonServiceProvider.php config/ └── orcaharpoon.php # Enable/disable toggle resources/views/livewire/ └── harpoon.blade.php # Alpine.js UI (inspector, modal, toast) ``` ### Middleware Guards [](#middleware-guards) The `InjectOrcaHarpoon` middleware only injects when all conditions are met: - Environment is `local` - Config `orcaharpoon.enabled` is `true` - Request does not have `X-Livewire` header (skips Livewire updates) - Response Content-Type contains `text/html` Requirements ------------ [](#requirements) - PHP 8.4+ - Laravel 12 - Livewire 4 - [MakeDev](../MakeDev) (for `MakeDevModuleComponent` base class and transition traits) License ------- [](#license) MIT ### Health Score 38 — LowBetter than 85% of packages Maintenance89 Actively maintained with recent releases Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 5 Last Release 56d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/c488f9e276a7e4c13fc9e633597d588c20330c9e81b3bfc3c9b09a084f3d9b10?d=identicon)[949mac](/maintainers/949mac) --- Top Contributors [![MikeCraig418](https://avatars.githubusercontent.com/u/23151962?v=4)](https://github.com/MikeCraig418 "MikeCraig418 (6 commits)") --- Tags laravellivewiredeveloper-toolscomponent-extraction ### Embed Badge ![Health badge](/badges/make-dev-orca-harpoon/health.svg) ``` [![Health](https://phpackages.com/badges/make-dev-orca-harpoon/health.svg)](https://phpackages.com/packages/make-dev-orca-harpoon) ``` ### Alternatives [livewire/volt An elegantly crafted functional API for Laravel Livewire. 4195.3M84](/packages/livewire-volt)[mhmiton/laravel-modules-livewire Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules. 236409.6k9](/packages/mhmiton-laravel-modules-livewire)[ramonrietdijk/livewire-tables Dynamic tables for models with Laravel Livewire 21147.4k](/packages/ramonrietdijk-livewire-tables)[lakm/laravel-comments Integrate seamless commenting functionality into your Laravel project. 40012.9k1](/packages/lakm-laravel-comments)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)