Svelvet Documentation

Custom Nodes

Svelvet provides the ability to customize each node to your liking. To customize your nodes, provide any of the following properties below in the node object. You can display your desired text, change colors (background, border and text), define multiple source and target handles, and set your own dimensions. Below you can find example implementations of these properties.

Current customizations include node id, width, height, position, data, textColor, bgColor, borderColor, borderRadius, sourcePosition, targetPosition, className, image, src, clickCallback, and childNodes.

sourcePosition represents the anchor point location on the source node and is set to "bottom" by default.
targetPosition represents the anchor point location on the target node and is set to "top" by default.

Node Properties

key

value
id
(required) number
width
(required) number
height
(required) number
position
(required) { x: number, y: number }
data
(required) { label: string } || { custom: name of imported Svelte component } || { html: string of html}
textColor
string of color name, hexcode or rgb
bgColor
string of color name, hexcode, or rgb
borderColor
string of color name, hexcode or rgb
borderRadius
number
sourcePosition
string (top, bottom, left, right) - defaults to adaptive anchor if unspecified
targetPosition
string (top, bottom, left, right) - defaults to adaptive anchor if unspecified
className
string (custom class name)
image
boolean
src
string of image url
clickCallback
Function
childNodes
Array of numbers, put other nodes id's in here

Implementing Custom Nodes

Click here for a sandbox!