Library for building an interactive front-end platform

Question

I am unexperienced in javascript. I am looking to build a platform where the core component will be a "builder". It will involve a tree of blocks, with possibility to add, delete, modify blocks, with drag and drop features, scrolling, zooming and de-zooming.

I am trying to figure out what a good library would be to do this. Should I do this in vanilla JS? Are frameworks such as Angular or React useful for this, or are they more useful for other things?

Many thanks.

Looking up a few things, I found:

• FabricJS
• EaseIJS
• Konva
• PaperJS
• Pixi.js

I am also trying to understand how this would relate to using a framework such as React for building the rest of the platform (tabs, signing in, navigation). I figure that they can be combined because their use cases are different. Any guidance is appreciated.

Edit:

I took a further look and it seems like using canvas would be overkill for my project. I'm not building a game, I don't need complex shapes or anything like that. I'm just going to be making the same boxes over and over. What I'm looking for is something that allows me to display them, move them around, connect them and edit them. Basically a diagram editor. I think that libs like these would be a better approach:

Answer 1

In a commercial context, you might want to consider yFiles for HTML. It's very well packaged generic graph and diagramming component that should provide you with the features that you are looking for:

• You can create elements from palettes
• You can drag them around (with optional snapping)
• You can interconnect them
• Serialize your diagrams
• Create custom visualizations.

... and all of this can be completely customized to your specific requirements if you don't like the default behaviors and looks.

This library uses SVG, Canvas, and/or WebGL under the hood, but you don't necessarily need to go that low-level and simply reuse the existing predefined visual styles.

The library is framework agnostic, meaning that you can use Angular, React, Vue, VanillaJS or whatever your current favorite framework for creating your application might be. My current recommendation for an "inexperienced programmer" would be VueJS. It's lightweight and rather un-opinionated.

The tools that you mention are very low-level. This means that you will have to do a lot by yourself if you want to "just move elements around". Depending on the real complexity of these interactions, simple jQuery-like solutions or even plain vanilla JS might work, too. But once you have seen what is possible with a complete diagramming solution, you might never want to go back ;-)

The fact that the library can optionally be used nicely with TypeScript also might be a bonus for an inexperienced developer. But this is really a matter of taste.

^{Full disclosure: I work for the company that creates the above mentioned library, but I do not represent my employer, here. These are my very own opinions.}