Introduction
Plugins are the modular pieces that extend and enhance the functionality of Weave.js. They allow you to add behavior to the canvas: like selection, zooming, snapping, panning, keyboard shortcuts, and more, without modifying the core system.
Plugins are designed to be lightweight, composable, and easy to integrate, making it simple to build rich, interactive experiences. Whether you’re enabling multi-selection, managing drag-and-drop, or integrating custom logic, Plugins are how you supercharge your canvas with reusable, context-aware features.
Weave.js includes a set of built-in plugins, but you can also create your own to tailor functionality to your specific application needs.
Available plugins
Weave.js team maintain a set of plugins, think of them as added functionality to build visual collaborative applications. This are the plugins:
The WeavePlugin node is the abstract class that defines the blueprint of a plugin in Weave.js.
Gives the list of users currently active in a collaborative session. Ideal as source information to paint the user list on the UI.
Displays real-time cursors or pointers for all connected users on the canvas.
Displays what users are doing real-time for all connected users on the canvas. For example when an element is dragged or transformed.
Renders the provider comments on a special layer in order to manage them.
Adds custom right-click menus to the canvas, enabling users to access context-specific actions
Enables users to copy & paste selected nodes using familiar keyboard shortcuts like Ctrl/Cmd + C and Ctrl/Cmd + V or through actions on the context menu.
Enables users to select one or multiple nodes on the canvas through clicks, shift-clicks, or drag-selection (marquee).
Enables more feedback to end users when multi-selecting nodes.
Adds smart alignment assistance by enabling nodes to snap to guides or other nodes as they are moved or resized. Also allows the support to create custom horizontal and vertical guides onto containers.
Adds smart alignment assistance by enabling nodes to snap to guides or other nodes as they are moved or resized.
Adds smart alignment assistance by enabling nodes to snap to distance guides for peers nodes of the target dragged node (vertically and horizontally).
Enables drag-and-drop support on the canvas, allowing users to drop elements—such as shapes, files, or custom components—directly onto the canvas.
Adds a visual background grid to the canvas stage, helping users align and position elements more precisely.
Enables to move selected nodes by a delta when pressing shift + keyboard arrows.
Enables users to navigate the canvas by dragging to move around the Stage.
Automatically adjusts the canvas size to fit its container or the browser window, ensuring a responsive and adaptive user experience.
Enables smooth zooming in and out of the canvas, allowing users to focus on details or get an overview of the entire workspace.
Provides a scaled-down preview of the stage content, useful for quick navigation and orientation. It renders the entire stage (including padding) into a miniature view and overlays a viewport rectangle that indicates the currently visible region.