johnsage25/react-design-editor-1

React Design Editor using Fabric.js

React Design Editor

React design editor using FabricJS. 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 canva.com.

Features

• Add, remove, resize, reorder, clone, copy/paste objects
• Group/ungroup objects
• Zoom/pan canvas
• Import and export to JSON or image
• Context menu
• Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
• Multiple interation modes: grasp, selection, ctrl + drag grab
• Undo/Redo support
• Guidelines support
• Multiple canvas support
• Preview mode

How to start

NodeJS required. Start in development mode using the following commands.

# install dependencies
yarn install
# start development server
yarn start

Web application service will start running at localhost:3000

Integrations

In order to provide rich content, the following integrations are implemented.

Iconscout

Illusatrions and icons provider. Add credentials to .env file.

ICONSCOUT_CLIENT_ID="your-client-id"
ICONSCOUT_SECRET="your-secret"

Currently, this values are being included in the repository. In the furure, you will require to add your own credentials.

Contribution

Feel free to contribute by opening issues with any questions, bug reports or feature requests.

Author

Created and maintained by Dany Boza (@xorbmoon).

License

MIT