A web standards storefront and checkout suite for Magento 2 and Mage-OS.
Server rendered HTML, HTMX fragments, Lit 3 web components and a signals based checkout on top of Magento's own REST API. No jQuery, no Knockout.js, no RequireJS on the storefront.
One package pulls the ten storefront modules. Then setup:upgrade, assign the theme, enable the checkout flag and load the Varnish VCL: the full procedure is in docs/install.md.
Measured numbers
148 ms
Home page LCP on the live demo, warm cache
0.000
Cumulative layout shift, Lighthouse mobile and desktop on the live demo
0 KB
jQuery, Knockout.js and RequireJS on the storefront
12
Composer packages: 11 modules and one theme
Measured on 2026-11-03 against the live demo (demo.hyperionfront.dev: Magento Open Source 2.4.9 on PHP 8.5, Varnish 8, Luma sample data, one small VPS) over the internet with the repository's own pw-perf.mjs, warm Varnish and browser caches, median of three runs: home TTFB 76 ms and LCP 148 ms, category page 72 ms and 144 ms, product page 74 ms and 304 ms, 51 to 55 requests and 0 third party requests per page, 98 KB of JavaScript and 18 KB of CSS transferred on the home page. Lighthouse 12 on the same three pages: performance 98 to 99 on mobile and 100 on desktop, accessibility 100, best practices 100, CLS 0, total blocking time 14 to 80 ms on mobile (SEO 91 because the sample data pages carry no meta description). It is a reproducible measurement on a live store, not a benchmark against another setup.
How it works
Hyperion is a Magento theme with no parent theme plus eleven PHP modules. The page is complete when PHP has rendered it; JavaScript upgrades markup that is already there.
Server rendered HTML, light DOM components
Every page comes out of Magento's layout and .phtml templates (85 core templates are overridden). Lit 3 components render in the light DOM, so the Tailwind utilities of the theme reach them and a component that arrives late upgrades a server rendered skeleton with the same geometry instead of inserting itself.
HTMX fragments, one session request
Filters, sorting, page size, cart lines, wishlist and compare swap HTML fragments that PHP renders. Cached pages carry empty placeholders and the header fills the account menu, the mini-cart count and the wishlist and compare state with a single request to /hyperion/header/state; every HTMX action answers with the toast and the fragments it changed.
Varnish at the edge
The shipped VCL extends the one Magento generates: the top menu is an ESI include with its own TTL, public fragments such as the search dropdown are cached with X-Magento-Tags and banned on save, filter permutations share a cache entry through query string sorting, and HTML leaves Varnish as no-store so a browser never holds a page rendered for another customer group.
A build that merchants never run
The Vite 6 outputs (Tailwind CSS 3.4, hashed component chunks, HTMX as a standalone asset) are committed inside the Composer packages and resolved through a manifest at request time. A Composer install needs no Node; Node 22 is for child themes and development only.
The 12 Composer packages
The theme requires the ten storefront modules at its own version; the sample data module is optional and meant for Luma sample data stores only.
theme-hyperiontheme, no parent
module-hyperion-coreESI, manifest, HTMX, header state, Varnish BAN
module-hyperion-sample-dataoptional, Luma sample data only
The 3 npm packages
Published as TypeScript sources for child themes and checkout extensions; versions move together with the Composer packages.
@magentofullstackdev/hyperion-shareddesign tokens, Tailwind preset, Lit base class, HTML sanitizer
@magentofullstackdev/hyperion-themecomponents, entry, critical CSS, the hyperion CLI
@magentofullstackdev/hyperion-checkoutthe checkout application and its payment renderers
What the modules do
The six parts of the suite that go furthest beyond a restyled Luma. The rest (account, orders, PageBuilder, store switchers, GA4) is listed in the README.
A single page Lit application with @lit-labs/signals state, talking to Magento's own web API (carts/mine, guest-carts): no custom order endpoints. Simple, configurable, bundle, grouped, virtual and downloadable carts; coupons, gift messages, fixed product tax lines, checkout agreements; strings from the module's i18n/*.csv. About 37 KB gzipped for the core bundle, with payment renderers and gateway SDKs loaded only when their method is offered or selected.
Verified: check / money order, bank transfer, cash on delivery, purchase order, free; PayPal Express in-context with real sandbox payments; Braintree card, vault and 3D Secure against a sandbox.
Not yet: any other gateway is listed as "not supported by this checkout yet" and cannot be selected. Behind a feature flag, off by default.
Search and the anti-abuse shield
HyperionSearch, HyperionCore
The header autocomplete asks the search engine (Elasticsearch or OpenSearch): products with the engine's total, popular terms, categories with their path, recent searches from the browser, the query in bold. Cached at the edge for 3600 s and in the application cache, flushed on reindex. Typo tolerance, SKU and promoted SKU boosts, stop words, a zero-results fallback.
A rate limiter answers HTTP 429 with Retry-After above a per client budget, and the filter guard strips unknown parameters, answers 400 above the maximum of active filters and marks multi-filter pages noindex.
Mega menu
HyperionMegaMenu
Menu groups built in the admin (Content, Menu, Menu Management): a drag and drop tree with an inspector form, import from categories, live subcategories, badges, CMS block columns, customer group, store view and device limits, per store view values behind "Use Default Value". Rendered as a full width panel, a dropdown or a vertical list, cached at the edge with the tags of everything it shows. Without a group, the category tree stays the menu.
Catalog, infinite loading and motion
HyperionCatalog
Layered navigation with swatch chips, sorting, page size and the grid / list switch as HTMX fragment swaps; add to cart from the listing. Pagination, a "Load more" link or automatic loading with a cap, per store and per category. Server rendered skeletons for the swatches and the gallery keep layout shift at zero; a 120 ms cross-fade between pages through view transitions, set by one CSS knob and off under prefers-reduced-motion.
Images
HyperionImage
A WebP (and optionally AVIF) file next to every catalog image it converts, served through <picture> with the JPG or PNG as fallback. Conversion runs in the cron started queue consumer hyperion.image.convert or synchronously; bin/magento hyperion:image:convert handles existing media. A pixel budget refuses oversized sources before decoding, and only the pages of the converted products are invalidated.
Catalog mode
HyperionCatalogMode
Purchasing limited to the customer groups you allow: prices stay visible, but Add to Cart, the PayPal buttons, reorder and the mini-cart disappear for everyone else, and the cart and checkout routes redirect to the login page. Built on a purchase restriction pool in the core module that your own modules can extend. It is a storefront policy; the web API is not restricted by it.
On the storefront and in the admin
Screenshots from the test installs on the Luma sample data.
Category page: filters, toolbar and tiles are HTMX fragments; the wishlist and compare state on the tiles comes from the single header state request.
Search dropdown: one fragment rendered by PHP from the search engine, cached at the edge; the recent searches come from the browser.
Product page before the swatch and gallery chunks arrive: the server rendered skeletons have the geometry of the components, so nothing moves when they upgrade.
Admin menu builder: the tree and the inspector form, without RequireJS, saving one global tree with per store view values.
Compared with the default Luma theme
Luma is the storefront that ships with Magento Open Source. The rows describe the two stacks as they are; nothing here is a measurement of Luma.
Server rendered HTML, HTMX 2 fragments, Lit 3 light DOM web components
Styling
LESS and the Magento UI library, compiled during setup:static-content:deploy
Tailwind CSS 3.4 on CSS custom property design tokens, built with Vite 6; the outputs are committed, a child theme overrides tokens
Storefront interactivity
Full page loads, Knockout templates rendered in the browser, customer-data sections synchronised through localStorage
Targeted HTML fragments swapped by HTMX; the session state of the header arrives in one request to /hyperion/header/state
Checkout
Knockout.js UI Components loaded through RequireJS
Lit and @lit-labs/signals single page application over Magento's REST API; about 37 KB gzipped core, payment renderers on demand
Full page cache and Varnish
The VCL Magento generates; private content fetched by the browser after the page
An extended VCL: ESI top menu, edge cached search dropdown and fragments, tag based BAN on save, query string sorting, HTML never cached by browsers
Layout shift
Templates that Knockout renders after the page is painted take their space when they render
CLS 0.000 measured on nine page types: components upgrade server rendered skeletons with the same geometry
License
Open Software License 3.0 / Academic Free License 3.0, with Magento Open Source
MIT, for commercial, agency and client work alike
Extend it the Magento way
A child theme with Hyperion as parent, template and layout overrides at the same paths, and an optional Vite and Tailwind build for your own CSS and components. The parent's bundle keeps loading unchanged; your build only adds what your overrides need.
Scaffold a child theme
The hyperion CLI writes app/design/frontend/Vendor/Theme with the registration, the parent reference, a Vite config and a Tailwind config that scans only your theme.
npx -p @magentofullstackdev/hyperion-theme \
hyperion create Vendor/Theme
cd app/design/frontend/Vendor/Theme
npm install && npm run build
Rebrand with tokens
35 colour tokens as RGB channel triplets (so opacity modifiers keep working), plus spacing, typography and one motion knob. Override them in your src/css/entry.css: every template and the checkout follow.
Extend HyperionLightElement (light DOM, so Tailwind utilities reach it), prefix the tag with hyperion-, import it from your entry. Fragments swapped by HTMX are upgraded automatically.
import { html } from 'lit';
import { HyperionLightElement }
from '@magentofullstackdev/hyperion-shared/lit';
class HyperionCountdown extends HyperionLightElement {
static properties = { until: { type: String } };
until = '';
render() {
return html`<span class="text-sm text-muted">
${this.until}</span>`;
}
}
customElements.define('hyperion-countdown', HyperionCountdown);
Template overrides keep the parent's data-hyperion-* attributes and the behaviour comes with them. The contracts are documented in docs/child-themes.md; payment renderers for the checkout in docs/checkout.md.
Where it was tested
Every row ran the same end-to-end suite: guest and logged-in customer journeys, every product type added to the cart, orders placed, account and order pages. The suite had 71 checks until 2026-10-29 and 74 since; dates and counts per row are in docs/compatibility.md.
Platform
PHP
Varnish
Install
Suite
Magento Open Source 2.4.7-p10
8.3
7.4
Composer path repository, developer mode
71 / 71
Magento Open Source 2.4.8-p5
8.3
7.6
Clean install on Luma sample data, developer and production mode
71 / 71
Magento Open Source 2.4.9
8.4
7.7
Clean install on Luma sample data
74 / 74
Mage-OS 2.3.0
8.4
7.7
Composer
71 / 71
Mage-OS 3.6.0
8.4
7.7
Clean install on Luma sample data, OpenSearch 3.9, Valkey
74 / 74
Magento Open Source 2.4.9
8.5
8
Clean install on Luma sample data, OpenSearch 3.9, Valkey 9
Declared: magento/framework ^103.0.6 (Magento Open Source 2.4.6 and later, Mage-OS 2.x, 3.x and 4.0), PHP ~8.3.0 || ~8.4.0 || ~8.5.0, Elasticsearch or OpenSearch. Only the rows above were tested; Adobe Commerce and B2B were not.
Quality gates on the release tree
537
frontend unit tests with Vitest: 268 in the theme, 269 in the checkout
338
PHPUnit tests, 912 assertions, across nine modules
18
Playwright end-to-end check scripts: the 74 check suite, cart, checkout, search, mega menu, infinite loading, layout shift and an axe-core gate on seven page types
0
PHPStan level 5 errors and Magento2 phpcs errors; CI also checks that the committed build equals a fresh build
