React Design Editor
-
React Design Editor has started to develope direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs
-
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
Dependencies
- React.js
- ant.design
- fabric.js
- mediaelement.js
- react-ace
- interact.js
- anime.js
- fontawesome5
- webpack4
- babel
Installation
- npm install --save react-design-editor
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, Line, Arrow Line
- [x] Export / Import - JSON
- [x] Video Element
- [x] HTML/CSS/JS Element
- [x] iFrame Element
- [x] Code Editor - HTML / CSS / JS / Preview
- [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 / ctrl + drag grab
- [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
- [x] Image Filter
- [x] Undo / Redo
- [x] SVG Element - development (copy)
- [x] Chart Element - development (form)
- [x] GIF Element - development (form)
- [ ] Wireframes - development
- [ ] Multiple Map - development
- [ ] Ruler - development
