Developer Studio

Overview

The Developer Studio (studio.siyahfy.com) is a browser-based IDE where third-party developers can build, test, and submit themes for the Siyahfy Theme Marketplace. It provides a full development environment with a file explorer, Monaco code editor, live preview, terminal simulator, and theme submission workflow — all running in the browser with no local setup required.

Users: Theme developers, Design agencies, Freelance designers

Tech Stack

Technology	Version	Purpose
Next.js	16.x	React framework with App Router
React	19.x	UI library
TypeScript	5.x	Type safety
Monaco Editor	4.x	Code editing (VS Code engine)
Sandpack	2.x	In-browser code bundling & preview
Framer Motion	12.x	UI animations
Radix UI	1.x	Accessible UI primitives
Recharts	3.x	Earnings dashboard charts
Lucide React	0.563	Icon set
Tailwind CSS	4.x	Utility-first styling
class-variance-authority	0.7	Component variant management

Folder Structure


studio.siyahfy.com/
├── app/
│   ├── layout.tsx                    # Root layout
│   ├── page.tsx                      # Landing / redirect
│   ├── (auth)/                       # Authentication pages
│   │   ├── login/                    # Developer login
│   │   ├── register/                 # Developer registration
│   │   ├── forgot-password/          # Password recovery
│   │   └── verify/                   # OTP email verification
│   ├── (protected)/                  # Authenticated routes
│   │   ├── themes/                   # Theme listing dashboard
│   │   │   ├── page.tsx              # All themes list
│   │   │   ├── new/                  # Create new theme
│   │   │   │   └── page.tsx
│   │   │   └── [theme_slug]/         # Theme workspace (IDE)
│   │   │       └── page.tsx
│   │   ├── earnings/                 # Earnings dashboard
│   │   │   └── page.tsx
│   │   └── profile/                  # Developer profile
│   │       ├── page.tsx
│   │       └── bank/                 # Bank details for payouts
│   │           └── page.tsx
│   ├── preview/
│   │   └── [theme_slug]/             # Theme preview page
│   │       └── page.tsx
│   └── api/
│       └── preview/
│           └── [id]/                 # Preview API endpoint
│               └── route.ts
├── components/
│   ├── Header.tsx                    # App navigation header
│   ├── workspace/                    # IDE workspace components
│   │   ├── WorkspaceLayout.tsx       # Main IDE layout manager
│   │   ├── ActivityBar.tsx           # Left icon bar (files, search, git)
│   │   ├── FileExplorer.tsx          # File tree sidebar
│   │   ├── FileTreeItem.tsx          # Individual file/folder item
│   │   ├── CodeEditor.tsx            # Monaco editor wrapper
│   │   ├── EditorTabs.tsx            # Open file tabs
│   │   ├── LivePreviewPanel.tsx      # Live preview iframe
│   │   ├── PreviewPanel.tsx          # Preview controls
│   │   ├── TerminalPanel.tsx         # Simulated terminal
│   │   ├── SearchPanel.tsx           # Full-text search across files
│   │   ├── GitPanel.tsx              # Git-like version history
│   │   ├── TopBar.tsx                # Workspace top toolbar
│   │   ├── StatusBar.tsx             # Bottom status bar
│   │   └── QuickFileFinder.tsx       # Quick file open (Ctrl+P)
│   └── modals/                       # Modal dialogs
├── contexts/
│   └── AuthContext.tsx               # Authentication context provider
├── hooks/
│   └── useSchemaParser.ts            # Section schema parsing hook
├── lib/
│   ├── auth.ts                       # Auth utilities
│   ├── virtual-fs.ts                 # Virtual file system
│   ├── schema-parser.ts              # Section schema parser
│   ├── schema-types.ts               # Schema type definitions
│   ├── config-files.ts               # Default config file templates
│   ├── config-sync.ts                # Config synchronization
│   ├── config-transforms.ts          # Config data transformers
│   ├── starter-templates.ts          # Starter theme templates
│   ├── monaco-config.ts              # Monaco editor configuration
│   ├── terminal-simulator.ts         # Terminal output simulator
│   ├── theme-validator.ts            # Theme validation logic
│   ├── dummy-store-data.ts           # Mock store data for preview
│   ├── types.ts                      # Shared TypeScript types
│   └── utils.ts                      # General utilities
└── public/                           # Static assets

