Developer Studio

Overview

Siyahfy Studio (studio.siyahfy.com) is a browser-based IDE purpose-built for creating Siyahfy storefront themes. Developers register for a Studio account, build themes using React/TypeScript, preview them in real time, and submit them to the Theme Marketplace for review. The Studio includes a code editor, file explorer, terminal, schema validator, and live preview — all inside the browser.

How It Works

IDE Features

The Studio IDE provides a VS Code-like development experience:

Theme File Structure

sections/          -- Theme sections (HeroBanner, ProductGrid, etc.)
widgets/           -- Reusable UI widgets
templates/         -- Page layouts (home.json, product.json, collection.json)
config/            -- Global settings (global-settings.json)
assets/            -- CSS files and static images

JSDoc Type System

Sections use JSDoc annotations to define their settings schema. The Theme Editor reads these annotations to generate the vendor-facing settings UI automatically.

/** @section HeroBanner */
/** @max_blocks 5 */
 
interface Props {
  settings: {
    /** @label Heading @tab content */
    heading: string;
 
    /** @label Background Image @type image @tab content */
    background: string;
 
    /** @label Overlay Opacity @min 0 @max 100 @tab style */
    overlay_opacity: number;
 
    /** @label Color Scheme @type color_scheme @tab style */
    color_scheme: string;
  };
}

Supported JSDoc type annotations include: @label, @tab, @type (image, color, color_scheme, url, richtext, html, range, font, video), @min, @max, @max_blocks, @block, @name, @info, @placeholder.

Developer Earnings & Revenue Split

Developers earn 80% of each paid theme sale. Siyahfy takes 20% as platform commission.

Example: ₹1000 theme sale → Developer gets ₹800, Platform keeps ₹200

Minimum payout: ₹500

The Studio earnings dashboard (/earnings) shows:

• Summary Cards — Total Revenue, Your Earnings (80%), Platform Fee (20%), Pending Balance, Total Paid Out
• Monthly Trend Chart — Area chart, last 6 months
• Revenue Split Chart — Donut chart (80/20)
• Per-Theme Breakdown — Bar chart showing earnings by theme
• Transaction History — Last 20 sales with full split details
• Payout History — Past payouts with linked earnings

Bank Verification & Payouts

Before requesting payouts, developers must verify bank details at /profile/bank:

1. Add Bank Details — Account number, IFSC, holder name (+ optional UPI, PAN, GST)
2. Admin Verification — 1-2 business days
3. Request Payout — Click “Request Payout” when verified
4. Processing — Admin processes bank transfer (5-7 business days)
5. Completed — Payment received

Verification states: none → pending → verified (or rejected with reason)

Key API Endpoints

Studio Authentication

Developer Apps & Themes

Developer Earnings & Payouts

Database Tables

Related Features

• Theme Marketplace — Where developed themes are published and sold
• Theme Editor — How vendors customize themes created in Studio
• Storefront — Themes render the customer-facing store