5-Minute Tutorial

Quickstart Guide

Get up and running in minutes. This guide will walk you through setting up our standalone developer kit, writing your first React block, and pushing it live to your storefront database.

1. Get the Developer Kit & Key

Instead of complex CLI installations, NexStorez uses a lightweight, standalone Node.js script. First, grab your unique Developer Key from your dashboard, then download our generic kit.

// developer-kit.js
const PUSH_API_URL = "https://api.nexstorez.com/push-block";
// Replace the string below with your unique key from the dashboard
const DEV_KEY = "your_unique_developer_key_here";

2. Define Schema & Component

Inside the developer-kit.js file, you will find a payload object. This is where you define what the merchant can edit (schema) and how the block looks (bundleCode).

const payload = {
    developerKey: DEV_KEY,
    type: "HelloWorld",
    schema: {
        label: "👋 Hello World Block",
        fields: [
            { name: "title", label: "Greeting", type: "text", defaultValue: "Hello World!" }
        ]
    },
    // Write your React code inside this string. It will be evaluated at runtime.
    bundleCode: `
        const { title } = props;
        return React.createElement("div", { className: "py-20 text-center bg-blue-50" },
            React.createElement("h1", { className: "text-4xl font-bold text-blue-600" }, title)
        );
    `
};

3. Push to your Store

Once your schema and bundle code are ready, simply run the script using Node.js. Our secure edge API will validate your developer key and inject the block into the database.

node developer-kit.js

Success! If your DEV_KEY is valid, the terminal will return a success message. Your new block is now instantly available in the merchant's visual editor!