Logo svelvet

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

Implementing Custom Nodes