Api: SolidKitx

SolidKitx Component

The <SolidKitx /> component is the main entry point for the library. It renders the canvas, nodes, and connections.

Props

Prop	Type	Description
nodesStore	[get: NodeType[], set: SetStoreFunction<NodeType[]>]	Store of nodes to render.
connectionsStore	[get: ConnectionsType[], set: SetStoreFunction<ConnectionsType[]>]	Storeconnections between nodes.
viewportSignal	[get:Accessor<ViewPort>, set:Setter<ViewPort>]	viewport signal (x, y, zoom).
onNodesChange	(nodes: NodeType[]) => void	Callback fired when nodes have moved, resized, or updated.
onConnectionsChange	(connections: ConnectionType[]) => void	Callback fired when connections have been created or updated.
onViewportChange	(vp: ViewPort) => void	Callback fired when the user pans or zooms the canvas.
components	ComponentsType	A map of custom components (see Custom Nodes and Toolbars).
width	number	Optional width of the kit container.
height	number	Optional height of the kit container.
class	string	Optional CSS class for the kit container.
children	JSX.Element | ((kit: Kit) => JSX.Element)	Children to render inside the kit container. Can be a function receiving the Kit object or a Native Component.
...configs	Configs	Optional but recommended configurations see Configs.

Usage

<SolidKitx
  nodesStore={nodesStore}
  connectionsStore={connectionsStore}
  viewportSignal={viewportSignal}
  onNodesChange={setNodes}
  onConnectionsChange={setConnections}
  onViewportChange={setViewport}
  components={{
    "my-custom-node": MyCustomNode,
    "node-toolbar": MyNodeToolbar,
  }}
  gridSize={20}
  defaultNode={...}
  disable....
/>