PHPackages                             mrfelipemartins/wirebones - 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. [Utility & Helpers](/categories/utility)
4. /
5. mrfelipemartins/wirebones

ActiveLibrary[Utility & Helpers](/categories/utility)

mrfelipemartins/wirebones
=========================

Automatic skeleton placeholders for lazy Livewire components.

v0.1.1(1mo ago)70341↑700%1[3 PRs](https://github.com/mrfelipemartins/wirebones/pulls)MITPHPPHP ^8.2CI passing

Since Apr 27Pushed 4w ago2 watchersCompare

[ Source](https://github.com/mrfelipemartins/wirebones)[ Packagist](https://packagist.org/packages/mrfelipemartins/wirebones)[ RSS](/packages/mrfelipemartins-wirebones/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (2)Dependencies (11)Versions (6)Used By (0)

 [![Wirebones](art/wirebones.svg)](art/wirebones.svg)

Wirebones
=========

[](#wirebones)

Automatic skeleton placeholders for lazy Livewire components.

Wirebones captures the real rendered layout of your Livewire components in Chromium, converts it into compact skeleton markup, and serves that markup through Livewire's lazy placeholder flow.

Instead of hand-maintaining loading states that drift from the final UI, mark a component with `#[Wirebone]`, run a build, and let Wirebones generate production-ready placeholder Blade files.

Requirements
------------

[](#requirements)

- PHP 8.2+ with Laravel 12, or PHP 8.3+ with Laravel 13
- Laravel 12 or 13
- Livewire 4
- Node.js with Playwright Chromium installed

Installation
------------

[](#installation)

Install the package with Composer:

```
composer require mrfelipemartins/wirebones
```

Install Playwright in your application:

```
npm install --save-dev playwright
npx playwright install chromium
```

Publish the configuration file when you need to customize capture or rendering behavior:

```
php artisan vendor:publish --tag=wirebones-config
```

Getting Started
---------------

[](#getting-started)

Add the `#[Wirebone]` attribute to a Livewire component and point `route` to a page where that component is rendered:

```
use Livewire\Component;
use MrFelipeMartins\Wirebones\Attributes\Wirebone;

#[Wirebone(route: '/dashboard')]
class Revenue extends Component
{
    public function render()
    {
        return view('livewire.revenue');
    }
}
```

Render the component using Livewire delayed loading:

```

```

Livewire 4 also supports deferred loading and bundled lazy requests:

```

```

Run your Laravel app, then build the skeletons:

```
php artisan wirebones:build
```

By default, Wirebones uses `config('app.url')` as the base URL. You may also pass a URL explicitly:

```
php artisan wirebones:build http://localhost:8000
```

Attribute Options
-----------------

[](#attribute-options)

```
use MrFelipeMartins\Wirebones\Attributes\Wirebone;

#[Wirebone(
    name: 'revenue-card',
    route: '/dashboard',
    breakpoints: [375, 768, 1280],
    wait: 800,
    leafTags: ['p', 'h1', 'h2'],
    excludeTags: ['svg'],
    excludeSelectors: ['[data-no-wirebone]'],
    captureRoundedBorders: true,
)]
```

- `name`: generated placeholder lookup name. Defaults to the Livewire-style component name.
- `route`: page Wirebones visits to capture the component.
- `breakpoints`: viewport widths to capture.
- `wait`: milliseconds to wait after page load before capturing.
- `leafTags`: tags captured as content bones.
- `excludeTags`: tags ignored during capture.
- `excludeSelectors`: CSS selectors ignored during capture.
- `captureRoundedBorders`: whether rendered border radius should be captured.

Commands
--------

[](#commands)

List discovered Wirebone components:

```
php artisan wirebones:list
```

Build all generated placeholders:

```
php artisan wirebones:build
```

Build one or more components by Wirebone name:

```
php artisan wirebones:build --component=revenue-card
php artisan wirebones:build --component=revenue-card --component=user-table
```

Clear generated placeholder files:

```
php artisan wirebones:clear
```

Show the browser or print capture diagnostics while building:

```
php artisan wirebones:build --headed --debug
```

Configuration
-------------

[](#configuration)

The published `config/wirebones.php` file controls capture, auth, generated output, and skeleton rendering.

Common options:

```
'breakpoints' => [375, 768, 1280],

'wait' => 800,

'viewport_height' => 900,

'compiled_path' => storage_path('framework/wirebones/views'),

'animation' => 'pulse', // pulse, shimmer, solid

'render_containers' => true,

'responsive_strategy' => 'viewport', // viewport, container
```

Rendering values such as colors, animation, shimmer angle, and container rendering are baked into generated Blade files. Re-run `wirebones:build` after changing them.

Authenticated Routes
--------------------

[](#authenticated-routes)

If a captured route requires authentication, configure a build user and protect build mode with a token:

```
WIREBONES_BUILD_TOKEN=secret-build-token
WIREBONES_AUTH_USER_ID=1
WIREBONES_AUTH_GUARD=web
```

Wirebones will authenticate the Laravel request while build mode is active.

For applications that need browser-level auth, configure cookies, headers, or a Playwright storage state file:

```
'auth' => [
    'guard' => env('WIREBONES_AUTH_GUARD', 'web'),
    'user_id' => env('WIREBONES_AUTH_USER_ID'),
    'cookies' => [
        ['name' => 'session', 'value' => env('WIREBONES_SESSION'), 'domain' => 'localhost', 'path' => '/'],
    ],
    'headers' => [
        'Authorization' => 'Bearer '.env('WIREBONES_API_TOKEN'),
    ],
    'storage_state' => storage_path('app/wirebones-storage-state.json'),
],
```

You may also pass cookies and headers directly to the build command:

```
php artisan wirebones:build \
    --cookie="session=abc123" \
    --header="Authorization: Bearer token"
```

Local Development
-----------------

[](#local-development)

Wirebones includes a Vite plugin that watches changed Livewire component PHP files and Blade views, then rebuilds only affected skeletons.

Import the plugin from the Composer package:

```
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import wirebones from './vendor/mrfelipemartins/wirebones/vite/index.js'

export default defineConfig({
    plugins: [
        laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true }),
        wirebones(),
    ],
})
```

The Laravel app server must already be running. The plugin runs only during `vite serve`, debounces changes, and executes targeted builds like:

```
php artisan wirebones:build --component=revenue-card
```

Production
----------

[](#production)

Generated placeholders are build artifacts. A typical deployment should:

1. Install Composer and Node dependencies.
2. Ensure Playwright Chromium is available in the build environment.
3. Run the Laravel application so configured capture routes are reachable.
4. Run `php artisan wirebones:build`.
5. Run `php artisan view:cache` if your deployment caches views.

Laravel Boost
-------------

[](#laravel-boost)

Wirebones ships a Laravel Boost skill at:

```
resources/boost/skills/wirebones-development/SKILL.md

```

When users run Laravel Boost with package skill discovery, Boost can install this skill so AI agents understand Wirebones conventions, commands, generated Blade artifacts, authenticated captures, and the Vite auto-rebuild workflow.

License
-------

[](#license)

[MIT](LICENSE.md)

###  Health Score

46

—

FairBetter than 92% of packages

Maintenance93

Actively maintained with recent releases

Popularity30

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity40

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

2

Last Release

43d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/24225909?v=4)[Felipe Martins](/maintainers/mrfelipemartins)[@mrfelipemartins](https://github.com/mrfelipemartins)

---

Top Contributors

[![mrfelipemartins](https://avatars.githubusercontent.com/u/24225909?v=4)](https://github.com/mrfelipemartins "mrfelipemartins (4 commits)")

###  Code Quality

TestsPest

Static AnalysisPHPStan

### Embed Badge

![Health badge](/badges/mrfelipemartins-wirebones/health.svg)

```
[![Health](https://phpackages.com/badges/mrfelipemartins-wirebones/health.svg)](https://phpackages.com/packages/mrfelipemartins-wirebones)
```

###  Alternatives

[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

719160.4k12](/packages/tallstackui-tallstackui)[illuminate/queue

The Illuminate Queue package.

20432.2M1.5k](/packages/illuminate-queue)[livewire/flux

The official UI component library for Livewire.

9466.8M119](/packages/livewire-flux)[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k449.3k30](/packages/tightenco-jigsaw)[laravel/ai

The official AI SDK for Laravel.

9782.1M153](/packages/laravel-ai)[psalm/plugin-laravel

Psalm plugin for Laravel

3325.1M337](/packages/psalm-plugin-laravel)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)