React Material UI Visual Editor
Tags: javascript, react, material, design
Published: 2022-05-02 13:41:59

---
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:

<b>Join us</b> and <b>collaborate</b>
OR
<b>Donate</b> to us at:

|   |Coin|NetWork|Address|
|---|----|-------|-------|
|<img src="https://s2.coinmarketcap.com/static/img/coins/200x200/825.png" width="50" height="50"> |USDT|BSC Network|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1|
|<img src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Binance-coin-bnb-logo.png" width="50" height="50">|BNB|BSC Network|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1|
|<img src="https://d33wubrfki0l68.cloudfront.net/fcd4ecd90386aeb50a235ddc4f0063cfbb8a7b66/4295e/static/bfc04ac72981166c740b189463e1f74c/40129/eth-diamond-black-white.jpg" width="50" height="50">|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 <b>NOT</b> 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 <b>already rendered</b> 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")