Create a Module
Code SCE uses a Zero Source Exposure authoring model: buyers evaluate modules through high-fidelity visual proofs and technical documentation, keeping your raw source code secure until genuine purchase and watermarked delivery.
Before you open Studio, prepare your assets.
Required Assets & Specifications
| Asset | What it is | Required? | Formats / Limits |
|---|---|---|---|
| Source Code Folder | Your component/module project folder. Stored securely in encrypted private storage, scanned for security, and delivered with buyer anti-leak watermarking. | Required | Project directory (drag & drop or browse folder, .js, .jsx, .ts, .tsx, .vue, .html, .css, etc.) |
| Visual Previews & Proofs | UI Screenshots, GIFs, or graphic proofs demonstrating the module in action. Rendered in the marketplace visual carousel with lightbox zoom. | Required | Up to 5 images (.png, .jpg, .jpeg, .gif, .webp, .svg, max 50 MB total) |
| README.md | Public technical documentation — architecture, integration steps, framework requirements, API signatures, and usage guidelines. | Required | Markdown file (README.md or .md) |
| Extra UI Demo | Optional standalone HTML file used to power an interactive, sandboxed live demo. | Optional | Single .html file |
Zero Source Exposure
To protect creator intellectual property, your source code folder is stored strictly in Private Storage and is never exposed to prospective buyers before purchase. Buyers evaluate modules through high-fidelity visual proofs, rich documentation, and configurable schemas. When purchased, your clean code is dynamically watermarked and delivered to the buyer.
Minimum Requirements
To Save as Draft
- Module Name
- Source Code Folder
- Visual Previews & Proofs (at least 1 screenshot/GIF) or an Extra UI Demo
- README.md file
To Publish to the Marketplace
In addition to the draft requirements:
- Category (e.g. UI Components, Dashboards, Auth UI, etc.)
- Language / Framework (e.g. React, Vue, Vanilla JS, CSS)
- Short Description (concise summary for marketplace search cards)
- Valid Price ($0 for free modules, or USD amount for paid listings)
- Dynamic Config Schema (configured in Studio Step 2)
What Goes Where
- Source Code Folder → Stored in private object storage (R2) and delivered with dynamic watermarking exclusively upon verified purchase.
- Visual Previews & Proofs → Stored in public object storage (R2) and delivered via optimized CDN to power the marketplace gallery.
- README.md → Stored in public storage and rendered on the module page for prospective buyers.
- Extra UI Demo → Kept in private storage and delivered exclusively inside isolated iframe sandboxes with strict origin policies.
Author Best Practices
Modules undergo automated validation and moderation on upload (see Security Scanning):
- Provide clear, high-resolution screenshots/GIFs: Showcase different states (light/dark mode, hover effects, active data states).
- Write a thorough README: Clearly describe props, events, styling hooks, and dependencies. This serves as your product showcase and customer support.
- Keep it frontend-focused: The platform is optimized for client-side frontend modules. Backend/server-only code is automatically flagged.
- Moderate content: Ensure preview images and text comply with platform standards. NSFW content and prohibited keywords are automatically rejected.
- Structure configurable variables: Use Studio Step 2 to define flexible variables so buyers can tailor the module without modifying source code.
Next Step
Assets ready? Proceed to the Studio Workflow →.