Key Routes / Pages

Route	Description
`/login`	Developer sign-in
`/register`	Developer account creation
`/verify`	OTP email verification
`/forgot-password`	Password recovery
`/themes`	Theme listing dashboard (all developer’s themes)
`/themes/new`	Create a new theme (template selection + metadata)
`/themes/[theme_slug]`	Theme workspace IDE
`/earnings`	Revenue dashboard with charts
`/profile`	Developer profile settings
`/profile/bank`	Bank/payout details
`/preview/[theme_slug]`	Full-page theme preview

IDE Features

Workspace Layout

The IDE follows a VS Code-inspired layout:


┌─────────────────────────────────────────────────────────┐
│  TopBar (Theme name, Save, Submit, Preview toggle)      │
├────┬───────────┬──────────────────┬─────────────────────┤
│Act │ File      │  EditorTabs      │                     │
│Bar │ Explorer  │──────────────────│   LivePreview       │
│    │           │  CodeEditor      │   Panel             │
│    │           │  (Monaco)        │   (iframe)          │
│    │           │                  │                     │
│    │           ├──────────────────┴─────────────────────┤
│    │           │  TerminalPanel | Problems | Output     │
├────┴───────────┴───────────────────────────────────────┤
│  StatusBar (file type, line/col, schema status)         │
└─────────────────────────────────────────────────────────┘

File Explorer

Displays the theme’s virtual file system in a tree view
Supports right-click context menus: New Section, New Widget, New File, Rename, Delete
Drag-and-drop file organization
Special handling for sections/ and widgets/ folders (auto-scaffolding)

Code Editor (Monaco)

Full VS Code editing experience: syntax highlighting, IntelliSense, multi-cursor, find/replace
TypeScript/TSX support with type checking
Custom theme syntax highlighting
Schema annotations parsed in real-time (JSDoc @label, @type, @min, @max, etc.)

Live Preview

Renders the theme in an iframe using Sandpack for in-browser bundling
Updates in real-time as code changes
Uses mock store data (lib/dummy-store-data.ts) for realistic preview
Device size toggles (desktop, tablet, mobile)

Terminal Simulator

Simulated terminal for visual feedback during theme creation
Shows “installing dependencies”, “compiling”, etc. during workspace initialization
Not a real shell — provides animated progress output

Schema Parser

The studio includes a schema parser (lib/schema-parser.ts) that reads JSDoc annotations from section/widget code and generates the settings schema that the Theme Editor will use:


// Developer writes this in sections/HeroBanner.tsx:
 
/** @section Hero Banner */
/** @max_blocks 5 */
 
interface Props {
  settings: {
    /** @label Heading @tab content */
    heading: string;
    /** @label Background Image @type image @tab content */
    bg_image: string;
    /** @label Overlay Opacity @tab style @min 0 @max 100 */
    overlay_opacity: number;
    /** @label Color Scheme @type color_scheme @tab style */
    color_scheme: string;
  };
}

The parser extracts this into a structured schema object that the Theme Editor uses to auto-generate the settings panel.

Theme Development Workflow

1. Create Theme

Choose between Starter (9 pre-built sections) or Blank (header + footer only). Enter theme metadata: name, tagline, category, price, and description.

2. Develop in IDE

Write section and widget code using React/TSX with JSDoc schema annotations. The file structure follows the convention:


sections/          # Theme sections (Header, HeroBanner, etc.)
widgets/           # Reusable widgets
templates/         # Page layouts (home.json, product.json, etc.)
config/            # Theme settings (global-settings.json)
assets/            # CSS, images

3. Preview

