Overview of OpenChakra
OpenChakra is a visual editor for the component library Chakra UI. You can quickly draft components with the simple drag and drop UI.
Taken from: https://github.com/premieroctet/openchakra
Setting up OpenChakra
Installation steps: https://chakra-ui.com/docs/getting-started#installation
Inside your React project directory, install Chakra UI by running the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4You can also access OpenChakra using this link https://openchakra.app/.
OpenChakra Functionalities
OpenChakra provides you with a list of UI components to choose from e.g. text, icon, button, image etc. Select the component that you wish to use and drag it to the middle. In the screenshot below, I dragged out the text component. You can toggle the code panel to view the React code of your components, You can then copy and paste the codes into your React project with Chakra UI installed.
Verdict
Using OpenChakra reminds me of storybook. OpenChakra allows you to create and see how your components look like before you implement it into your React project. One clear benefit of OpenChakra is that you do not need to spend time writing UI codes as the library does it for you. However, based on the current available components for users to choose from, I do not see a way in which you could implement what was done in Wekan to OpenChakra e.g. creation of cards/boards etc.
Since there is no way to port the work done from Wekan, I would not recommend OpenChakra as the new frontend library.
Â