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

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

❤️ Sponsors and Backers