Skip to content
@mage-obsidian

Magento Obsidian

README.md

MageObsidian storefront — a modern frontend for Magento

MageObsidian

A modern frontend for Magento 2 — Vite, Tailwind CSS 4, Vue islands and Twig, built on the native Layouts, Blocks and Templates you already know.

📚 Documentation · 🚀 Live demo · ⚡ Getting started · 💬 Discussions · 🎮 Discord

Why MageObsidian?

Magento's stock frontend still ships LESS, RequireJS and jQuery from 2012. MageObsidian replaces that layer with a modern toolchain — native ESM, Vite dev server with HMR, Tailwind CSS 4 and Vue 3 islands — without throwing away Magento itself: layouts, blocks, templates, theme inheritance and the module system all keep working exactly as you know them.

No headless rewrite. No parallel stack to maintain. Your PHP developers keep their workflow; your frontend developers finally get theirs.

Lighthouse report: 100 in Performance, Accessibility, Best Practices and SEO

The live demo scores 100/100/100/100 on Lighthouse.

Highlights

  • ⚡ Vite + HMR inside Magento — instant feedback while editing themes and modules.
  • 🎨 Tailwind CSS 4 with per-theme extension and full theme-inheritance support.
  • 🏝️ Vue 3 islands — interactive components mounted lazily over server-rendered pages.
  • 🌿 Optional Twig engine — write .twig templates alongside .phtml.
  • 🧩 JS interceptors — a JS port of Magento's plugin system (before/around/after) so modules can customize each other's JavaScript without patching source.
  • 📦 Luma-parity storefront — compatibility modules for catalog, checkout, customer, wishlist, reviews and more.

Repositories

Repository Role
module-modern-frontend Core Magento 2 module — start here
module-modern-frontend-cli bin/magento CLI commands
component-modern-frontend Vite build harness mapped into the Magento root
js-package-utils The JS build engine (npm: mage-obsidian)
module-modern-frontend-twig Optional Twig template engine
module-storefront Storefront foundation (Vue islands + Twig components)
theme-default OBSIDIAN — the default theme (live demo)
docs Documentation site (EN/ES)
module-* Domain compatibility modules: catalog, checkout, customer, sales, wishlist, reviews…

Quick start

composer require mage-obsidian/component-modern-frontend
pnpm --prefix vite install
bin/magento setup:upgrade
bin/magento mage-obsidian:frontend:config --generate

Full instructions in the installation guide.

Community

Supported by

Sansec

Sansec supports MageObsidian with an eComscan license, used to audit the live demo for malware and vulnerabilities.

Pinned Loading

  1. framework framework Public

    MageObsidian framework — replaces Magento 2's Luma/LESS/RequireJS frontend with Vite, Tailwind CSS 4, Vue and native ESM. Monorepo of the core module, CLI, Twig engine, Vite harness and JS build en…

    PHP 1

  2. storefront storefront Public

    MageObsidian storefront — Luma-parity Magento 2 storefront built with Vue islands, Twig and Tailwind CSS on native blocks. Monorepo of the domain modules and the base theme.

    PHP 1 1

  3. theme-default theme-default Public

    OBSIDIAN — the default MageObsidian storefront theme for Magento 2 (Vite + Tailwind CSS 4 + Vue islands).

    Twig 2 1

  4. docs docs Public

    Official MageObsidian documentation — bilingual (EN/ES) MkDocs Material site.

    Python 1 1

Repositories

Showing 10 of 30 repositories
View all repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…