Shadeup Compiler Tools


npm install -g @shadeup/cli


shadeup --help
CLI tool for compiling shadeup files

  -V, --version           output the version number
  -h, --help              display help for command

  build [options] <file>  Build file
  watch <file>            Watch a shadeup file and recompile on change
  preview <file>          Live preview of a shadeup file in electron


// main.shadeup
fn main() {
  draw(shader {
    out.color = (in.uv, 0.5, 1.0);
$ shadeup build main.shadeup

After running the above command, you should find the following files in the same directory as main.shadeup:

  • main.js
  • main.d.ts

You can use the above files inside of a vite or webpack project to use the shader in your web application.

$ npm i shadeup
// example.ts
import { makeShadeupInstance } from "./main";

const canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;

(async () => {
  const engine = await makeShadeupInstance(canvas);

  // Optionally enable the UI
  await engine.enableUI();

  // The frame loop will start automatically

  // You can call pub functions on the engine instance
  // engine.files.main.exampleFunction();

Preview mode

$ shadeup preview main.shadeup

This will open an electron window with the shader preview. You can use this to quickly test your shader without having to set up a web project.