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.

• 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

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

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

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

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

Images provider. Add credentials to .env file.

REACT_APP_PIXABAY_KEY="your-key"

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

Created and maintained by Dany Boza (@xorbmoon).

MIT