On this page
Quickstart
Create a visual in the editor or render one with a typed API request.
ShaderWeave has 25 generators and a shared recipe format for the editor and API.
Start locally
Install Node.js 22 or later, pnpm 9.15 and FFmpeg, then run:
pnpm install --frozen-lockfile
pnpm dev:local
Open the studio. The launcher checks dependencies and ports, builds the engine and API, and starts both services on loopback. Press Ctrl+C to stop both.
For the production preview, use pnpm preview:local. It builds the full website before starting the services. Both commands use the repository's .data directory unless SHADERWEAVE_DATA_DIR is set.
Make your first visual
Open Shader Gradient, choose a preset, and tune its colors and seed. Use the Export panel to choose dimensions, pixel ratio and file format. Save keeps the entire workspace state; Share creates a restorable recipe link.
Get an API key
The local browser uses a server gateway. Its generated credential is kept on the server and is enabled only in explicit local mode.
Create a labeled API key on the account page for direct requests to port 3001. Copy the secret when it is shown; the database stores its hash.
Discover generators
curl http://localhost:3001/v1/generators
Each entry includes its slug, supported formats, animation support, defaults and parameter schema.
Generate an image
Replace YOUR_KEY with the API key you created.
curl -sS -H "Authorization: Bearer YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"seed":42,"format":"png","size":{"width":1280,"height":720},"params":{"colors":["#0C0C0E","#84cc16","#ecfccb"]}}' \
http://localhost:3001/v1/generate/shader-gradient -o out.png
The response includes the canonical recipe, recipe hash, engine version and cache status in X-ShaderWeave-* headers.
Use the SDK
import { ShaderWeave } from '@shaderweave/sdk';
const client = new ShaderWeave({
baseUrl: 'http://localhost:3001/v1',
apiKey: process.env.SHADERWEAVE_API_KEY,
});
const response = await client.generate('mesh-gradient', {
seed: 42,
size: { width: 1280, height: 720 },
format: 'png',
});
const bytes = await response.arrayBuffer();
See the SDK guide for jobs, cancellation, presets and keys.