The Hyvä theme has swiftly become an alternative for the traditional Luma theme for Magento 2 stores.
While the Luma theme is considered heavy, complex, and difficult to maintain. Hyvä is a simple and a developer-friendly solution.
This blog addresses the technical differences of switching from Luma to the Hyvä theme for your Magento 2 store.
Technical Differences: Magento 2 Luma to Hyvä
1. Removes Dependency on RequireJS
Luma relies heavily on RequireJS for module loading and dependency management. The scripts are initialized using:
- data-mage-init
- x-magento-init
- and direct require() calls.
Hyvä eliminates the RequireJS completely.
Instead, it uses Alpine.js and vanilla JavaScript, making the frontend faster and easier to debug.
Scripts are modular, inline, and scoped directly in templates or components — no extra JS bundling or async complexity.
2. Inlining and Initializing Scripts
Luma’s inline script initialization often follows this pattern:
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"exampleComponent": {
"component": "Vendor_Module/js/example"
}
}
}
}
}
</script>
Hyvä replaces this with simple, inline Alpine.js directives, such as:
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open">Hello Hyvä!</div>
</div>
This drastically reduces complexity — no need for JSON-based initialization or RequireJS calls.
3. From mage/template to x-magento-template
Luma uses mage/template and Underscore.js for rendering templates dynamically:
var tmpl = mageTemplate('#template-id');
tmpl({ data: value });
Hyvä abandons this pattern and leverages Alpine.js reactivity with inline bindings, making the DOM manipulation process more direct, readable, and maintainable.
4. Handling Data Attributes
Luma often reads and writes data using jQuery’s data() method:
var value = $(element).data('key');
$(element).data('key', 'newValue');
Hyvä continues to use HTML5’s native data-* attributes, but interacts with them using modern JavaScript rather than jQuery. This shift makes scripts lighter and independent from the jQuery library.
5. Replacing Underscore and jQuery Utility Functions
Many functions depend on Underscore and jQuery utilities in Luma, such as:
_.isObject(x)
$.each(array, function(index, value) { ... });
Hyvä removes both libraries completely. Instead, developers use native JavaScript methods like:
typeof x === 'object'
array.forEach((value, index) => { ... });
This helps reduce page size and improves performance while maintaining readability.
6. Rendering Arrays with Alpine.js
Instead of using Magento UI components or Underscore templates to loop through data, Hyvä uses x-for in Alpine.js:
<ul> <template x-for="item in items" :key="item.id"> <li x-text="item.name"></li> </template> </ul>
This syntax is simple, reactive, and works without additional JavaScript dependencies.
7. Converting Luma CSS to Tailwind
Luma’s styling is based on LESS and a complex system of mixins and variables.
Yes – It is powerful but bloated.
Hyvä uses Tailwind CSS, a utility-first framework. Developers can quickly style elements using predefined classes:
<button class="bg-blue-600 text-white px-4 py-2 rounded">Submit</button>
Wrapping Up
This makes styling consistent, scalable, and easier to maintain, while reducing CSS size dramatically. Overall, migrating from Luma to Hyvä is more than a design upgrade — it’s a complete frontend transformation.
