MageForge is a powerful CLI front-end development toolkit for Magento 2 that simplifies theme development workflows. It provides tools for many types of Magento themes and can be easily extended for custom themes.
- Supported Magento Versions
- Features
- Getting Started
- Additional Documentation
- Support
- Project Information
- Credits
MageForge requires Magento 2.4.7 or higher with PHP 8.3 or higher. Please ensure that your Magento installation meets this requirement before installation.
| Theme Type | Support Status |
|---|---|
| 🎯 Magento Standard | ✅ Fully Supported |
| 🚀 Hyvä (TailwindCSS 3.x / 4.x) | ✅ Fully Supported |
| 🔄 Hyvä Fallback | ✅ Fully Supported |
| 🎨 Custom TailwindCSS (no Hyvä) | ✅ Fully Supported |
| 💼 Avanta B2B | ✅ Fully Supported |
🥰 Your Custom Theme (css, sass, less, ... ) |
Create your own Builder |
| Command | Description | Aliases |
|---|---|---|
mageforge:theme:list |
Lists all available themes | frontend:list |
mageforge:theme:build |
Builds selected themes (CSS/TailwindCSS) | frontend:build |
mageforge:theme:watch |
Starts watch mode for theme development | frontend:watch |
mageforge:theme:clean |
Clean theme static files and cache directories | frontend:clean |
mageforge:theme:inspector |
Enable, disable or check status of Frontend Inspector | - |
mageforge:hyva:compatibility:check |
Check modules for Hyvä theme compatibility issues | hyva:check |
mageforge:hyva:tokens |
Generate Hyvä design tokens (Hyvä themes only) | hyva:tokens |
mageforge:system:version |
Shows current and latest version of the module | system:version |
mageforge:system:check |
Get system information (OS, PHP, Database, Node.js, etc.) | system:check |
-
Install the module via Composer:
composer require openforgeproject/mageforge
-
Enable the module:
bin/magento module:enable OpenForgeProject_MageForge bin/magento setup:upgrade
-
List available themes:
bin/magento mageforge:theme:list
-
Build a theme:
bin/magento mageforge:theme:build <theme-code>
Example:
bin/magento mageforge:theme:build Magento/luma -
Start development watch mode:
bin/magento mageforge:theme:watch <theme-code>
-
Generate Hyvä design tokens (for Hyvä themes):
bin/magento mageforge:hyva:tokens <theme-code>
This creates a
generated/hyva-tokens.cssfile from your design tokens configuration. -
Enjoy automatic CSS rebuilding as you work on your theme files!
The MageForge Inspector is a powerful developer tool that allows you to inspect Magento blocks, templates, and performance metrics directly in your browser.
Key Features:
- Structure Analysis: View template paths, block classes, and module names for any element.
- Performance Metrics: See PHP render times and cache status (lifetime, tags).
- Web Vitals: Monitor LCP, CLS, and INP metrics per element.
- Accessibility Checks: Inspect ARIA roles, contrast ratios, and alt text.
How to use:
-
Enable the Inspector in the CLI:
bin/magento mageforge:theme:inspector enable(Note: Requires Magento Developer Mode)
-
Enable the Inspector in Magento Admin Settings You can activate the Inspector in Magento Admin under
Stores > Configuration > MageForge > Frontend Inspector. -
Usage in Browser:
- Toggle: Press
Ctrl+Shift+I(Windows/Linux) orCmd+Option+I(macOS). - Inspect: Hover over elements to see details. Click to lock the inspector on a specific block.
- Toggle: Press
To disable the inspector:
bin/magento mageforge:theme:inspector disableNote: The Inspector is currently not compatible with Magewire components. Magewire blocks are automatically excluded from inspection to prevent rendering errors.
- Advanced Usage Guide - Tips, tricks and troubleshooting
- Custom Theme Builders Documentation - Extend MageForge for your custom themes
- Commands Documentation - Detailed command reference
- Report Bugs/Features: GitHub Issues
- Discussions: GitHub Discussions
- Contributing: See Contributing Guidelines
MageForge uses the following third-party libraries:
| Library | Author | License |
|---|---|---|
| Tabler Icons | codecalm | MIT |
Thank you for using MageForge!