Overview of Craft.js
Craft.js is a React framework for building extensible, drag-and-drop page editors. Craft.js modularizes the building blocks of a page editor, adds a drag-and-drop system, and handles how user components are rendered, moved, and updated.
Setting up Craft.js
To install Craft.js, run the following command:
npm install --save @craftjs/coreInstallation link: https://craft.js.org/r/docs/guides/basic-tutorial#installation
Craft.js has a tutorial page that teaches you how to design a user interface and how to implement Craft.js. You can check out the tutorial at https://craft.js.org/r/docs/guides/basic-tutorial#designing-a-user-interface.
The GitHub page provided links to UI examples that were built using Craft.js. You can play around with the examples here:
I will be using both to explore the functionalities of Craft.js.
Craft.js Functionalities
You are able to create components like text, buttons & cards using the page editor. As shown in the screenshot below, you could create ProcessCreate cards like the ones in Wekan.
There are also other interesting features like undo which you can use when you accidentally deleted a card.
However, based on my exploration, there seems to be a lack of components to choose from. Compared to the other libraries that I have evaluated, Craft.js offers less options in terms of UI components.
Verdict
Similar to the other drag-and-drop UI libraries, Craft.js is simple to use as all you have to do is drag-and-drop the desired component that you wish to create. However, there are two main issues with regards to Craft.js. The first issue is the lack of UI components to choose from. The second issue is that there does not seem to be a way for you to create a side page, meaning that everything would need to be displayed on one single main page. Since there are many other better drag-and-drop UI libraries that provides more UI components for developers to choose from, I would not recommend Craft.js as the new frontend library.