React Design Editor

• React Design Editor has started to develope direct manipulation of editable design tools like Powerpoint, We've developed it with react.js, ant.design, fabric.js

• Layouts and components such as property edits, item lists, toolbars were developed as react.js and the ant.design component was primarily used.

• The project is constantly being developed to support a variety of functions, and its goal is to be able to draw workflow (BPMN) in the future.

Demos

React Design Editor

Dependencies

• React.js
• ant.design
• fabric.js
• mediaelement.js
• react-ace
• interact.js
• anime.js
• fontawesome5
• webpack4
• babel

Getting Started

• git clone https://github.com/salgum1114/react-design-editor.git - Clone the project
• npm start - Run script
• http://localhost:8080 - Host access

Image Map

Three layout mode

1. Fixed

2. Responsive

3. Fullscreen

Preview mode

Workflow

Features

• [x] Add
• [x] Remove
• [x] Resize
• [x] Clone
• [x] Tooltip
• [x] Reorder
• [x] Zoom
• [x] Preview
• [x] Copy & Paste
• [x] Drag & Drop
• [x] Upload (Drag & Drop)
• [x] Alignments
• [x] Drawing - Polygon, Link
• [x] Export / Import - JSON
• [x] Video
• [x] Dom Element
• [x] Code Editor - HTML / CSS / JS / Preview
• [x] iframe
• [x] Animation - Fade / Bounce / Shake / Scaling / Rotation / Flash
• [x] Icon Chooser - fontawesome 5.2.0 free version
• [x] Google Fonts - 20 fonts
• [x] Align Guidlines - moving
• [x] Interaction Mode - grap / selection
• [x] Group / Ungroup
• [x] Image Cropping
• [x] Snap To Grid
• [x] Multiple Layout - Fixed / Responsive / Fullscreen / Grid
• [x] Context menu
• [x] Save Image - Canvas, Target Object
• [ ] Wireframes - development
• [ ] Multiple Map - development
• [ ] Undo / Redo - development