Package Health Score

67 / 100

security
Security review needed
popularity
Limited
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
0.0.60	\|	11/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (105)

GitHub Stars: 1.56K
Forks: 428
Contributors: 7

Direct Usage Popularity

The npm package react-design-editor receives a total of 105 downloads a week. As such, we scored react-design-editor popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package react-design-editor, we found that it has been starred 1,557 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 7
Funding: Yes

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like react-design-editor is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 63
Open PR: 1
Last Release: 2 months ago
Last Commit: 21 days ago

Further analysis of the maintenance status of react-design-editor based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-design-editor demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 years
Dependencies: 26 Direct
Versions: 60
Install Size: 8.59 MB
Dist-tags: 1
# of Files: 102
Maintainers: 1
TS Typings: Yes

react-design-editor has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

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.

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

Clone this Project with git clone https://github.com/salgum1114/react-design-editor.git
Install dependencies with npm install or yarn
Run the App with npm start or yarn start
Open your web browser to https://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

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)

react-design-editor development dependencies

@babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/plugin-transform-typescript @babel/preset-env @babel/preset-react @babel/preset-typescript @hot-loader/react-dom @types/animejs @types/color @types/echarts @types/fabric @types/lodash @types/react @types/react-dom @types/react-helmet @types/uuid @types/warning @types/webpack-env babel-eslint babel-loader babel-plugin-dynamic-import-webpack babel-plugin-import core-js css-loader del eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react file-loader fs-extra gh-pages html-webpack-plugin http-server less less-loader path style-loader terser-webpack-plugin tslint tslint-react typedoc typescript url-loader webpack webpack-cli webpack-dev-server webpack-merge workbox-webpack-plugin

FAQs

What is react-design-editor?

Design Editor Tools with React.js + ant.design + fabric.js. Visit Snyk Advisor to see a full health score report for react-design-editor, including popularity, security, maintenance & community analysis.

Is react-design-editor popular?

The npm package react-design-editor receives a total of 105 weekly downloads. As such, react-design-editor popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-design-editor well maintained?

We found that react-design-editor demonstrated a healthy version release cadence and project activity. It has a community of 7 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-design-editor safe to use?

While scanning the latest version of react-design-editor, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 21 December-2024, at 07:15 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP