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

React Design Editor

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

❤️ Sponsors and Backers