telemakhos / react-design-editor

React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs

React Design Editor

React Design Editor is a module for React, written in Javascript/Typescript which provides two primary features:

• Image Editor - Create images in React, draw diagrams and arrange compositions using the image editor and save the result to one of several export formats, provides functionality similar to Powerpoint.
• Business Process Modelling (BPM) - Design flowcharts and process workflows in React and export the model to JSON, which can be imported into the tool (load/save).

The module primarily uses the Ant Design, Fabric.js and React libraries, but a full list of required dependencies can be found below.

Try it out today - the project is being continually developed to support a variety of different functions.

View Demo

Feature List

• Add, remove, resize, reorder, clone, copy/paste and drag/drop elements
• Drawing capability, with polygon, line, arrows and link support
• Preview mode, tooltips, group/ungroup and zoom functionality
• Upload (with drag/drop), import and export to JSON or image
• Image cropping, Image filters, alignment, alignment guides
• Snap to grid, context menu, animation and video element
• Various icons in icon picker and fonts from Google Fonts (20)
• HTML/CSS/JS Element, iFrame element
• Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
• Code Editor with HTML / CSS / JS / Preview
• Various interaction modes, including grasp, selection, ctrl + drag grab
• Multiple layouts, with fixed, responsive, fullscreen and grid modes
• SVG, Chart and GIF elements
• Undo/Redo support
• Wireframes - in development
• Multiple Map - in development
• Ruler - in development

Installation

Run npm install react-design-editor or yarn add react-design-editor

Getting Started

1. Clone this Project with git clone https://github.com/salgum1114/react-design-editor.git
2. Install dependencies with npm install or yarn
3. Run the App with npm start or yarn start
4. Open your web browser to http://localhost:4000

Screenshots

Image Map Editor

1. Fixed Layout Mode

2. Responsive Layout Mode

3. Full Screen Layout Mode

4. Preview Mode

Workflow Editor

❤️ Sponsors and Backers

Dependencies

Dependency	License(s)
React	MIT
Ant Design	MIT
Fabric.js	MIT
MediaElement.js	MIT
React-Ace	MIT
interact.js	MIT
anime.js	MIT
Webpack 4	MIT
Babel	MIT
fontawesome5	Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT)