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
• Grid and snap to grid support
• Zoom/pan canvas
• Import and export to JSON or image
• Context menu
• Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
• Interation modes: selection, ctrl + drag grab
• Undo/Redo support
• Guidelines support
• Multiple pages support
• Presentation mode

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

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. Or, you can buy me a coffee.

Created and maintained by Dany Boza (@xorbmoon).

MIT