MageObsidian: a modern Magento frontend without leaving Magento

The Magento frontend is still tied to a 2015 toolchain: Luma, LESS, RequireJS, Knockout. Every new store inherits a build pipeline that fights you, megabytes of JavaScript nobody asked for, and a developer experience that scares off anyone who learned the trade this decade.

The usual escape hatch is a headless rebuild — valid, but a big bet that pulls your storefront out of Magento entirely. MageObsidian takes a different route: keep Magento’s native layouts, blocks, templates and view models, and swap only the toolchain underneath them for a modern one. No PWA, no second app to keep in sync.

The approach

Instead of replacing Magento’s frontend architecture, MageObsidian replaces its plumbing. The layouts, blocks and view models you already know stay exactly where they are. What changes is how assets are built and shipped: Vite instead of Magento’s legacy build pipeline, TailwindCSS 4 instead of hand-rolled LESS, Vue for the interactive bits, and native ES modules instead of RequireJS.

The Vue components don’t take over the page — they mount as islands, hydrated lazily only where interactivity is needed (mini-cart, search autocomplete, switchers, drawers). The rest of the page stays static HTML rendered by Magento, which is exactly what you want for a content-and-catalog site.

Templates are where it gets interesting: you can keep writing .phtml, or opt into a Twig engine that coexists with it — with real template inheritance and HTML auto-escaping, instead of the manual escaping dance Magento templates make you do today.

Developer experience

Two things change the day-to-day more than anything else.

The first is HMR. With Vite’s dev server, editing a .vue component, a Tailwind class or a Twig template shows up in the browser instantly — no full rebuild, no setup:static-content:deploy in the inner loop. If you’ve ever waited on Magento’s static deploy to see a one-line CSS change, this alone is worth the trip.

The second is dependencies that just work. Pulling an npm library into the storefront is a single command and one line of theme config — then you import it like in any modern project. No RequireJS shims, no requirejs-config.js paths to map, none of the indirection Magento’s legacy JS makes you learn first. RequireJS, Knockout and friends weren’t bad for their era, but the onboarding curve they put in front of a new developer is steep and real — and this removes it. A dev who knows Vite and Vue is productive on day one.

Two layers, re-themable

The theme ships as two stacked themes. theme-base is the neutral, technical foundation; theme-default is the styled skin (the “OBSIDIAN” look) plus a replaceable demo layer. Re-skinning is CSS-first: the whole palette, fonts and radii live in a Tailwind @theme block, so changing a handful of tokens re-flows the entire storefront. Inherit from theme-base for a clean slate, or from theme-default when you want to keep the look and just tweak it.

Where it differs from going headless

Make no mistake — this is disruptive. MageObsidian fully replaces Magento’s legacy frontend: it is not Luma-compatible and inherits nothing from Blank or Luma. It breaks with the old frontend on purpose.

The difference from a headless rebuild is where it breaks. Headless pulls you out of Magento — your storefront becomes a separate app talking to an API, with all the sync and ops that implies. MageObsidian stays inside Magento and reuses its native rendering architecture — the layouts, blocks, templates and view models you already write — and only swaps the toolchain underneath for a modern one (Vite, Vue islands, native ESM, an optional Twig engine). It’s still server-rendered Magento, just without LESS, RequireJS and Knockout, and without a second app to keep in sync. On top of that it reuses Magento’s own translation dictionaries for i18n and emits structured data (JSON-LD) out of the box.

An honest status

It’s young. It targets Magento Open Source 2.4.7+ right now; Adobe Commerce and Mage-OS are not supported yet, though both are on the roadmap. The default theme covers Luma’s surface, but it’s still young and has barely been tested in real production stores. That’s exactly why I’m publishing this: so the community puts it to work and tells me what’s missing.

Try it

• Live demo: mage-obsidian-demo.jeanmarcos.dev
• Docs: mage-obsidian.jeanmarcos.dev
• Install: composer require mage-obsidian/theme-default
• Source: github.com/mage-obsidian

If you work with Magento frontends, I’d genuinely value your feedback — what’s missing for your store, and whether the “modernize without leaving Magento” angle holds up against a real-world checkout.