Search code examples
javascriptreactjstypescripthtml5-canvasfabricjs

How to create a whiteboard webapp?


I have a project requirement that wants me to create a web app that allows users to create Factory layouts. Basically I want a canvas on which I can drag and drop some pre-build factory components like robots, manufacturing cells, conveyors etc.

Here are the reference websites. I want to create something similar to them:

I made a working prototype using React + fabricjs. The problem is that the developer experience was not very good and did not look scalable (in terms of functionality).

How can I improve my approach of creating a whiteboard app? If you have worked on a similar project in past what library did you use?


Solution

  • While there's always plenty of choice when choosing the right tool for a job, I've found jointjs particularly powerful when working on kind of a similar project.

    I had to create a set of components that would be dropped on a canvas from a sidebar, configured and connected. The fact that it's based on SVG graphics makes it easily extendable via CSS and/or JavaScript and enables easy nodes inspection in the devtools.

    Edit: it's been a few years ago, just checked their website and it seems their free version is not as powerful as it once was (I think). https://www.jointjs.com/features

    Anyways, be sure to check them out.