If you're a Magento 2 developer encountering a project that uses Hyvä Themes for the first time, a lot of it looks unfamiliar at first: no requirejs-config.js, no Knockout bindings like data-bind, no ui_component XML for forms and listings. Instead: plain .phtml files, Tailwind classes, and a handful of x-data attributes. In this tutorial you'll learn exactly that from the ground up - and by the end you'll build an entire storefront page yourself.

The problem with Luma

Magento's default theme Luma ships a very heavy frontend stack: RequireJS asynchronously loads dozens of JavaScript modules, KnockoutJS handles data binding through observables, and many forms and listings (in the admin area, and partly in the storefront too) are built on the UI Components framework with its own XML declaration language. The result: a large amount of JavaScript that the browser has to parse, compile, and execute before a page is even interactive - even for simple things like a mini cart or a mobile menu.

On top of that: LESS instead of a modern utility-CSS approach, many deeply nested Knockout templates, and a build process that takes quite a while for even small changes. For developers, that means spending a lot of time on frontend performance work that really belongs in the framework's own structure.

What Hyvä does differently

Hyvä Themes isn't another theme that builds on top of Luma - it's a complete replacement for the entire Luma frontend stack. Concretely, that means:

• No Knockout.js - templates are rendered server-side in plain PHP (in .phtml files), just like classic PHP templating.
• No jQuery - browser-side interactivity is handled by the much smaller Alpine.js instead.
• No UI Components on the frontend - forms, filters, and listings are built with regular Layout XML, blocks/ViewModels, and templates.
• No LESS - styling is done with Tailwind CSS, a utility-first CSS framework.

It's important to understand that Hyvä does not replace Magento's core concepts themselves. Layout XML, blocks, DI, plugins, events - all of that stays exactly the same. Hyvä only replaces the frontend layer: how templates look, how interactivity is added, and how CSS is generated.

Why it's noticeably faster

The performance gain isn't a trick - it simply comes from there being far less JavaScript for the browser to load and execute. A standard category page with Luma often loads several megabytes of JavaScript (RequireJS modules, Knockout, jQuery plugins). The same page with Hyvä gets by with a fraction of that, because Alpine.js is tiny and the HTML content is already fully rendered server-side before it reaches the browser - so the browser doesn't have to execute JavaScript just to see any content at all.

That directly affects metrics like Largest Contentful Paint and Time to Interactive - both factors that also feed into Google rankings. Chapter 25 of this series covers performance best practices in detail.

The Hyvä license, briefly

One point that sometimes surprises people at first glance: Hyvä Themes is not pure open source software like the rest of Magento. The core (hyva-themes/magento2-default-theme, or its CSP variant) is distributed under a commercial license by Hyvä Themes GmbH - a project needs a license to use it. That doesn't matter for this tutorial, since we're focusing on the technical concepts, but it's good to know if you're setting up a real project.

What this series builds

The first chapters build up the fundamentals: installation, theme structure, the build process, Layout XML, ViewModels, CSP, Tailwind, and Alpine. Starting in chapter 17, we pull everything you've learned together into a single, continuous example project: an own storefront page with a team overview that can be filtered live using category buttons - complete with Layout XML, a controller, a ViewModel, a Tailwind template, and CSP-compliant Alpine filter logic.