luandevpro / design-editor

Design Editor using React and Fabric.js

Design Editor

Design editor using React and 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
• Object crop support
• Zoom/pan canvas
• Save and Download design
• Context menu
• Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
• Interation modes: selection, ctrl + drag grab
• Undo/Redo support
• Guidelines support
• Presentation mode
• Share design
• Server side image rendering

How to start

The following steps shows how to start frontend application. Navigate to server directory in order to see how to start it.

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"

Pixabay

Images provider. Add credentials to .env file.

REACT_APP_PIXABAY_KEY="your-key"

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