Studio Workflow

Studio is the author dashboard where you transform your components into published marketplace listings. The workflow consists of two guided steps: first the Profile (visual proofs, documentation, metadata, and pricing), followed by the Variables (dynamic configuration schema).

Step 1 — Profile: Visual Proofs, Documentation & Metadata

In Step 1, you upload product assets and describe your module.

1. Upload Visual Proofs & Documentation

• Visual Previews & Proofs (Required): Drag and drop up to 5 UI screenshots, animated GIFs, or image proofs into the upload dropzone. The interface displays immediate thumbnail previews with removal controls.
• README.md (Required): Attach your technical documentation markdown file explaining the module's architecture and setup instructions.
• Extra UI Demo (Optional): Provide a standalone HTML demo for interactive sandboxed preview testing.

Automated Scanning on Submit

When you click Next: Variables or submit the form, Code SCE executes the automated security pipeline across your documentation, text, and visual assets before saving.

2. Configure Metadata

Provide descriptive information to help developers find and evaluate your module:

• Module Name: Unique, recognizable title (e.g., Monochrome Data Grid).
• Category: Select from categories such as UI Components, Forms & Validation, Navigation & Menus, Data Tables, Charts & Graphs, Auth UI, Dashboards, Animations, Landing Pages, or Theming.
• Primary Language / Framework: Specify the core framework (React, Vue, Svelte, Tailwind, Vanilla JS/CSS).
• Short Description: Concise 1–2 sentence summary displayed on marketplace cards.
• Key Features: Add distinct feature bullet points showcasing capabilities.
• Pricing Model:
  • One-time Price ($ USD): Flat purchase price (set to $0 for free modules).
  • Pay-as-you-go (Optional): Metered usage pricing if applicable.

Step 2 — Variables: Dynamic Configuration Schema

In Step 2, you empower buyers to customize your module without touching source code. You define a structured config schema (config_schema) containing customizable parameters (colors, labels, numeric limits, toggles, dropdown options).

The platform renders this schema using the Dynamic Form Engine, which is identical to the form buyers interact with on the module page and in their local setups. See Dynamic Configuration for technical specifications.

Visual Preview & Verification

Before publishing, verify how your visual assets, README documentation, and dynamic form render in the preview panel to ensure an optimal buyer experience.

Publishing & Saving

Studio provides two action buttons:

• Save as Draft: Stores the module privately under My Modules. You can return to refine metadata, upload new screenshots, or tweak configuration variables at any time.
• Save & Finish: Initiates final verification and submits the module for publication. Clean uploads go live on the marketplace immediately; listings flagged for review are held as drafts for manual moderation.

Next Step

Learn what happens during automated verification: Security Scanning →.