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:
The WeaveNode node is the abstract class that defines the blueprint of a node in Weave.js.
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.
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.
The WeaveCommentNode node is a simple customizable shape used to point where comments were added to the stage by users. Also provides interactivity in order to render headless overlays to create or view / manage already created comments.
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.
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.
The WeaveConnectorNode node is a complex node that display a sticky line between two nodes predefined anchor points.
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.
The WeaveImageNode node allows you to render images directly onto the canvas. It supports properties like position, scale, opacity, and filters.
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.
The WeavePolygonNode node renders a polygon shape on the canvas using explicit vertex points and a preset definition. It supports fill color, stroke, and an optional inline text label.
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.
The WeaveStrokeNode node represents the recommended way to render free-hand lines on the canvas. It supports features like stroke color, width, dash patterns.
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.
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.
The WeaveVideoNode node allows you to render and play videos directly onto the canvas.
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.
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.
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.
The WeaveMeasureNode node is a complex node that display the distance between two points in the canvas. It needs a reference measure, a measure unit, and a reference distance from the canvas to calculate the scale and set the measures correctly.