Magewire PHP 3

Magewire brings reactive, server-driven components to Magento. Components are PHP classes rendered through Magento layout and .phtml templates; browser interactions update them over Magewire requests without a full page reload.

Magewire 3 ports selected parts of Livewire 3 into Magento. This documentation links to Livewire 3 when an API behaves the same and documents Magento integration, Magewire additions, and compatibility differences locally.

Requirements

Magewire 3 currently requires:

• PHP 8.2 or newer;
• Magento Open Source or Mage-OS with a Magento 2.4.6-compatible framework or newer;
• a theme integration suitable for the storefront or admin area where Magewire runs.

The continuous-integration matrix is the most precise compatibility record. Magewire 3.5 is tested across Magento Open Source 2.4.6 through 2.4.9, Mage-OS 1.3 through 3.2, and PHP 8.2 through 8.5 in compatible combinations.

Installation

Install and enable the core module:

composer require magewirephp/magewire
bin/magento module:enable Magewirephp_Magewire
bin/magento setup:upgrade

For a Hyvä storefront, install its separate integration package:

composer require magewirephp/magewire-hyva-theme
bin/magento module:enable Magewirephp_MagewireHyvaTheme
bin/magento setup:upgrade

Deploy static content in production mode, then clean the Magento caches:

bin/magento setup:static-content:deploy
bin/magento cache:clean

See Theming for other theme integrations and Admin for the separate admin package.

Quickstart

The following example creates a component, registers it through Magento layout XML, and renders it from a .phtml template.

1. Create the component class

Create the component below inside your Magento module:

<?php

declare(strict_types=1);

namespace Vendor\Module\Magewire;

use Magewirephp\Magewire\Component;

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }
}

Public properties hold the component state. Public methods can be called from the template, so treat their arguments as untrusted input and perform the same validation and authorization you would use in a controller.

2. Create the template

The corresponding template reads state through the injected $magewire variable:

<div>
    <span>
        <?= $escaper->escapeHtml(__('Counter: %1', $magewire->count)) ?>
    </span>

    <button type="button" wire:click="increment">
        <?= $escaper->escapeHtml(__('Increase')) ?>
    </button>
</div>

Every component template must have one root HTML element. Magewire attaches the component snapshot to that element and morphs its contents after an update.

3. Bind it in layout XML

Add a block to the layout handle where the component should appear:

<referenceContainer name="content">
    <block name="vendor.module.counter"
           template="Vendor_Module::magewire/counter.phtml">
        <arguments>
            <argument name="magewire" xsi:type="object">
                Vendor\Module\Magewire\Counter
            </argument>
        </arguments>
    </block>
</referenceContainer>

The built-in layout resolver turns the block's magewire argument into the component instance. Custom resolvers are available for integrations that cannot use this standard block-and-argument shape.

4. Clear layout caches and try it

bin/magento cache:clean layout full_page

Open the page represented by the layout handle. Clicking Increase sends a Magewire update request, calls increment(), renders the template again, and morphs the changed counter into the existing DOM.

Continue with Basics to learn how layout arguments reach component properties and lifecycle methods.

Alpine.js and themes

Magewire's browser runtime includes Alpine.js. A theme compatibility package is responsible for coordinating that runtime with the theme; the core package is theme-agnostic. Do not remove a theme's Alpine integration globally. Follow the compatibility package's loading strategy so exactly one compatible Alpine instance starts on a page.

Full-page cache

Cached HTML can contain an old serialized component snapshot. Use lazy loading or wire:init when fresh state is required after the page loads. The experimental magewirephp/magewire-fpc companion package also provides a dedicated integration for Magewire 3; evaluate it against the caching stack used by your project.

Support and security

Use the Magewire GitHub repository for public bug reports and discussions.

Next steps

• Documentation model: understand what is delegated to Livewire 3 and what is documented locally.
• V3 versus V1: understand the runtime and migration differences.
• Lazy loading: defer expensive components.
• Application container: resolve Magento services from ported or extension code.
• Architecture: explore mechanisms, features, and extension points.