Creator Documentation

Welcome to Fluid Studio. As a Creator, you have the power to design beautiful, reusable Industry Kits and CSS Themes that thousands of SaaS tenants and businesses use to launch their websites every day.

1. Building a Kit

Industry Kits are essentially "Full Page DNA." When you build a Kit, you are designing the default structure and text that a user will see when they first generate their site.

Use the Visual Editor to drag and drop blocks.
Click any text element to edit the default copy (e.g., change "Hero Headline" to "Freshly Baked Goods").
Use the right-hand Properties Pane to set colors, padding, and alignments.

Pro Tip: Keep your default text generic enough for the industry, but specific enough to be inspiring!

2. Exporting your Kit

Once your page is perfect, navigate to the Creator Studio tab on your dashboard.

Under Export from Canvas, select the page you just built, give your Kit a premium name, and click Convert Canvas to Kit. The system will extract the DNA and save it to the database.

Note the Kit ID: When the success message pops up, it will give you a Kit ID (e.g., ID: 12). You need this number for the next step!

3. Generating Slides (The Snapshot Tool)

We do not use messy, low-res browser scripts to generate marketplace thumbnails. We use a high-fidelity Remote Worker architecture. You will run a lightweight Python script on your own computer that takes native screenshots of your live site and uploads them securely to the platform.

Prerequisites: You must have Python installed on your computer.

Step 1: Install Dependencies
Open your local terminal and install the Playwright browser engine:

pip install playwright requests
playwright install chromium

Step 2: Save the Script
Create a file on your computer named snapshot.py and paste this exact code:

import sys, os, requests
from playwright.sync_api import sync_playwright

# Do not change this URL
UPLOAD_URL = "https://fluidcms.app/api/internal/upload-kit-slides"

def capture_and_upload(target_url, kit_id, api_key):
    print(f"🚀 Starting Remote Worker for Kit {kit_id}...")
    temp_files = []

    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        context = browser.new_context(viewport={'width': 1280, 'height': 800})
        page = context.new_page()

        print("⏳ Loading page and waiting for animations...")
        page.goto(target_url, wait_until='networkidle')

        sections = page.locator('.ui-section').all()
        print(f"🎯 Found {len(sections)} blocks to capture.")

        for i, sec in enumerate(sections):
            block_type = sec.get_attribute('data-ed-component')
            title = block_type.replace('mol_', '').replace('_', ' ').title() if block_type else f"Section_{i+1}"
            filename = f"{title}.jpg"
            sec.screenshot(path=filename, type='jpeg', quality=80)
            temp_files.append(filename)
            print(f"📸 Captured: {title}")

        browser.close()

    if not temp_files: return print("❌ No sections found. Is the URL correct?")

    print("📤 Uploading high-res slides to Marketplace...")
    files_payload = [('slides', (f, open(f, 'rb'), 'image/jpeg')) for f in temp_files]
    headers = {'X-Worker-Key': api_key}
    
    response = requests.post(UPLOAD_URL, data={'kit_id': kit_id}, files=files_payload, headers=headers)
    if response.status_code == 200: print("✅ Success! Slides attached.")
    else: print(f"❌ Upload Failed: {response.text}")

    for f in temp_files: os.remove(f)

if __name__ == "__main__":
    if len(sys.argv) != 4:
        print("Usage: python snapshot.py   ")
        sys.exit(1)
    capture_and_upload(sys.argv[1], sys.argv[2], sys.argv[3])

Step 3: Run the Script
Copy your secret API Key from your Creator Studio dashboard. Run the script from your terminal like this:

python snapshot.py https://your-sandbox.fluidcms.app 12 sk_test_abc123...

Your local machine will silently open a browser, take pixel-perfect photos of your design, and securely attach them to your Kit in the marketplace!

4. Publishing CSS Themes

If you prefer to design global styles (fonts, button shapes, colors) rather than specific block layouts, you can upload raw .css files in the Theme Uploader tab.

Security Rule: Do not use local relative paths for fonts or background images in your CSS (e.g., url('../img/bg.jpg')). You must use absolute CDN URLs (e.g., url('https://cdn.example.com/bg.jpg')), otherwise they will break when applied to tenant sites.

5. Creator Limits & Payouts

To ensure marketplace quality, standard Creator accounts are limited to publishing 5 Industry Kits. If you wish to become a high-volume studio partner, please contact platform support.

You earn 80% of all marketplace revenue generated by tenants selecting your Themes or Kits during checkout. Payout integrations (Stripe) can be configured in your Analytics tab.