This tutorial walks you through creating a marketplace component from scratch. By the end, you’ll have a live, versioned component that any SpiderPublish tenant can install.
Step 1: Set Up Your Environment
npm install -g @spideriq/cli --registry=https://npm.spideriq.ai
spideriq auth loginStep 2: Write Your Component
A component is HTML + scoped CSS + optional JS (≤2KB gzipped). Use theme tokens for all colors:
:host { display: block; background: var(--spider-bg); }
h2 { color: var(--spider-text); font-family: var(--spider-font); }Step 3: Test in Shadow DOM
Always test with shadow isolation enabled. The CLI provides a local preview server that wraps your component in a shadow root, just like production.
Step 4: Publish
Use the MCP tool or CLI to create the component. Set the required metadata: category, mood, and a replication prompt for AI-assisted customization. Then run the two-phase deploy to push it live.