Embed with React Three Fiber
Drop a workflow's output into your own R3F scene as a live TSL node.
<Workflow> owns its own canvas. If you already have a React Three Fiber
scene, use useWorkflowNode instead: it fetches the workflow, evaluates the
graph, and hands you the resulting TSL node to plug into your own materials.
import { useWorkflowNode } from "@fluorite/react";
const Material = ({ id }: { id: string }) => {
const { node } = useWorkflowNode(id);
return <meshBasicNodeMaterial colorNode={node} />;
};Use it inside a WebGPU-backed R3F canvas — node materials like
meshBasicNodeMaterial come from three/webgpu.
What you get back
const { node, state, error, animated } = useWorkflowNode(id);| Field | Type | Notes |
|---|---|---|
node | unknown | The evaluated TSL node — pass it to a material's colorNode |
state | WorkflowState | "idle" → "fetching" → "ready", or "error" |
error | WorkflowError | null | See the error codes |
animated | boolean | Whether the graph has time-varying inputs |
The hook evaluates the graph rooted at the workflow's output node's color
input — the same subgraph the editor and <Workflow> render. Texture nodes
resolve against the workflow's assets automatically.
node is null until state is "ready"; render a fallback material or
nothing until then. An animated graph advances with your R3F frame loop —
no extra wiring needed.