MageForge for Magento 2

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 your custom theme. With MageForge, themes can be built lightning fast, without your developers having to worry about the details. MageForge eliminates complex configuration requirements and significantly reduces setup time, allowing Magento developers to focus on creative aspects instead of struggling with build processes.

Supported Magento Versions

MageForge requires Magento 2.4.7 or higher. Please ensure that your Magento installation meets this requirement before installation.

Features

Supported Theme-Types 🎨

| 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 |

Available Commands

| 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 |

Getting Started

Installation

1. Install the module via Composer:

   composer require openforgeproject/mageforge
   

2. Enable the module:

   bin/magento module:enable OpenForgeProject_MageForge
   bin/magento setup:upgrade
   

Quick Start Guide

1. List available themes:

   bin/magento mageforge:theme:list
   

2. Build a theme:

   bin/magento mageforge:theme:build <theme-code>
   

   Example: bin/magento mageforge:theme:build Magento/luma

3. Start development watch mode:

   bin/magento mageforge:theme:watch <theme-code>
   

4. Generate Hyvä design tokens (for Hyvä themes):

   bin/magento mageforge:hyva:tokens <theme-code>
   

   This creates a generated/hyva-tokens.css file from your design tokens configuration.

5. Enjoy automatic CSS rebuilding as you work on your theme files!

Frontend Inspector 🕵️

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:

1. Enable the Inspector in the CLI:

   bin/magento mageforge:theme:inspector enable
   

   (Note: Requires Magento Developer Mode)

2. Enable the Inspector in Magento Admin Settings You can activate the Inspector in Magento Admin under Stores > Configuration > MageForge > Frontend Inspector.

3. Usage in Browser:

   • Toggle: Press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (macOS).
   • Inspect: Hover over elements to see details. Click to lock the inspector on a specific block.

To disable the inspector:

bin/magento mageforge:theme:inspector disable

Additional Documentation

• Advanced Usage Guide - Tips, tricks and troubleshooting
• Custom Theme Builders Documentation - Extend MageForge for your custom themes
• Commands Documentation - Detailed command reference

Support

• Report Bugs/Features: GitHub Issues
• Discussions: GitHub Discussions
• Contributing: See Contributing Guidelines

Project Information

• License: LICENSE
• Changelog: CHANGELOG

Thank you for using MageForge!