Graphl Docs

npm install @graphl/ide

import * as graphl from "./WebBackend.js";
import confetti from "@tsparticles/confetti";

// grab the canvas you prepared
const canvas = document.getElementById("my-canvas");

// we define custom nodes separately here
const customFuncs = {
  "Confetti": {
    parameters: [
      {
        name: "particle count",
        type: graphl.Types.i32,
      }
    ],
    results: [],
    impl(particleCount) {
      confetti({
        particleCount,
        spread: 70,
        origin: { y: 0.6 },
      });
    }
  },
};

// give graphl control over that canvas with options
// see the typescript types for all options
const ide = new graphl.Ide(canvas, {
  bindings: {
    jsHost: {
      functions: customFuncs,
    }
  },
  preferences: {
    topbar: {
      visible: false,
    },
  }
});

// execute a function that the user created in the IDE
ide.functions.main();