---
title: "Introduction"
description: "Build visually editable Shopify storefronts with Astro, Svelte, and typed component contracts."
canonical_url: "https://nyxel.dev/docs"
markdown_url: "https://nyxel.dev/docs.md"
---

# Introduction
URL: /docs
LLM index: /llms.txt
Description: Build visually editable Shopify storefronts with Astro, Svelte, and typed component contracts.

# Introduction

Nyxel is a pre-release toolkit for building visually editable Shopify storefronts. It keeps the concepts that make Shopify themes understandable—sections, blocks, templates, settings, and theme configuration—while using Astro for storefront routing and composition and Svelte for the primary component and editor experience.

![Nyxel editor showing a product page Canvas, page tree, and section Inspector.](/site-media/editor-composer.png)

## Start with the working model

A developer defines a storefront component and its editable settings in one file. A template JSON document arranges those components into Header, Template, and Footer regions. The editor loads the component manifest and template documents from the storefront, then lets an author change the composition without changing component source.

Canvas is the editing surface. It displays a server-rendered storefront snapshot inside isolated Shadow DOM, so selection and overlays stay local to the editor. Preview loads the real storefront route and is where navigation, product forms, cart behavior, and responsive interaction are tested.

Shopify remains the source of truth for catalog and commerce data. Nyxel stores presentation: component contracts, template composition, theme settings, and bindings from component settings to Shopify resources.

## What you can work with

The repository includes a standalone editor, an Astro storefront, a reference theme, a documentation site, the partial Nyxel Connect control plane, and publish-ready package boundaries for component contracts, runtime behavior, framework adapters, and command-line tooling.

The local workflow supports:

- composing Header, Template, and Footer documents;
- adding, moving, duplicating, hiding, renaming, and removing nodes;
- editing typed settings and color schemes;
- binding compatible settings to route and commerce data;
- rendering Svelte, Astro, and React components through one manifest contract;
- saving ordinary JSON while Yjs manages local draft transactions and undo;
- exercising product, collection, search, cart, locale, and error routes in the reference storefront.

Nyxel is not yet a hosted service. **Partial:** Nyxel Connect now implements Shopify installation sessions, Redis-backed project and release records, one-use editor handoffs, GitHub and Vercel provider clients, Preview deployments, and scheduled production promotion. The provider authorization model still uses bootstrap server credentials, and the full customer-owned installation flow has not been proven end to end. Local file-writing and privileged development APIs under `/__nyxel/*` remain unavailable in ordinary production builds; the public Nyxel demo enables a bounded adapter for mock-shop data, Canvas/Preview rendering, and isolated seven-day draft sessions.

## Project status

Nyxel is a personal, pre-release project with a serious working implementation. The local editor and reference storefront are **Built** for development and demonstration. Repository setup and onboarding are **Partial**: the supported path is cloning this monorepo, and there is no project generator or production deployment guide. Nyxel Connect is also **Partial**: its contracts and host implementation exist, but a credentialed merchant installation and release has not been live-proven.

Nyxel has not been tested for live merchant traffic. Bugs and breaking changes should be expected. Source is available under the [Nyxel Source Available License](https://github.com/andre-ani/nyxel/blob/main/LICENSE), which permits learning, local development, and operating a storefront for your own Shopify store; reselling or hosting Nyxel as a product requires permission.

## Run the repository

The supported entry point is the monorepo:

```bash
pnpm install
pnpm dev
```

The development supervisor starts the storefront and editor together. Run the documentation site separately with `pnpm dev:site`. Nyxel Connect is an independent host and starts with `pnpm --filter @nyxel/connect-host dev`.

Read [Architecture](/docs/project-structure) next for the package and application boundaries. If you want to author a component, go directly to [Sections and blocks](/docs/sections).

## Core terms

| Term               | Meaning                                                                                                                    |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| Storefront         | The Astro application that owns public routes, Shopify request context, composition, theme CSS, and development endpoints. |
| Editor             | The standalone Svelte application that owns drafts, document actions, Canvas selection, and inspector controls.            |
| Canvas             | Non-hydrated storefront HTML rendered into Shadow DOM for direct selection and editing.                                    |
| Preview            | The real storefront route rendered from the editor’s unsaved snapshot.                                                     |
| Template           | Durable JSON describing an ordered tree of sections, blocks, settings, and named regions.                                  |
| Component contract | Static TypeScript metadata that defines a component’s settings, regions, editor presentation, and render policy.           |
| Connect            | The partial Shopify-facing control plane for authenticated projects, revisions, releases, and provider coordination.       |

## 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).