svelte-litegraph

A production-ready, TypeScript-first Svelte 5 (runes) component library that wraps and extends litegraph.js — a node-graph canvas editor.

Install

npm install svelte-litegraph

Requires Svelte ^5 (runes). Litegraph.js is a dependency.

Quick start

<script>
  import { LiteGraph, createGraph } from "svelte-litegraph";
  import "svelte-litegraph/theme.css";

  const graph = createGraph();
  graph.addNode("math/operation");
</script>

<LiteGraph {graph} height={400} />

Components

| Component | Purpose | | ----------------- | ------------------------------------------------------------------------ | | LiteGraphCanvas | Low-level canvas wrapper for a single LGraph. | | LiteGraphEditor | Full editor: toolbar (run/clear/arrange/export/import), palette, canvas. | | LiteGraph | Convenience wrapper for simple embeds. | | NodePalette | Searchable list of registered node types. |

Custom nodes

import { defineNode } from "svelte-litegraph";

defineNode({
  type: "demo/multiplier",
  inputs: [
    { name: "a", type: "number" },
    { name: "b", type: "number" },
  ],
  outputs: [{ name: "a * b", type: "number" }],
  widgets: [{ type: "number", name: "factor", value: 1 }],
  onExecute: (node) => {
    const a = node.getInputData(0) ?? 0;
    const b = node.getInputData(1) ?? 0;
    const factor = Number(node.properties.factor) || 1;
    return (a + b) * factor;
  },
});

DOM overlay nodes

Flag a node render: "overlay" to render its body as a Svelte snippet:

<LiteGraphEditor {graph} height={480}>
  {#snippet nodeContent(node)}
    <div>Custom body for {node.title}</div>
  {/snippet}
</LiteGraphEditor>

Interactive elements inside overlay snippets must set pointer-events: auto.

License

MIT — see LICENSE.