{"id":13406320,"url":"https://github.com/salgum1114/react-design-editor","last_synced_at":"2026-10-19T11:49:46.693Z","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":"2026-08-27T02:04:14.000Z","size":96380,"stargazers_count":1709,"open_issues_count":53,"forks_count":448,"subscribers_count":44,"default_branch":"master","last_synced_at":"2026-09-28T13:20:44.290Z","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":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":"2026-09-28T09:10:55.000Z","dependencies_parsed_at":"2022-07-31T23:48:46.259Z","dependency_job_id":"a7389b22-4ea1-4bb7-b77a-dffd71b6bd04","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":21,"template":false,"template_full_name":null,"purl":"pkg:github/salgum1114/react-design-editor","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","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salgum1114%2Freact-design-editor/sbom","scorecard":{"id":796441,"data":{"date":"2025-08-11","repo":{"name":"github.com/salgum1114/react-design-editor","commit":"3b90b4350fdd1393d482b1000e994202b045691f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 2/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"18 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/salgum1114/react-design-editor/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/salgum1114/react-design-editor/build.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/build.yml:27","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-23T09:08:45.765Z","repository_id":37561579,"created_at":"2025-08-23T09:08:45.765Z","updated_at":"2025-08-23T09:08:45.765Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38356429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-19T02:00:06.414Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2026-10-19T11:49:46.687Z","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] Build workflows with configurable trigger, logic, data and action nodes\n- [x] Connect workflow nodes with labeled ports, multiple routes and automatic layout\n- [x] Copy, paste and Ctrl-drag workflow nodes while preserving selected internal links and ports\n- [x] Review workflow validation, canvas status and undo/redo history\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 and zoom-aware alignment guides\n- [x] Distance measurement guides and equal-spacing snap assistance\n- [x] Snap to grid, rulers, context menu, animation and video elements\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] Monaco code editor with HTML / CSS / JavaScript preview\n- [x] PowerPoint-style interactions, including selection, grab, Shift axis lock and Ctrl-drag duplication\n- [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes\n- [x] SVG, Chart and GIF elements\n- [x] Undo/Redo support\n- [x] Light and dark editor themes\n- [ ] Wireframes - in development\n- [ ] Multiple Map - in development\n\n# Installation\n\nRun `npm install react-design-editor` or `yarn add react-design-editor`\n\nImport the bundled editor stylesheet from your app entry:\n\n```ts\nimport 'react-design-editor/react-design-editor.css';\n```\n\nThen import the components you need from the package entry.\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\nLibrary builds run with Vite only:\n\n- `npm run build:demo` builds the demo app into `docs`\n- `npm run build:lib` builds the package into `dist` and emits declarations\n- `npm run serve` previews the demo build locally\n\n# Using the Canvas Component\n\nThe published package provides the `Canvas` component and its canvas handlers. Toolbars, palettes and property panels shown in the demo can be built around this component as needed.\n\n```tsx\nimport { useRef } from 'react';\nimport { Canvas, type CanvasInstance } from 'react-design-editor';\nimport 'react-design-editor/react-design-editor.css';\n\nexport default function DesignCanvas() {\n\tconst canvasRef = useRef\u003cCanvasInstance | null\u003e(null);\n\n\tconst addRectangle = () =\u003e {\n\t\tcanvasRef.current?.handler.add({\n\t\t\ttype: 'rect',\n\t\t\tname: 'Rectangle',\n\t\t\twidth: 160,\n\t\t\theight: 90,\n\t\t\tfill: '#5ee0bd',\n\t\t\trx: 8,\n\t\t\try: 8,\n\t\t});\n\t};\n\n\tconst saveCanvas = () =\u003e {\n\t\tconst objects = canvasRef.current?.handler.exportJSON() ?? [];\n\t\tlocalStorage.setItem('design', JSON.stringify(objects));\n\t};\n\n\tconst loadCanvas = async () =\u003e {\n\t\tconst saved = localStorage.getItem('design');\n\t\tif (saved) {\n\t\t\tawait canvasRef.current?.handler.importJSON(JSON.parse(saved));\n\t\t}\n\t};\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton type=\"button\" onClick={addRectangle}\u003eAdd rectangle\u003c/button\u003e\n\t\t\t\u003cbutton type=\"button\" onClick={saveCanvas}\u003eSave\u003c/button\u003e\n\t\t\t\u003cbutton type=\"button\" onClick={loadCanvas}\u003eLoad\u003c/button\u003e\n\n\t\t\t\u003cCanvas\n\t\t\t\tref={canvasRef}\n\t\t\t\tstyle={{ width: '100%', height: 600 }}\n\t\t\t\tcanvasOption={{ backgroundColor: '#f4f7f9' }}\n\t\t\t\tworkareaOption={{\n\t\t\t\t\twidth: 800,\n\t\t\t\t\theight: 500,\n\t\t\t\t\tbackgroundColor: '#ffffff',\n\t\t\t\t}}\n\t\t\t\tcanvasActions={{\n\t\t\t\t\tclipboard: true,\n\t\t\t\t\ttransaction: true,\n\t\t\t\t}}\n\t\t\t\tonSelect={object =\u003e {\n\t\t\t\t\tconsole.log('Selected object:', object);\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nUse `canvasRef.current.handler` to add or remove objects, change the selection, control zoom, run undo/redo operations and import or export canvas data. The parent element or the `style` prop must provide a visible height when responsive sizing is enabled.\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| [Monaco Editor](https://github.com/microsoft/monaco-editor)     | MIT                                                |\n| [interact.js](https://github.com/taye/interact.js)              | MIT                                                |\n| [anime.js](https://github.com/juliangarnier/anime/)             | MIT                                                |\n| [Vite](https://github.com/vitejs/vite)                          | 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"}