- What is Ghostwire and how does it work with Livewire?
- Ghostwire is a Laravel package by matheusmarnt that adds automatic runtime skeleton loaders to Livewire components. Rather than requiring hand-written placeholder markup, it reads the live DOM at runtime and synthesizes a skeleton from the component's already-rendered output, showing that skeleton while a Livewire request is in flight. Because the skeleton is derived from real markup, it stays visually consistent with the component as it changes. The result is loading states with no parallel skeleton templates to maintain.
- Do I need to write skeleton markup or Blade placeholders to use Ghostwire?
- No. The package is described as zero-markup: skeletons are synthesized at runtime from your live DOM instead of from hand-authored placeholder templates. That means you are not maintaining duplicate skeleton Blade files that drift out of sync with the real component. This is the main difference compared with manually coded skeleton screens or wire:loading placeholder blocks.
- How do I install Ghostwire in a Laravel application?
- Install it with Composer using composer require matheusmarnt/ghostwire, then follow the setup steps in the repository README at github.com/matheusmarnt/ghostwire. Setup details such as provider auto-discovery, publishable config or assets, and any Blade directive or trait are package-specific, so confirm them against the current release. Composer will also surface any version conflicts with your existing Laravel and Livewire constraints.
- Which Laravel and Livewire versions does Ghostwire support?
- Ghostwire targets Laravel applications that use Livewire, but the exact version constraints are defined in the package's composer.json and README rather than in the one-line overview. Check those files before installing, particularly if you are on Livewire 3, an older Livewire release, or an older Laravel version. Running composer require will fail fast if your installed versions fall outside the supported range.
- Will Ghostwire work with my existing Livewire components without changing them?
- The core promise is that no component markup changes are required, since skeletons are generated at runtime from whatever the component renders. That said, you should still verify behavior on components with unusual structures, such as heavy conditional rendering, large tables, or deeply nested children. Rolling it out on a staging copy first is the safest way to confirm the synthesized skeletons look right.
- What performance cost does runtime skeleton generation add?
- Ghostwire builds skeletons in the browser from the live DOM, so the overhead is client-side work per loading state rather than extra server-side template rendering. That typically means some DOM cloning and styling each time a request starts, which is usually cheap but scales with the size and complexity of the component. Profile your heaviest components if you notice jank or slow interactions.
- Can I customize the skeleton appearance or disable it for specific components?
- Styling and per-component opt-out controls depend on the configuration and directives the package exposes, so check the README for the supported options in your installed version. Common patterns are a published config file, a Blade directive, or a component-level attribute. Verify the current knobs before relying on a specific customization in production.
- How do I test Livewire components that use Ghostwire?
- Livewire's built-in test helpers assert component state and rendered HTML, and since Ghostwire's skeletons are a runtime DOM behavior they generally will not appear in those HTML assertions. Test your component logic and rendered output as usual, and verify the skeleton behavior separately in a browser, for example with Laravel Dusk or a manual check. That split keeps your test suite fast while still covering the loading experience.
- How does Ghostwire compare to manual skeletons or plain wire:loading placeholders?
- Manual skeletons and wire:loading blocks require you to author and maintain duplicate placeholder markup for every component you want to cover. Ghostwire removes that duplication by deriving the skeleton from the live DOM at runtime. The tradeoff is less pixel-level control than a hand-crafted skeleton, so pick it when consistency and low maintenance matter more than bespoke loading designs. For very simple cases, a wire:loading spinner may still be sufficient.
- Is Ghostwire production-ready and actively maintained?
- Ghostwire is a small community package from matheusmarnt, so assess its maintenance signals yourself on the GitHub repository: recent commits, tagged releases, open issues, and whether tests are present. Pin a specific version in composer.json and skim the source before depending on it in a production app. For critical user flows, keep a simple fallback loading state in case the runtime behavior does not apply.