Developer Portal

Welcome to the NexStorez
Developer Ecosystem

This guide is your blueprint for crafting high-performance, custom blocks locally. Our engine allows you to build and deploy sophisticated UI modules without ever touching the core platform source code.

🚀 What is NexStorez Theme Development?

NexStorez operates on a Headless, Data-Driven Architecture. Unlike traditional platforms where UI is hardcoded into files, NexStorez treats code as data. Every block you create is stored in our secure database and hydrated dynamically at the edge when a customer visits a store.

Step 1: Local Setup

Before you start building, ensure your local environment is configured with the following:

Node.js: Ensure the latest LTS version is installed.
Developer Key: Obtain your unique API key from the Store Dashboard.
Developer Kit: Use our provided developer-kit.js utility.

Step 2: Building a Block

A resilient NexStorez block consists of two vital parts: The Component (The Visual Layer) and The Schema (The Admin UI controls).

1. The Component (React)

Write clean React code using standard JSX and Tailwind CSS. Important: Since the code is evaluated at runtime, you cannot use external import statements. All dynamic data must be accessed via props.

const { title, btnText, btnColor } = props;

return (
  <div className="p-8 text-center rounded-2xl shadow-xl bg-white border border-slate-100">
    <h2 className="text-2xl font-bold text-slate-800">{title}</h2>
    <button 
      style={{ backgroundColor: btnColor }}
      className="mt-4 px-6 py-2 rounded-lg text-white font-medium hover:opacity-90"
    >
      {btnText}
    </button>
  </div>
);

2. The Schema (Admin UI)

The schema defines exactly which parts of your block the merchant can customize from their dashboard.

schema: {
  label: '🚀 Magic CTA Box', // Name in Admin Panel
  fields: [
    { name: 'title', label: 'Headline', type: 'text', defaultValue: 'Limited Offer!' },
    { name: 'btnText', label: 'Button Text', type: 'text', defaultValue: 'Buy Now' },
    { name: 'btnColor', label: 'Button Color', type: 'color', defaultValue: '#3b82f6' }
  ]
}

Step 3: Publishing

Once your code and schema are ready, use our CLI script to push the module directly to the storefront database.

node developer-kit.js

Success: Block pushed successfully!

Architectural Constraints

No External ImportsAvoid import or require. Use only the React library and Tailwind classes provided by the shell.
Standard Prop UsageAll input data must strictly come from the props object defined in your schema.
Sandboxed SecurityMalicious scripts or attempts to access localStorage will be automatically blocked by our runtime sandbox.

Optimization Pro-Tips

Tailwind First

Utilizing Tailwind utility classes is the most reliable way to ensure design consistency and speed.

Dynamic Theming

Give merchants color and font controls via the schema to help your block blend with any brand.

Mobile First

Always test your block's responsiveness. High-conversion stores depend on flawless mobile layouts.