Svelvet

Build and interact with node-based user interfaces using Svelte

Description

Svelvet is a lightweight and infinitely customizable component library used to build interactive, node-based user interfaces.

Canvases are composed structurally by passing Groups, Nodes and other components as children to the Svelvet wrapper. Standard Svelte syntax applies for conditional rendering and iteration to place Nodes on the canvas.

Default Nodes can be configured by passing props to the Node component, but wrapping custom components or HTML elements in a Node component allows for greater flexibility and functionality.

Edges, the connections between Anchors, can be specified ahead of time or dynamically and are fully customizable.

Default canvas styling can be configured via specific props or, more generally, by specifying a theme such as light or dark.

You can also place arbitrary HTML elements on the canvas, which is especially useful for notes and annotations.