---
title: "Introduction"
description: "Nyxel is a personal project exploring a Shopify-inspired visual editor for SvelteKit headless storefronts."
canonical_url: "https://www.nyxel.dev/docs"
markdown_url: "https://www.nyxel.dev/docs.md"
---

# Introduction
URL: /docs
LLM index: /llms.txt
Description: Nyxel is a personal project exploring a Shopify-inspired visual editor for SvelteKit headless storefronts.

# Introduction

Nyxel is a personal project by Andre Ani exploring a visual editor for Shopify headless storefronts built with SvelteKit.

The project borrows heavily from the ideas that make Shopify themes approachable: sections, blocks, templates, schema-driven settings, and visual editing. The difference is that the storefront runtime is SvelteKit, and Shopify remains the source of truth for commerce and structured content.

## Current Status

| Status | Meaning |
| --- | --- |
| **Built** | Works in the current demo or local development environment |
| **Partial** | Implemented enough to demonstrate, but not complete enough to treat as production-ready |
| **Planned** | Designed or intended, but not built yet |

Nyxel is currently **partial**. It has a working editor, preview, schema controls, saved sections, and Shopify-aware bindings. It does **not** yet have a production publish workflow, accounts, permissions, durable hosted projects, collaboration, or a built Bridge theme.

## What Works Today

- **Visual composition**: add, remove, hide, duplicate, rename, and reorder sections and blocks.
- **Live preview**: render the draft through the real storefront preview routes.
- **Components view**: browse sections and blocks, preview them in isolation, and reuse saved compositions.
- **Schema controls**: render editor inputs from section schema, including rich text, media, color schemes, and an Iconify-powered icon picker.
- **Dynamic sources**: bind compatible settings to Shopify data such as product, collection, blog, page, and metaobject fields.
- **Theme settings**: edit global colors, typography, layout, and color-mode behavior.

## What Is Planned

- **Hosted draft persistence**: visitor-specific saved demo state, then durable project state.
- **Publishing**: a clear draft → preview → publish flow with deploy status and rollback.
- **Bridge theme**: a future Liquid companion theme for Shopify-native requirements such as app blocks.
- **Production operations**: accounts, permissions, project setup, and long-term upgrade paths.

## How It Fits Together

| Piece | Status | Role |
| --- | --- | --- |
| **Shopify** | Built-in dependency | Commerce, catalog, metaobjects, checkout, and Admin-managed content |
| **Storefront / Nyxel theme** | **Partial** | SvelteKit reference theme — functional demo, not Horizon-complete. Visual polish, section coverage, and presets still need major work |
| **Editor** | Built | Standalone visual editor for composing pages and editing settings |
| **Template JSON** | Built | The structured page data edited by Nyxel and rendered by the storefront |
| **Components view** | Built | Storybook-like surface for browsing and reusing sections/blocks |
| **Bridge theme** | Planned | Future Liquid companion theme for Shopify app-block compatibility |
| **Publish workflow** | Planned | Future flow for turning saved drafts into live storefront changes |

For Shopify concepts, see Shopify's docs on [Liquid](https://shopify.dev/docs/api/liquid), [themes](https://shopify.dev/docs/storefronts/themes), [sections and blocks](https://shopify.dev/docs/storefronts/themes/architecture/sections), and [theme settings](https://shopify.dev/docs/storefronts/themes/architecture/settings). For the commerce runtime direction, see Shopify's [Hydrogen developer preview API reference](https://shopify.dev/docs/api/hydrogen/2026-04) and [Hydrogen fundamentals](https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals).

## Read Next

- [Visual Editor](/docs/editor) — what the editor can do today.
- [Sections](/docs/sections) — how Nyxel maps Liquid-style section anatomy to Svelte.
- [Dynamic Sources](/docs/dynamic-sources) — how settings bind to Shopify data.
- [Roadmap](/docs/roadmap) — what is built, partial, and planned.

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