Quickstart
Sign in, build a shader from a starter template, publish it, and embed it — in a few minutes.
Sign in and create a workflow
Sign in at /sign-in. From the workflow browser, click New workflow and
pick a starter template — each template seeds the canvas with a small working
graph, so you start from pixels, not a blank page.
Wire some nodes
The editor is a node canvas. Two ways to add nodes:
- Press Shift+A to open the quick-add picker at the cursor.
- Press ⌘+K for the command menu (also searches workflows and navigation).
Drag from an output port to an input port to connect. Connections are typed — the editor refuses incompatible drops with a toast. See Nodes and types for the rules.
Watch the output node
The singleton output node renders the graph connected to its color
input, live. Every node also shows its own WebGPU preview, so you can inspect
any intermediate value. Changes autosave; there is no save button.
Publish and share
Publishing snapshots the workflow to an immutable semver version and claims a permanent slug. In the publish dialog's share section, flip visibility to public to list the workflow in the community feed where anyone can view, and fork it.
Embed it
Open the Embed dialog in the editor rail. It gives you the npm install
command, a ready <Workflow id> React snippet, and the raw API URL:
import { Workflow } from "@fluorite/react";
export const Hero = () => (
<Workflow id="…" play="visible" style={{ width: "100%", height: 400 }} />
);Embeds render the live draft — see Embeds for the update model, and Embed in React for the full component API.