Canvas Editor is a powerful, browser-based design tool that allows users to create custom designs for printable products like t-shirts, mugs, and other merchandise. Built with modern web technologies, it provides an intuitive interface for both novice and professional designers.
- Three-Column Layout: Streamlined workflow with tools, canvas, and properties panels
- Dark Mode Support: Comfortable designing in any lighting environment
- Responsive Design: Works on desktop and mobile devices
- Text Editing: Add and customize text with various fonts and styles
- Shape Library: Access to basic and complex shapes
- Image Upload: Import your own images to incorporate into designs
- Clipart Gallery: Pre-made graphics to enhance your designs
- Layer Management: Drag and drop interface for easy layer reordering
- Property Controls: Fine-tune every aspect of your design elements
- Designable Area: Clear indication of printable areas on products
- History Management: Undo/redo functionality for design changes
- Multiple Product Types: Design for various merchandise options
- Size Selection: Table-based interface for selecting multiple sizes and quantities
- Real-time Preview: See your design on the actual product
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/nuvocode/canvas-editor.git
cd canvas-editor- Install dependencies
npm install --legacy-peer-deps
# or
yarn install- Start the development server
npm run dev
# or
yarn dev- Open your browser and navigate to
http://localhost:5173
- Select a product type from the dropdown in the left panel
- Use the design tools to add text, shapes, or images to your canvas
- Customize your elements using the properties panel on the right
- Ensure your design stays within the dotted designable area for best print results
- Use the Layers tab in the right panel to view all elements in your design
- Drag and drop layers to reorder them
- Toggle visibility or lock layers using the corresponding icons
- Select the desired sizes and quantities in the product options panel
- Review your selections in the summary
- Click "Add to Cart" to proceed with your order
- React: UI framework
- TypeScript: Type-safe JavaScript
- Konva.js: Canvas manipulation library
- Tailwind CSS: Utility-first CSS framework
- Vite: Build tool and development server
We welcome contributions to Canvas Editor! Please feel free to submit issues and pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
Nuvo Code specializes in creating innovative web applications and design tools that empower creators and businesses. Our mission is to make professional design capabilities accessible to everyone through intuitive, powerful software.