Hero bf magento frontend en

What Is a Magento Frontend? Luma, Hyvä, PWA Studio, Headless and FMP Explained

What Is a Magento Frontend? Luma, Hyvä, PWA Studio, Headless and FMP Explained

If you run Adobe Commerce or Magento 2, the hardest decision rarely sits in the backend. The catalog, the cart, the pricing logic, and the checkout are settled. The real question is: what do we render the storefront with, the part your customers actually see? That is the Magento frontend, and today there is more than one answer. This piece maps the five common options, Luma, Hyvä, PWA Studio, a fully headless setup, and a Frontend Management Platform (FMP), shows the trade-offs, and explains when decoupling from the backend pays off.

What is a Magento frontend, and why does the choice matter now?

A Magento setup has two halves. The backend is the commerce engine: product data, cart, pricing, promotions, taxes, orders. The frontend is the presentation layer: the pages, templates, and interactions that reach the browser. In a classic Magento build, the two halves are tightly wired together. The frontend renders server-side from PHP templates that live in the same application stack as the business logic.

That coupling was the default for a long time, but it has consequences. Load times, developer experience, and the speed at which your team ships new pages and campaigns depend almost entirely on this layer. Since Magento 2, several ways to build the frontend differently have emerged, some still coupled, some fully decoupled. The choice determines how fast your storefront is, how comfortable your team is working in it, and how independent you become from the backend release cycle.

The five frontend options at a glance

Luma, the native default theme

Luma (and the Blank theme underneath it) is the frontend that ships with Magento out of the box. It renders server-side through PHP, layout XML, PHTML templates, RequireJS, and Knockout.js. The upside: it is already there, it knows every Magento feature, and practically every Marketplace extension is built for it.

The price is performance. The frontend stack is heavy, the JavaScript bundles are large, and good Core Web Vitals scores are hard work with Luma. The developer experience is also particular: anyone coming from the modern JavaScript world finds Knockout.js and layout XML awkward. Luma is a solid choice for smaller catalogs, tight budgets, or teams already deep in the PHP Magento ecosystem.

Hyvä

Hyvä is a replacement theme that swaps out the Luma frontend stack without leaving the Magento backend. Instead of Knockout.js and RequireJS, Hyvä relies on Tailwind CSS and Alpine.js and drops most of the bundled JavaScript. The result is much leaner pages and noticeably better performance, often without touching your backend architecture.

The important framing: Hyvä is coupled. It still renders server-side inside Magento; it only replaces the frontend technology. That keeps the switch manageable for existing Magento teams and keeps you close to the backend. The downside: extensions built for Luma often need a Hyvä compatibility layer, and you stay tied to the Magento rendering path. For many mid-sized stores, Hyvä is today the pragmatic sweet spot between performance and effort.

PWA Studio

PWA Studio is Adobe's own approach to a decoupled frontend. It is a React-based toolkit (with Venia as the reference storefront) that talks to the backend through Magento's GraphQL API. The frontend runs as a standalone Progressive Web App, separate from the PHP stack.

That gives you a modern JavaScript codebase, app-like navigation, and the freedom to deploy the frontend independently. The effort is real, though: PWA Studio is complex, the learning curve is steep, and the community is smaller than the one around Hyvä. You also take on responsibilities that Luma handles for you, such as SEO rendering, caching, and rebuilding features that simply exist in the native theme. PWA Studio suits teams with React skills who deliberately want a decoupled, Adobe-native frontend.

Fully headless

Fully headless means the frontend is a completely standalone project of your choosing, built on Next.js, Nuxt, or another modern framework, and Magento is just one of several data sources behind it. Communication runs through the GraphQL or REST APIs. Unlike PWA Studio, you are not tied to Adobe's toolkit.

This is the most flexible option. You can pick the best framework for your team, combine multiple backends (for example Magento for commerce, a separate CMS for content, a search engine like Algolia), and scale and ship the frontend independently. The price is responsibility: you build and operate the entire integration layer, the caching, the SEO rendering, and the data orchestration yourself. A fully headless project is a genuine engineering effort, not a theme swap. It pays off when frontend differentiation, multi-backend requirements, or multiple touchpoints are in play.

Frontend Management Platform (FMP)

A Frontend Management Platform takes the headless idea, decoupling the frontend from the backend, and layers an operations and editorial layer on top. Instead of building every integration, the caching, the rendering, and the editor yourself, you get that layer as a product. Magento stays the commerce backend, the frontend renders decoupled, and your team assembles pages in a visual editor rather than triggering a deploy for every change.

The difference from raw headless is in the operations. With fully headless, your team owns and maintains the entire frontend machinery. An FMP takes over the recurring parts, the data layer, the performance tuning, the editor interface, and lets your team work on content and experience. That is the approach behind Laioutr's Composable Headless Frontend: the benefits of decoupling without every project starting from zero.

Comparison: trade-offs at a glance

  • Dimension | Luma | Hyvä | PWA Studio | Fully headless | FMP
  • Coupling to backend | Tightly coupled | Coupled | Decoupled | Decoupled | Decoupled
  • Performance ceiling | Low | High | High | Very high | Very high
  • Developer experience | Knockout/XML | Tailwind/Alpine | React toolkit | Free choice | Editor plus framework
  • Extension compatibility | Full | Partial, bridge needed | Limited | Self-built | Via integration layer
  • Frontend operating effort | Low | Low to medium | High | Very high | Covered as a product
  • Multi-backend capable | No | No | Limited | Yes | Yes
  • Fits | Small catalogs | Mid-sized stores | React teams | Differentiation | Teams without a frontend foundation

When you should decouple the frontend from the backend

