{"id":13406320,"url":"https://github.com/salgum1114/react-design-editor","last_synced_at":"2025-05-13T23:07:22.365Z","repository":{"id":37561579,"uuid":"138666440","full_name":"salgum1114/react-design-editor","owner":"salgum1114","description":"React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs ","archived":false,"fork":false,"pushed_at":"2025-03-20T02:16:27.000Z","size":55417,"stargazers_count":1607,"open_issues_count":63,"forks_count":437,"subscribers_count":46,"default_branch":"master","last_synced_at":"2025-05-06T13:38:44.646Z","etag":null,"topics":["animejs","ant-design","antd","canvas","editor","es6","fabricjs","fontawesome5","imagemap","javascript","mediaelementjs","react-ace","reactjs","webpack4","workflow"],"latest_commit_sha":null,"homepage":"https://salgum1114.github.io/react-design-editor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salgum1114.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"react-design-editor","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/salgum1114"]}},"created_at":"2018-06-26T01:03:54.000Z","updated_at":"2025-05-02T10:29:33.000Z","dependencies_parsed_at":"2022-07-31T23:48:46.259Z","dependency_job_id":"22796216-4f20-4259-9fb0-d63b49029e41","html_url":"https://github.com/salgum1114/react-design-editor","commit_stats":{"total_commits":390,"total_committers":7,"mean_commits":"55.714285714285715","dds":"0.30512820512820515","last_synced_commit":"8744fa46830d4c1818444ff7039c2e6290bd9090"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salgum1114%2Freact-design-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salgum1114%2Freact-design-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salgum1114%2Freact-design-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salgum1114%2Freact-design-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salgum1114","download_url":"https://codeload.github.com/salgum1114/react-design-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253171254,"owners_count":21865292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animejs","ant-design","antd","canvas","editor","es6","fabricjs","fontawesome5","imagemap","javascript","mediaelementjs","react-ace","reactjs","webpack4","workflow"],"created_at":"2024-07-30T19:02:27.096Z","updated_at":"2025-05-13T23:07:22.315Z","avatar_url":"https://github.com/salgum1114.png","language":"TypeScript","funding_links":["https://opencollective.com/react-design-editor","https://paypal.me/salgum1114","https://opencollective.com/react-design-editor/contribute"],"categories":["Editor Components","TypeScript","Libraries","UI Components","\u003e 500 ⭐️","Programming Languages"],"sub_categories":["Canvas draw","Canvas","JavaScript"],"readme":"# React Design Editor\n\n[![](https://img.shields.io/npm/l/react-design-editor?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License) [![build](https://github.com/salgum1114/react-design-editor/workflows/build/badge.svg)](https://github.com/salgum1114/react-design-editor/actions) [![](https://flat.badgen.net/npm/v/react-design-editor?icon=npm)](https://www.npmjs.com/package/react-design-editor)\n\nReact Design Editor is a module for React, written in Javascript/Typescript which provides two primary features:\n\n-   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.\n-   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).\n\nThe module primarily uses the [Ant Design](https://github.com/ant-design/ant-design/), [Fabric.js](https://github.com/fabricjs/fabric.js) and [React](https://github.com/facebook/react) libraries, but a full list of required dependencies can be found below.\n\nTry it out today - the project is being continually developed to support a variety of different functions.\n\n[View Demo](https://salgum1114.github.io/react-design-editor/)\n\n# Feature List\n\n-   [x] Add, remove, resize, reorder, clone, copy/paste and drag/drop elements\n-   [x] Drawing capability, with polygon, line, arrows and link support\n-   [x] Preview mode, tooltips, group/ungroup and zoom functionality\n-   [x] Upload (with drag/drop), import and export to JSON or image\n-   [x] Image cropping, Image filters, alignment, alignment guides\n-   [x] Snap to grid, context menu, animation and video element\n-   [x] Various icons in icon picker and fonts from Google Fonts (20)\n-   [x] HTML/CSS/JS Element, iFrame element\n-   [x] Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects\n-   [x] Code Editor with HTML / CSS / JS / Preview\n-   [x] Various interaction modes, including grasp, selection, ctrl + drag grab\n-   [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes\n-   [x] SVG, Chart and GIF elements\n-   [x] Undo/Redo support\n-   [ ] Wireframes - in development\n-   [ ] Multiple Map - in development\n-   [ ] Ruler - in development\n\n# Installation\n\nRun `npm install react-design-editor` or `yarn add react-design-editor`\n\n\n\n# Getting Started\n\n1. Clone this Project with `git clone https://github.com/salgum1114/react-design-editor.git`\n2. Install dependencies with `npm install` or `yarn`\n3. Run the App with `npm start` or `yarn start`\n4. Open your web browser to `http://localhost:4000`\n\n# Ask AI\n\n[React Design Editor](https://codeparrot.ai/oracle?owner=salgum1114\u0026repo=react-design-editor) AI will help you understand this repository better. \n\n\n# Screenshots\n\n## Image Map Editor\n\n### 1. Fixed Layout Mode\n\n![fixed](https://user-images.githubusercontent.com/19975642/55678049-6aff6180-592e-11e9-8b29-8e1d60df178a.PNG)\n\n### 2. Responsive Layout Mode\n\n![responsive](https://user-images.githubusercontent.com/19975642/55678050-6cc92500-592e-11e9-8a57-c82d371e4be1.PNG)\n\n### 3. Full Screen Layout Mode\n\n![fullscreen](https://user-images.githubusercontent.com/19975642/55678051-6dfa5200-592e-11e9-9b9e-b8d8ee3ccb08.PNG)\n\n### 4. Preview Mode\n\n![preview](https://user-images.githubusercontent.com/19975642/55678052-6fc41580-592e-11e9-9958-9a9be8239bd7.PNG)\n\n## Workflow Editor\n\n![workflow](https://user-images.githubusercontent.com/19975642/55678053-718dd900-592e-11e9-9996-cce9b46d8433.PNG)\n\n## ❤️ Sponsors and Backers [![](https://opencollective.com/react-design-editor/tiers/badge.svg)](https://opencollective.com/react-design-editor/contribute) [![](https://opencollective.com/react-design-editor/tiers/sponsor/badge.svg?label=Sponsor\u0026color=brightgreen)](https://opencollective.com/react-design-editor/contribute) [![](https://opencollective.com/react-design-editor/tiers/backer/badge.svg?label=Backer\u0026color=brightgreen)](https://opencollective.com/react-design-editor/contribute)\n\n[![Sponsored by Workflows for Confluence](https://remote.automation-consultants.com/knowledge/download/attachments/57671882/sponsorship.png)](https://marketplace.atlassian.com/apps/1222276/workflows-for-confluence)\n\n[![](https://opencollective.com/react-design-editor/tiers/sponsor.svg?avatarHeight=36)](https://opencollective.com/react-design-editor/contribute)\n\n[![](https://opencollective.com/react-design-editor/tiers/backer.svg?avatarHeight=36)](https://opencollective.com/react-design-editor/contribute)\n\n# Dependencies\n\n| Dependency                                                      | License(s)                                         |\n| --------------------------------------------------------------- | -------------------------------------------------- |\n| [React](https://github.com/facebook/react)                      | MIT                                                |\n| [Ant Design](https://github.com/ant-design/ant-design/)         | MIT                                                |\n| [Fabric.js](https://github.com/fabricjs/fabric.js)              | MIT                                                |\n| [MediaElement.js](https://github.com/mediaelement/mediaelement) | MIT                                                |\n| [React-Ace](https://github.com/securingsincity/react-ace)       | MIT                                                |\n| [interact.js](https://github.com/taye/interact.js)              | MIT                                                |\n| [anime.js](https://github.com/juliangarnier/anime/)             | MIT                                                |\n| [Webpack 4](https://github.com/webpack/webpack)                 | MIT                                                |\n| [Babel](https://github.com/babel/babel)                         | MIT                                                |\n| [fontawesome5](https://github.com/FortAwesome/Font-Awesome)     | Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalgum1114%2Freact-design-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalgum1114%2Freact-design-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalgum1114%2Freact-design-editor/lists"}