https://github.com/openforgeproject/mageforge
MageForge is a Magento 2 module designed to assist frontend developers in streamlining their workflow and enhancing productivity.
https://github.com/openforgeproject/mageforge
build-automation build-automation-tool cli-tool developer-tools development frontend-development hyva hyva-community hyva-module hyva-themes magento-development magento-theme magento2 magento2-module magento2-module-free theme-builder workflow-enhancement
Last synced: about 1 month ago
JSON representation
MageForge is a Magento 2 module designed to assist frontend developers in streamlining their workflow and enhancing productivity.
- Host: GitHub
- URL: https://github.com/openforgeproject/mageforge
- Owner: OpenForgeProject
- License: other
- Created: 2024-08-21T13:34:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-01-17T12:18:28.000Z (2 months ago)
- Last Synced: 2026-01-18T15:56:26.093Z (2 months ago)
- Topics: build-automation, build-automation-tool, cli-tool, developer-tools, development, frontend-development, hyva, hyva-community, hyva-module, hyva-themes, magento-development, magento-theme, magento2, magento2-module, magento2-module-free, theme-builder, workflow-enhancement
- Language: PHP
- Homepage:
- Size: 684 KB
- Stars: 10
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# MageForge for Magento 2
[](https://github.com/OpenForgeProject/mageforge/releases) [](LICENSE) [](https://www.codefactor.io/repository/github/openforgeproject/mageforge) [](https://github.com/OpenForgeProject/mageforge/actions/workflows/magento-compatibility.yml) [](https://github.com/OpenForgeProject/mageforge/actions/workflows/functional-tests.yml)
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](./docs/custom_theme_builders.md) |
---
### 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:
```bash
composer require openforgeproject/mageforge
```
2. Enable the module:
```bash
bin/magento module:enable OpenForgeProject_MageForge
bin/magento setup:upgrade
```
### Quick Start Guide
1. List available themes:
```bash
bin/magento mageforge:theme:list
```
2. Build a theme:
```bash
bin/magento mageforge:theme:build
```
Example: `bin/magento mageforge:theme:build Magento/luma`
3. Start development watch mode:
```bash
bin/magento mageforge:theme:watch
```
4. Generate Hyvä design tokens (for Hyvä themes):
```bash
bin/magento mageforge:hyva:tokens
```
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**:
```bash
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:
```bash
bin/magento mageforge:theme:inspector disable
```
---
## Additional Documentation
- [Advanced Usage Guide](./docs/advanced_usage.md) - Tips, tricks and troubleshooting
- [Custom Theme Builders Documentation](./docs/custom_theme_builders.md) - Extend MageForge for your custom themes
- [Commands Documentation](./docs/commands.md) - Detailed command reference
## Support
- **Report Bugs/Features**: [GitHub Issues](https://github.com/OpenForgeProject/mageforge/issues)
- **Discussions**: [GitHub Discussions](https://github.com/OpenForgeProject/mageforge/discussions)
- **Contributing**: See [Contributing Guidelines](./CONTRIBUTING.md)
## Project Information
- **License**: [LICENSE](LICENSE)
- **Changelog**: [CHANGELOG](CHANGELOG.md)
---
Thank you for using MageForge!