--- title: React Material UI Visual Editor published: true description: A React Material UI Visual Editor tags: javascript, react, material, design cover_image: https://i.imgur.com/BOT2fg6.gif --- ## React Material UI Visual Editor In recent days, no code platforms has seen a rise in demand. Thus, begun my exploration into creating a visual editor. ### Objectives Users will be able to drag and drop material components on the left drawer to the dropzone (middle/user layout), and use the toolbox on the right drawer to edit the CSS of individual components in the dropzone. Export a json data structure for various device purposes. Also, possibly becoming a library for people who want to build no code platforms. ### Milestones To achieve visual editing with components: Buttons, Grid container, Grid item and Typography. Paper, Icon buttons, Material icons, Accordion, Divider and ImageList components will be an over achievement. ### To see this Project Grow: Join us and collaborate OR Donate to us at: | |Coin|NetWork|Address| |---|----|-------|-------| |

|ETH|ETH Network|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1| ### Phase 1: Required Core Concepts ![Phase 1](https://i.imgur.com/BOT2fg6.gif "Phase 1") #### Drag and Drop for Document: ``` // code to handle drag start: // ev is the event parameter ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.effectAllowed = 'copy'; ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML); // code to handle drop: ev.preventDefault(); ev.stopPropagation(); // this prevents propagating events up to the target's parents something critical let html = ev.dataTransfer.getData("text/html"); ev.currentTarget.style.border = "none"; let text = ev.dataTransfer.getData("text/plain"); let element = document.getElementById(text) let element_prime = element.cloneNode(true) ev.currentTarget.append(element_prime) ``` However the above is NOT the React Way of doing things. And we would have to use xml conversions which is "losy" and complex. ### Phase 2: Introducing .. Redux + React-DnD React-Dnd also makes use of the Flux Flow, same as Redux. What we want to do now is to make use of React-DnD, and Redux Global Store to save our JSON tree of component hierarchies. Subsequently we can simply make use of the this data structure to render the components. NOTE: We will have to separate the components that are used to drag and drop from the list of components and those that are already rendered as they have different behaviours. I will not repeat the React-DnD documents here are the list of features that are used in the project: useDrag, canDrag, isOver, isDragging, useDrop, canDrop. Something worth mentioning will be the shallow parameter for isOver, that allowed me to highlight the targetted component instead of every parent related to the component. ``` monitor.isOver({ shallow: true }) ``` Results of Phase 2: [Live Demo](https://open-react-material-ui.web.app/) [Introductory Video](https://youtu.be/N7Qpv-3ojGM) ![Phase 2](https://i.imgur.com/WFbmy6u.gif "Phase 2")

darkartistry

React Material UI Visual Editor

Join Our Newsletter. No Spam, Only the good stuff.