Not every setup needs to be decoupled. A small store with a stable catalog and a tight budget is often better served by Luma or Hyvä than by its own headless project. Decoupling pays off when you recognize one of the following patterns.

First: frontend performance is a business problem and the coupled stack cannot keep up, despite caching and optimization. Second: your team ships too slowly because every campaign or landing page depends on a deploy and the backend release cycle. Third: you need more than one backend, such as a separate search engine, a dedicated CMS, or several commerce systems behind one brand. Fourth: you serve multiple touchpoints (web, app, in-store) from the same data layer.

When those patterns show up, the next question is not whether, but how much frontend machinery you want to own. Fully headless gives you maximum control at maximum responsibility. An FMP like Laioutr's Composable Storefront gives you the decoupling without your team building and maintaining the integration, caching, and editor layer from scratch.

FAQ

Is Hyvä the same as headless? No. Hyvä swaps the frontend technology but still renders server-side inside Magento and stays coupled to the backend. Headless means the frontend is a standalone project that talks to Magento through APIs.

Do I have to switch my Magento backend to decouple? No. PWA Studio, a fully headless frontend, and an FMP all talk to your existing Adobe Commerce or Magento 2 through the GraphQL or REST APIs. The backend stays; only the presentation layer moves up front.

What is the difference between PWA Studio and fully headless? PWA Studio is Adobe's own React toolkit with prescribed conventions. Fully headless means you choose the framework and architecture freely, and Magento can be just one data source among several.

Where does a Frontend Management Platform fit in? An FMP is decoupled like headless, but ships the operations layer (data connectivity, performance, visual editor) as a product. It fits teams that want the benefits of decoupling without building the entire frontend infrastructure themselves.

What is the fastest performance win without a large project? For most coupled Magento stores, moving from Luma to Hyvä is the most pragmatic step. It improves performance noticeably without touching the backend architecture.

More from the Laioutr Platform

Next step

Want to know which frontend option fits your Magento or Adobe Commerce setup? Talk to the Laioutr team and we'll walk through your current architecture, from Luma to FMP, and show you where decoupling makes sense and where it does not.

Más artículos interesantes

Conocimiento práctico sobre desarrollo frontend, agentes inteligentes y headless

App Shopify
Shopify
Shopify es una plataforma de comercio para vender online y en tienda física.
App shopware
Shopware
Shopware es una plataforma de e-commerce flexible de origen europeo para catálogos de productos y comercio omnicanal.
App adobe commerce
Adobe Commerce
Adobe Commerce es una plataforma de comercio empresarial para escenarios B2C y B2B complejos y globales.
Planned
App B2B sellers suite
B2Bsellers
Suite B2B para Shopware que convierte la tienda online en una plataforma profesional de comercio B2B.
Planned
App commerce layer
Commerce Layer
Commerce Layer es una plataforma de headless commerce para que inventarios y catálogos estén disponibles online.
App commercetools
Commercetools
Commercetools es una plataforma de e-commerce headless basada en SaaS y utilizada en todo el mundo.
App emporix
Emporix
Emporix es una plataforma de composable commerce API-first para escenarios B2B y B2C escalables.
Planned
App HCL Software
HCL Software
Suite empresarial de comercio y experiencia digital con un alto grado de configurabilidad.
Planned
App intershop
Intershop
Plataforma de comercio empresarial para modelos de negocio B2B y B2C complejos.
Planned
App magento 2
Magento 2
Plataforma de comercio ampliable y muy extendida para escenarios B2C y B2B.
App Oxid
OXID eShop
OXID eShop es una plataforma de comercio ampliable para requisitos B2B y B2C complejos.
Planned
App cover patchworks
Patchworks
Patchworks es un iPaaS low-code que conecta e-commerce, ERP, WMS, 3PL y marketplaces.
Planned
App PRESTASHOP
Prestashop
Plataforma de comercio open source para pequeños y medianos comerciantes en Europa y más allá.
Planned
App saleor
Saleor
Plataforma de comercio open source y API-first basada en GraphQL para storefronts a medida.
Planned
App Commercecloud
Salesforce Commerce Cloud
Salesforce Commerce Cloud es una plataforma de comercio empresarial en la nube para empresas de cualquier tamaño.
Planned
App SAP
SAP Commerce Cloud
Plataforma de comercio empresarial para catálogos complejos, modelos de precios y recorridos omnicanal.
Planned
App SCAYLE
Scayle
SCAYLE es un motor de comercio con el que marcas y comerciantes escalan su negocio.
Planned
App spryker
Spryker
Plataforma de composable commerce para modelos de negocio B2B y B2C exigentes.
App Sylius
Sylius
Sylius es un framework de e-commerce pensado para desarrolladores y para experiencias de compra B2C y B2B.
Planned
App vendure
Vendure
Vendure es una plataforma de headless commerce para empresas con requisitos complejos.
Coming Soon
App VTEX
VTEX
Plataforma de composable commerce cloud native para B2B y B2C a gran escala.
Planned
App Websale
Websale
Backend de comercio estable y apto para grandes empresas en entornos comerciales complejos.
Book a demo mobile
Llamada estratégica

¿Listos para convertir su frontend en una capa de control?

Muéstranos tu stack, tu roadmap, tu escenario de replatforming, y te mostraremos cómo encaja Laioutr, cuánto cuesta y qué tan rápido puedes estar en producción.

"Después de 30 minutos supimos que Laioutr hace viable nuestro replatforming." - Daniel B., CEO, hygibox.de

SEO / GEO / AEO Ready
Rendimiento y Core Web Vitals
WCAG 3.0 Ready
Seguimiento & Analytics
Consistencia de marca