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
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.
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.
Grouping
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.
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.
Drawing
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.
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.
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.
WeaveLineNode
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.
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.
WeaveImageNode
The WeaveImageNode node allows you to render images directly onto the canvas. It supports properties like position, scale, opacity, and filters.
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.
WeaveArrowNode
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.