Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
As for the second part of your question, regarding UI. Reka is purely the state management system, so it is designed to help with storing/editing user content and computing an output for that content so you can render that on the browser; it’s not really responsible for the UI part. For building UI’s for your page editor - there’s Craft.js which is another framework that I built for creating page editors. Craft comes with an event system that lets you know which elements is being selected/hovered/dragged and a drag and drop system that lets you move elements around on the screen along with other things that helps you build your own page editor UI. Craft is actually the parent project of Reka. Reka was built to replace Craft’s internal state management system so that you could build entire UI components in Craft in the future. If you’re interested, you could check out the motivation and relationship between Craft and Reka here. As for the demo shown in the video, all the UI interactions (including some that you have mentioned like showing the borders of selected elements) are fairly straightforward, and they’re simply just interacting/mutating the AST state of Reka. Feel free to take a look at the code for the demo.
As for the second part of your question, regarding UI. Reka is purely the state management system, so it is designed to help with storing/editing user content and computing an output for that content so you can render that on the browser; it’s not really responsible for the UI part. For building UI’s for your page editor - there’s Craft.js which is another framework that I built for creating page editors. Craft comes with an event system that lets you know which elements is being selected/hovered/dragged and a drag and drop system that lets you move elements around on the screen along with other things that helps you build your own page editor UI. Craft is actually the parent project of Reka. Reka was built to replace Craft’s internal state management system so that you could build entire UI components in Craft in the future. If you’re interested, you could check out the motivation and relationship between Craft and Reka here. As for the demo shown in the video, all the UI interactions (including some that you have mentioned like showing the borders of selected elements) are fairly straightforward, and they’re simply just interacting/mutating the AST state of Reka. Feel free to take a look at the code for the demo.
Related posts
- Craft.js – A React Framework for building extensible drag and drop page editors
- Where to start building a low-code tool
- WYSIWYG/Drag-And-Drop alternative to GrapeJS in react
- How to build your own Figma like view, with drag and drop
- I'm making a No-code website builder, using React. Need Advice on architecture and implementation of my idea.