react-design-editor-custom
v2.0.3
Published
Design Editor Tools with React.js + ant.design + fabric.js
Downloads
54
Maintainers
Readme
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.
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
- Clone this Project with
git clone https://github.com/salgum1114/react-design-editor.git
- Install dependencies with
npm install
oryarn
- Run the App with
npm start
oryarn start
- 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) |