Examples
Each example starts with a task and shows the Magento files needed to complete it. If Magewire is new to you, build the counter first; it uses one component class, one PHTML template, and one layout file.
Tutorials
| Build | What you will use |
|---|---|
| A counter | Component, template, and layout binding |
| A customer-name form | Deferred model state, submit action, server validation, repository |
| Two components that communicate | dispatch() and #[On] |
| A paginated list | WithPagination, page controls, last-page boundary |
| A Hyvä compatibility module | Composer packaging, layout extension, Alpine, CSP fragment |
| A Breeze storefront integration | Package installation, reusable component, Breeze-only morph hook |
| An admin editor | Admin layout, ACL, application service |
| Magento flash messages | A Magewire feature and the Hyvä browser bridge |
The examples use Vendor_Module as a placeholder for your enabled Magento
module. Replace it with your module name and check that the matching
storefront or admin integration is installed.
Try a complete interaction
After adding the counter, open your CMS home page and click Increase. The browser should send a Magewire update request and change the count without navigating. A Playwright check shows how to verify that behavior in a project.
When adapting another example, keep its PHP logic in a Magento service when a controller, queue consumer, or second component needs the same rule. Keep only theme-specific browser and styling code in a compatibility module.
Choose an integration package
| Area | Package |
|---|---|
| Hyvä storefront | magewirephp/magewire-hyva-theme |
| Breeze storefront | swissup/module-breeze-magewire |
| Existing Hyvä Checkout V1 components | magewirephp/magewire-hyva-checkout |
| Magento Admin | magewirephp/magewire-admin |
For a theme without an integration package, start with the compatibility-module guide.