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.