prerelease Prerelease 5.2.2 Latest 5.2.1
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

Created for developers, Weave.js is an open-source library that provides all the building blocks, plugins, and APIs to develop visual collaborative tools at the speed of light.

Weave.js abstracts the complexity of building real-time, collaborative apps from scratch by handling the three core pillars of any collaborative visual tool:

  • Shared state model that allows collaboration. A structured data layer to model your applications' needs.

  • Real-time shared state synchronization. Built-in mechanisms for syncing shared-state across clients using atomic diffs and pluggable transport layers.

  • Rendering and interactions (User Interface). A decoupled rendering and interaction layer with a simple API to handle shared state changes, user interactions, and custom behaviors. A headless solution (in terms of UI).

Get started

A room is created, a canvas node is added and a second collaborator connects
Start here

Set up a room, render a canvas and invite a second participant.

The shared state model connects nodes, actions, plugins and canvas rendering primitives
Reference

The headless library the canvas is built on.

React components connect into a Weave.js collaborative canvas
Integration

Components for integrating Weave.js into a React application.

Two clients synchronize the same room state through a central store transport
Transport

How a room’s state reaches every participant, and which transport to pick.

Build collaborative whiteboard applications

A Weave.js canvas rendered through several UI frameworksfeature 1 dark

Change the UI using our included primitives or build a new one. With Weave.js, you get a unified system that includes a high-performance, fully customizable whiteboard so you can focus on building the product.

Learn more
The storefeature 2 dark

Keep what you need, discard the rest, and build your own. Stores handle the real-time sync complexity while nodes, plugins, and actions allow for selection, drawing, erasing, creating geometric shapes, and perfect freehand drawing to smooth development.

Learn more
Weave.js components rendered inside a React applicationfeature 3 dark

Our React Helper library provides all the necessary components to easily integrate Weave.js on top of React projects.

Learn more
Atomic diffs travelling between two clients of a roomfeature 4 dark

Weave.js only syncs minimal state changes — not the full tree. It uses a custom React Reconciler under the hood to detect and transmit mutations with maximum efficiency. Lower overhead, higher performance for live collaboration.

Learn more

Open source

Weave.js is actively maintained and open for contributions.

It comes with best-in-class documentation and developer experience.

Frequently asked questions

Have more questions? Contact us and we’ll respond as quickly as possible.

What type of applications can I create with Weave.js?

Weave.js is aimed at developers. It provides a framework with all the components, plugins, and tools to build custom whiteboards, canvas, and collaborative visual tools for your applications. It provides a set of nodes, actions, and plugins you can choose from and extend to your needs, so you can easily build the perfect whiteboard solution.

Although we provide a default UI, you can customize it so the visual collaborative tool you build has the look & feel of your liking or matches your corporate identity.

Can I use Weave.js in frontend frameworks other than React?

Yes, you can use Weave.js with any UI framework, but we recommend using it with React.

Weave.js is framework-agnostic at its core, meaning the rendering and collaboration logic can be integrated into different environments. However, we provide and maintain a React utility to make the integration with React more seamless.

If you’re using another framework (like Vue or Svelte), integration is possible, but may require additional setup or custom wrappers not provided by Weave.js documentation.

Is Weave.js free to use and open source?

Yes, Weave.js is free to use and open source. It is distributed under the Apache 2.0 License, which means you can use, modify, and distribute the software. When using Weave.js, remember to comply with the license: simply provide a copy of the License, include the required notices, and indicate any modifications you make to the Weave.js code.

Can I use Weave.js in a commercial application?

Yes, you can use Weave.js in a commercial application. The Apache 2.0 License is a permissive license that allows its use in all types of applications.

How do I request a feature for Weave.js?

You can find us on GitHub, where you can request new features, contribute with your own, find support, and open discussions that will help us improve our product further.

If you like it, don’t forget to give us a star ;-)