create-orbix-block

Official scaffolding CLI for the Orbix Block SDK — build and hot-reload custom blocks in your Orbix workspace in seconds.

Quick Start

npx create-orbix-block my-block

The CLI will walk you through a short prompt to choose a name, description, and starter template. Once scaffolded:

cd my-block
npm run dev

Then open your Orbix workspace → Settings → Developer and paste:

http://localhost:4300/bundle.js

Click Connect — your block will appear on the canvas and hot-reload every time you save a file.

Available Templates

| Template | Description | |-----------|-------------| | default | A basic block with persistent state — perfect for forms, trackers, and data entry. | | canvas | A 60 FPS canvas block using useOrbixCanvas and useOrbixAnimationLoop. Ideal for games, physics, and generative art. | | chart | A Recharts-powered dashboard block with a live data stub. Replace the mock with useOrbixFetch to pull from any API. |

How It Works

Your block is compiled into a single UMD JavaScript bundle (dist/bundle.js) by Vite. The Orbix runtime fetches and evaluates this bundle in a secure sandbox, injecting React, ReactDOM, and @orbix/block-sdk so your bundle stays tiny.

• src/block.tsx — your block definition (start here).
• vite.config.ts — pre-configured to externalize React and the SDK.

SDK Reference

| Hook | Purpose | |------|---------| | useOrbixState(block, onChange, defaults) | Persistent state synced to the Orbix document graph via Yjs. | | useOrbixAPI(block) | Access AI generation, notifications, and document query APIs. | | useOrbixCanvas({ id }) | Get a GPU-accelerated 2D canvas context. | | useOrbixAnimationLoop(id, cb) | Drive a precise, 60 FPS requestAnimationFrame loop. | | useOrbixFetch(url, options) | CORS-bypassed data fetching via the Orbix API proxy. | | useOrbixWebSocket(url) | Real-time WebSocket connections for live market data, etc. |

For the full reference, see the Orbix Block SDK Docs.

Publishing Your Block

npm run build

This produces dist/bundle.js. You can host it anywhere (Vercel, Cloudflare, raw GitHub) and share the URL. Anyone with Orbix can load it via the Developer Studio or the upcoming Community Marketplace.

Made with ❤️ by the Orbix Platform team.