Magewire V3 — Now Available

Reactive Magento
without the JavaScript

Ship reactive Magento 2 UIs in pure PHP. No JavaScript. No context switching. Just you and your code.

254 stars 1.1M Packagist installs

PHP 8.2+ Magento 2.4.4+ Open Source — MIT Powers Hyvä Checkout

<?php

declare(strict_types=1);

namespace Vendor\Module\Magewire;

use Magewire\Component;

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

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

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

<?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="counter"
                template="Vendor_Module::magewire/counter.phtml">
                <arguments>
                    <argument
                        name="magewire"
                        xsi:type="object">
                        Vendor\Module\Magewire\Counter
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

<div class="counter">

    <p class="count">
        Count: <strong>{{ $magewire->count }}</strong>
    </p>

    <button wire:click="increment">Increment</button>
    <button wire:click="decrement">Decrement</button>

</div>

This is just a counter. Magewire handles forms, modals, search, pagination, real-time validation, and much more. Explore the docs, get inspired, and ship something great.

Get started

Install

Three commands. You're up and running.

Terminal

$ composer require magewirephp/magewire

$ php bin/magento module:enable Magewirephp_Magewire

$ php bin/magento setup:upgrade

✓ Magewire is ready. Happy building!

Need more? Everything else is in the documentation.

Familiar by Design

Know Livewire?
You already know Magewire.

A faithful port of Laravel Livewire for Magento 2. Same component model. Same wire: directives. Same mental model. If you know Livewire, you're already productive.

Component class

Laravel · Livewire Counter.php

<?php

namespace App\Livewire;

use Livewire\Component;

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

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

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

Magento 2 · Magewire Counter.php

<?php

namespace Vendor\Module\Magewire;

use Magewire\Component;

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

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

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

Two lines changed. Zero new concepts.

Template

Laravel · Livewire counter.blade.php

<div>

    <h2>{{ $count }}</h2>

    <button wire:click="decrement">−</button>
    <button wire:click="increment">+</button>

</div>

Magento 2 · Magewire counter.phtml

<div>

    <h2>{{ $magewire->count }}</h2>

    <button wire:click="decrement">−</button>
    <button wire:click="increment">+</button>

</div>

Same wire: directives. Different template engine. That's it.

Theme Support

Compatibility

Open Source

Contributors

Every commit, fix, and bright idea traces back to these people — and the teams who champion Magewire as their own.

People

Willem Poortman

Vinai Kopp

Kiel

Tjitse

Ryan Hissey

Adam

Angel Vilaplana

Anton Siniorg

Dan-Andrei Rotariu

Jacob

Jeroen Boersma

Jeroen Noten

Jisse Reitsma

Kamil Balwierz

Lucas van Staden

Mark Shust

Martin Nguyen

Mehmet Uygun

Pascal Sopacua

Peter Jaap Blaakmeer

Pieter Hoste

Ross

Thomas Hauschild

kolaente

mvenghaus

Organizations

Hyvä

Built with Magewire

Powered by Magewire.

Real products. Build with Magewire.

Reactive Magento without the JavaScript