Canva Editor Clone

A web-based editor application similar to Canva, built with Vue 3 + TailwindCSS + TypeScript.

Key Features

• ✅ Canvas Engine: Canvas with zoom, pan, and grid
• ✅ Object Management: Add, edit, and delete objects
• ✅ Shape Tools: Rectangle, Circle, Triangle, Star, Line
• ✅ Text Tools: Multiple text styles, fonts, and formatting
• ✅ Image Upload: Upload images from your computer or via URL
• ✅ Templates: Predefined templates for social media, business, etc.
• ✅ Transform Controls: Drag, resize, and rotate objects
• ✅ Layer Management: Z-index controls, bring objects to front/back
• ✅ Undo/Redo: History management
• ✅ Local Storage: Automatic design saving
• ✅ Export/Import: JSON format
• ✅ Responsive UI: Modern, clean interface

How to Use

1. Add Elements: Click the sidebar tabs to add shapes, text, or upload images

2. Edit: Click an object to select it, drag to move, and use handles to resize

3. Properties Panel: Edit properties in the right-hand panel when an object is selected

4. Keyboard Shortcuts:

   • Ctrl+Z: Undo
   • Ctrl+Y: Redo
   • Delete: Delete selected object
   • Ctrl+D: Duplicate object
   • Arrow keys: Move object (hold Shift for 10px increments)

Tech Stack

• Vue 3: Composition API, TypeScript
• TailwindCSS v4: Modern styling
• Vite: Fast build tool
• TypeScript: Type safety
• LocalStorage: Data persistence

Development

npm install
npm run dev

Open http://localhost:5173 to view the application.