MDRR Editor - Move Drag Resize Rotate Editor for HTML DOM Components
About me
I am a Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.
The problem I wanted to solve
Drag Drop editor to create Canva like Moveable Dragable Resizeable Rotateable Components to create html based digital contents with interactive contents like canvas / video / charts etc..,
What is MDRR drag and drop Editor?
Recently created MVP to create Moveable Dragable Resizeable Rotateable HTML Components
More details can be found in this video
https://www.loom.com/share/57336429a4f647eca89512a1f0f460b2
Tech stack
vvvebjs editor or craft js for base form structure,
https://www.vvveb.com/vvvebjs/editor.html
https://craft.js.org/
javascript, jquery, php
https://daybrush.com/moveable/
The process of building MDRR drag and drop Builder
- Initialize the components
- on Drag and Drop of components initialize the moveable library for every node.
Challenges I faced
Undo / Redo should work with the MDRR editor. Fine tuned to have better undo / redo feature.
Key learnings
we can also use https://puckeditor.com/ + https://daybrush.com/moveable/ to create a react based MDRR editor.
Final thoughts and next steps
Next i planned to add an option to import the html and edit with moveable / drag / resize / rotate options and also with multiple page to create html pages editor.
