react-design-editor

by salgum1114

React Design Editor has started to developed direct manipulation of editable design tools like Power...

581 Stars 167 Forks Last release: about 2 months ago (v0.0.33) MIT License 422 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Design Editor

build

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

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

fixed

2. Responsive Layout Mode

responsive

3. Full Screen Layout Mode

fullscreen

4. Preview Mode

preview

Workflow Editor

workflow

❤️ Sponsors and Backers

Sponsored by Workflows for Confluence

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) |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.