Nodes
Nodes API Reference
Introduction
Nodes are the core visual elements in Weave.js, they represent everything you see and interact with on the canvas. From simple shapes like rectangles and lines, to text, images, and complex containers like frames, Nodes are the building blocks of your collaborative interface.
Each Node is based on Konva.js primitives and enhanced with interactive behavior, styling, and real-time sync capabilities. Nodes can be selected, moved, edited, grouped, and extended, making them flexible enough to power everything from diagram tools to whiteboards and custom UIs.
In short, if it shows up on the canvas in Weave.js, it's probably a Node.
Available nodes
Weave.js team maintain a set of base nodes, think of them as the minimal nodes to build visual collaborative applications. This are the nodes:
Base
Structure
WeaveLayerNode
The WeaveLayerNode node is a logical container within the Stage. It allows you to separate visual elements, for example: background grids, interactive elements, or UI overlays, into distinct rendering layers.
WeaveStageNode
The WeaveStageNode node is the root canvas container in Weave.js. It serves as the entry point for rendering all other visual or layout Nodes and manages the overall coordinate system.
Collaboration
Grouping
WeaveFrameNode
The WeaveFrameNode node is a container-like visual element used to group and organize other nodes within a pre-defined boundary. It functions as a structured layout region, often used to represent panels, sections, or modular components on the canvas.
WeaveGroupNode
The WeaveGroupNode node is a container for organizing multiple nodes into a single, movable and transformable unit. It allows you to nest shapes or other groups together, enabling you to apply transformations like positioning, scaling, rotation,or selection as one unified object.
Drawing
WeaveConnectorNode
The WeaveConnectorNode node is a complex node that display a sticky line between two nodes predefined anchor points.
WeaveEllipseNode
The WeaveEllipseNode node is a simple, versatile primitive shape used to render ellipses elements on the canvas. It supports customizable properties such as position, axis radius, fill color, stroke and more.
WeaveImageNode
The WeaveImageNode node allows you to render images directly onto the canvas. It supports properties like position, scale, opacity, and filters.
WeaveRectangleNode
The WeaveRectangleNode node is a simple, versatile primitive shape used to render rectangular elements on the canvas. It supports customizable properties such as position, size, fill color, stroke, corner radius and more.
WeaveRegularPolygonNode
The WeaveRegularPolygonNode node is a simple, versatile primitive shape used to render regular polygons elements on the canvas. It supports customizable properties such as position, radius, sides, fill color, stroke and more.
WeaveStarNode
The WeaveStarNode node is a simple, versatile primitive shape used to render star elements on the canvas. It supports customizable properties such as position, inner and outer radius, fill color, stroke and more.
WeaveStrokeNode
The WeaveStrokeNode node represents the recommended way to render free-hand lines on the canvas. It supports features like stroke color, width, dash patterns.
WeaveStrokeSingleNode
The WeaveStrokeSingleNode node represents the recommended way to render single-stroke lines on the canvas. It supports features like stroke color, width, dash patterns and you can define also the line tips as: arrow, circle or square.
WeaveTextNode
The WeaveTextNode node is used to display editable or static text on the canvas. It supports rich styling options including font size, family, color, alignment, and line height.
WeaveVideoNode
The WeaveVideoNode node allows you to render and play videos directly onto the canvas.
Deprecated
WeaveArrowNode (deprecated)
The WeaveArrowNode node is a simple, versatile primitive shape used to render arrow elements on the canvas. It supports customizable properties such as position, several segments, fill color, stroke and more.
WeaveLineNode (deprecated)
The WeaveLineNode node represents a customizable straight or curved line on the canvas. It supports features like multiple points, stroke color, width, dash patterns, and smoothing options.
