Magewire PHP 3

composer update magewirephp/magewire:3.7.2 --with-all-dependencies
composer show magewirephp/magewire

Build interactive Magento interfaces with PHP and PHTML. A Magewire component starts as a Magento layout block, renders a template, and responds to browser events through a PHP class. Magewire updates the rendered HTML without a full page reload.

You can begin with a counter, then use the same pattern for search filters, forms, account tools, or checkout steps. Business logic stays in ordinary Magento services, so multiple components and themes can reuse it.

Magewire 3 uses parts of Livewire 3. These guides show the files and APIs that work in Magento. A ported Livewire class alone does not mean its feature is active; see How to use these docs when adapting an upstream example.

Requirements

Before installing, check:

• PHP 8.2 or newer;
• Magento Open Source or Mage-OS with a Magento 2.4.6-compatible framework or newer;
• a theme integration for the area where your component renders.

For exact platform combinations, consult the core production-build matrix for the release you install.

Installation

Install the core module in your Magento project:

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

For a Hyvä storefront, add the maintained theme integration:

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

For Magento Admin, install magewirephp/magewire-admin. Existing Hyvä Checkout components built for Magewire V1 need the separate checkout compatibility package. For Breeze storefronts, use the swissup/module-breeze-magewire integration.

After deploying static content in production mode, 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

This complete example adds a counter to the CMS home page. It uses an existing Vendor_Module module; replace the vendor and module names with yours.

1. Add a component to your Magento module

This example adds a counter to the CMS home page. Start in an existing, enabled Vendor_Module module. The three files are:

Vendor/Module/
├── Magewire/Counter.php
└── view/frontend/
    ├── layout/cms_index_index.xml
    └── templates/magewire/counter.phtml

<?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++;
    }
}

The public property is browser-visible state. The public method is an action the browser can call; validate and authorize actions that read or change business data.

2. Render it with PHTML

Magewire makes the component available to its template as $magewire:

<div data-testid="magewire-counter">
    <span><?= $escaper->escapeHtml(__('Count: %1', $magewire->count)) ?></span>

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

Keep one root element. Magewire uses it to attach the component snapshot and to update the rendered HTML. Escape text and attributes using Magento's $escaper.

3. Place it with layout XML

The cms_index_index handle places the counter on the CMS home page:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="vendor.module.counter"
                   template="Vendor_Module::magewire/counter.phtml">
                <arguments>
                    <argument name="magewire" xsi:type="object" shared="false">
                        Vendor\Module\Magewire\Counter
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

The magewire argument binds the PHP class to this block. shared="false" gives the block its own component instance, which also makes the pattern safe when you place the same class more than once on a page.

4. Try it

bin/magento cache:clean layout block_html full_page

Open the home page and click Increase. Magewire calls increment() on the server and updates the count without a full page reload. If the block does not appear, confirm the module is enabled and that this page uses cms_index_index.

When the counter works, continue with Basics to pass initial values from layout XML and understand each request.

A form in one glance

The same component pattern works for a form. A plain wire:model binding waits for the next action; wire:submit calls a public PHP method with the current values:

<form wire:submit="save">
    <label for="contact-email"><?= $escaper->escapeHtml(__('Email')) ?></label>
    <input id="contact-email" type="email" wire:model="email">

    <button type="submit" wire:loading.attr="disabled">
        <?= $escaper->escapeHtml(__('Save')) ?>
    </button>
</form>

See wire:model and wire:submit for the matching PHP action, validation, and progress state.

Alpine.js and themes

Magewire's browser runtime includes Alpine.js. Use the Hyvä theme package when building for Hyvä. For Breeze, use its integration package. For a theme without an integration package, create a compatibility module that coordinates script loading and your theme's frontend conventions.

Full-page cache

Cached HTML can contain an old component snapshot. Use lazy loading or wire:init when data must be fetched after page load, and test behavior with your store's full-page cache enabled.

Support and security

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

Published fixes are listed under the repository's security advisories. Each advisory names the affected and fixed releases; upgrade to the fixed release or later.

Next steps

• How to use these docs: find a guide for your task.
• Components: pass layout arguments and reuse a class.
• Compatibility module: package theme integration for reuse.
• 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.