svelvet

v10.0.2

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!