Toggle the live preview panel to see the theme rendered with mock store data. Switch between device sizes to test responsiveness.

4. Submit for Review

When ready, submit the theme for marketplace review. The theme validator (lib/theme-validator.ts) checks for required files, valid schemas, and code quality before submission.

5. Publication

After admin approval, the theme becomes available on the marketplace for vendors to install.

API Communication

The Studio communicates with the backend via authenticated API calls:


// Authentication
POST /api/studio/register        // Developer registration
POST /api/studio/login           // Developer login
POST /api/studio/verify-otp      // OTP verification
 
// Theme Management
GET  /api/developer/themes       // List developer's themes
POST /api/developer/themes       // Create new theme
PUT  /api/developer/themes/:slug // Update theme
POST /api/developer/themes/:slug/submit  // Submit for review
 
// Earnings & Payouts
GET  /api/marketplace/developer/earnings       // Full earnings dashboard data
POST /api/marketplace/developer/request-payout  // Request a payout
GET  /api/marketplace/developer/bank-details    // Get bank details
POST /api/marketplace/developer/bank-details    // Add/update bank details

Earnings & Payout System

The Studio includes a complete earnings management system for theme developers.

Revenue Split: 80/20

When a vendor purchases a theme, the revenue is split automatically:

Component	Share	Example (₹1000 sale)
Developer Share	80%	₹800
Platform Commission	20%	₹200

Minimum payout threshold: ₹500

Earnings Dashboard (`/earnings`)

The earnings page shows:

Summary Cards: Total Revenue, Your Earnings (80%), Platform Fee (20%), Pending Balance, Total Paid Out, Total Sales
Monthly Earnings Trend: Area chart showing last 6 months
Revenue Split Chart: Donut chart (80% developer / 20% platform)
Earnings by Theme: Bar chart per theme
Recent Transactions: Last 20 sales with full breakdown
Payout History: All past payouts with linked earnings

Bank Verification (`/profile/bank`)

Before requesting payouts, developers must add and verify bank details:

Required fields:

Account Holder Name
Account Number
IFSC Code

Optional fields:

Bank Name, Branch Name, UPI ID, PAN Number, GST Number

Verification states:

Status	What happens
`none`	Orange banner: “Complete your profile to receive payouts”
`pending`	Yellow banner: “Verification in progress (1-2 business days)“
`verified`	Green “Request Payout” button enabled
`rejected`	Red banner with reason, “Update & Resubmit” option

Payout Flow

Earnings States

Status	Meaning
`pending`	Unpaid, available for withdrawal
`processing`	Part of a payout request, awaiting admin
`paid`	Successfully paid to developer’s bank

Payout States

Status	Meaning
`requested`	Developer submitted, admin review pending
`processing`	Admin is processing the transfer
`paid`	Payment initiated
`completed`	Payment received by developer

Database Tables

developer_earnings — Records each sale’s revenue split

sale_amount — Total purchase amount
developer_share — 80% of sale
platform_commission — 20% of sale
status — pending / processing / paid
payout_id — Links to payout record

developer_payouts — Tracks payout requests

amount — Total payout amount
earnings_count — Number of earnings included
payment_method — bank_transfer
status — requested / processing / paid / completed
transaction_id — Bank/Razorpay transaction reference

developer_bank_details — Bank account info

account_number, ifsc_code, account_holder_name
verification_status — pending / verified / rejected
rejection_reason — Why admin rejected

State Management

The Studio uses React Context for authentication state (AuthContext.tsx) and component-level state for the IDE workspace. The virtual file system (lib/virtual-fs.ts) maintains the in-memory file tree and synchronizes with the backend on save.

Environment Variables

Variable	Description
`NEXT_PUBLIC_API_URL`	Backend API base URL
`NEXT_PUBLIC_STUDIO_URL`	Studio URL (self-reference)
`NEXT_PUBLIC_EDITOR_URL`	Editor URL for preview links
`NEXT_PUBLIC_STOREFRONT_URL`	Storefront URL for live preview