A Components view
Browse sections, blocks, and saved compositions in a Storybook-like surface. Build a hero from existing blocks, save it, preview it, and reuse it later.
From merchant support to headless storefronts
A love letter to the Shopify theme editor, built from the headless side.
I spent years around Shopify from different angles: merchant support, Plus, Shogun's page builder and headless products, Liquid theme builds, and now operating a growing ecommerce brand with real B2B and B2C complexity.
Headless can make development faster, but it often makes everyday content work slower. I missed the theme editor: the directness, the mental model, and the way it lets non-developers shape a storefront without waiting on a developer.
Nyxel is inspired by Shopify's theme editor, Weaverse, and Framer. If Shopify ever ships a platform-agnostic theme editor, I will happily cheer it on. Until then, this is my attempt at the best of both worlds.
What is new here
Not a CMS. Not a blank canvas. A theme editor for code-defined components.
Schema controls I always wanted
Small things matter: an Iconify-powered icon picker, richer color and media controls, and schema settings that feel closer to modern app UI than form glue.
Liquid-shaped, Svelte-powered
The anatomy stays familiar to theme developers: props/settings, markup, local CSS, schema. Svelte adds reactivity without forcing a React-sized mental model.
For Liquid developers
The structure should feel familiar. The reactivity should feel lighter.
Shopify theme sections already have a great shape: settings, markup, local styles, and schema. Nyxel keeps that mental model and maps it to Svelte.
settings become section.settings
{% liquid
assign align = section.settings.alignment
%}markup and conditionals
<section class="hero hero--{{ align }}" {{ section.shopify_attributes }}>
{% if section.settings.kicker != blank %}
<p>{{ section.settings.kicker }}</p>
{% endif %}
<h1>{{ section.settings.heading }}</h1>
</section>section-local styles
{% stylesheet %}
.hero { padding: 4rem; }
.hero--bottom { align-items: end; }
{% endstylesheet %}theme editor schema
{% schema %}
{ "name": "Hero", "settings": [
{ "type": "text", "id": "heading", "label": "Heading" }
] }
{% endschema %}settings become props
<script lang="ts">
let { kicker = '', heading = 'New arrivals', alignment = 'bottom' } = $props()
</script>markup and conditionals
<section class="hero" data-align={alignment}>
{#if kicker}
<p>{kicker}</p>
{/if}
<h1>{heading}</h1>
</section>component-local styles
<style>
.hero { padding: 4rem; }
.hero[data-align="bottom"] { align-items: end; }
</style>editor schema
<script section lang="json">
{ "name": "Hero", "settings": [
{ "type": "text", "id": "heading", "label": "Heading" }
] }
</script>The docs go deeper into the section schema, setting types, blocks, and saved components. Read the section anatomy guide.
How far along is it?
Useful enough to demonstrate, early enough to be honest.
Working now
- Visual composition with sections and blocks
- Live storefront preview with click-to-inspect
- Components view for saved sections and isolated previews
- Schema-driven controls, including icon and rich text inputs
- Dynamic bindings to Shopify data
Next
- Visitor-specific saved drafts for the public demo
- Cleaner preview and publish states
- More complete commerce templates and starter sections
- Bridge theme path for Shopify-native requirements
Later
- Accounts, projects, permissions, and durable hosted workspaces
- Deploy status, rollback, and revision history
- Collaboration for teams working on the same storefront
- Cloud AI assistance for structured page-building tasks
Open the demo and change the storefront visually.
The demo is here to show the authoring model: compose sections, inspect the live preview, bind Shopify data, and save draft changes.