Fluorite

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.

On this page