Weave.js

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

Collaboration

Grouping

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

Support