---
title: "Why Nyxel"
description: "Why Nyxel combines Shopify’s theme model with Astro composition and Svelte-first authoring."
canonical_url: "https://nyxel.dev/docs/why-nyxel"
markdown_url: "https://nyxel.dev/docs/why-nyxel.md"
---

# Why Nyxel
URL: /docs/why-nyxel
LLM index: /llms.txt
Description: Why Nyxel combines Shopify’s theme model with Astro composition and Svelte-first authoring.

# Why Nyxel

Nyxel is my personal attempt to answer one question: can a custom storefront keep the clear authoring contract that makes Shopify themes useful?

Headless storefronts give developers control over routing, rendering, deployment, and component architecture. They often remove a useful Shopify workflow at the same time: developers define a constrained set of components, and store operators compose those components visually without becoming frontend developers.

Nyxel brings that workflow to a custom storefront.

## Keep the legible parts of Shopify themes

A [Shopify theme](https://shopify.dev/docs/storefronts/themes) has an understandable contract between code and content. A [section schema](https://shopify.dev/docs/storefronts/themes/architecture/sections) defines controls. Template JSON arranges sections. Shopify resources provide commerce data. Nyxel retains those responsibilities while expressing the component contract in TypeScript and rendering the result through Astro.

| Shopify theme concept   | Nyxel equivalent                                          |
| ----------------------- | --------------------------------------------------------- |
| Section schema          | Static TypeScript component contract                      |
| `section.settings`      | Typed `settings` prop with resolved defaults and bindings |
| Blocks inside a section | Ordered children in named regions                         |
| Template JSON           | Versioned page and group documents                        |
| Theme settings          | Token-oriented CSS variables and color schemes            |
| Theme editor preview    | Shadow DOM Canvas plus real-route Preview                 |

This is useful for teams that understand Shopify themes but need a custom storefront. The developer still controls the available components and their behavior. The editor changes composition and configured values, not arbitrary source code.

## Why Astro owns the storefront

Astro provides one server-side owner for routing, request middleware, recursive composition, and selective hydration. Nyxel’s composer can dispatch a node to Svelte, native Astro, or React while keeping framework mixing at explicit boundaries.

Server HTML is the default. A component opts into client JavaScript through its contract only when interaction requires it. The same composer renders public routes, Preview sessions, and Canvas snapshots, which reduces the chance that the editor shows a different component tree from the storefront.

## Why Svelte remains primary

The editor and reference theme use Svelte because component files stay close to HTML and CSS, reactive state is compact, and the authoring experience is already strong for visual storefront work. Astro and React adapters expand the component boundary without changing what the editor needs to understand.

The editor reads normalized manifests. It does not branch on the source language of a component.

## Why Canvas and Preview are separate

Editing and storefront interaction need different behavior. Canvas intercepts navigation and form actions so a click can select the nearest component marker. Preview runs the actual route so links, variants, cart mutations, locale changes, and responsive behavior can operate normally.

Keeping both surfaces makes the distinction explicit: Canvas answers “what am I editing?” and Preview answers “does the storefront work?”

## Product boundary

Nyxel is a presentation and composition system for Shopify storefronts. It is not a commerce backend, a replacement checkout, or a general-purpose CMS. Products, inventory, prices, markets, carts, customers, orders, metafields, and metaobjects continue to belong to Shopify.

The source is available to inspect and run under Nyxel’s custom license, but the project is pre-release and not proven for live merchant traffic. Future work focuses on turning the local workflow into a secure hosted platform without weakening those boundaries.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).