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

Pinned Loading

  1. component-modern-frontend component-modern-frontend Public

    Vite build harness for MageObsidian — ships the vite.config.js and package.json mapped into the Magento 2 root via Composer.

    JavaScript 3 1

  2. module-modern-frontend module-modern-frontend Public

    Modern frontend core for Magento 2 — replaces Luma/LESS/RequireJS with Vite, Tailwind CSS 4, Vue and native ESM while keeping Magento layouts, blocks and templates.

    PHP 2 1

  3. theme-default theme-default Public

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

    Twig 1

  4. module-storefront module-storefront Public

    MageObsidian Storefront foundation — Luma-parity storefront built with Vue islands, Twig components and Tailwind CSS on native Magento 2 blocks.

    TypeScript 1

  5. module-modern-frontend-twig module-modern-frontend-twig Public

    Optional Twig template engine for MageObsidian ModernFrontend. Installing it registers a .twig engine alongside Magento's native .phtml.

    PHP 1

  6. js-package-utils js-package-utils Public

    MageObsidian JS build engine (npm: mage-obsidian) — theme inheritance resolution, precompilation and JS interceptors for Vite builds of Magento 2 frontends.

    JavaScript 1

Repositories

Showing 10 of 25 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…