Konva Canvas Editor - A Canva Clone

A powerful canvas editor built with Next.js, React, and Konva that provides a simple yet powerful interface for creating and editing designs, similar to Canva.

Features

• Drawing Tools: Create rectangles, circles, text, lines, and arrows
• Image Support: Upload images from your device or add them via URL
• Styling Controls: Change colors, stroke width, and more
• Transform Operations: Resize, rotate, and position elements
• History Management: Undo and redo functionality
• Export: Save your designs as PNG images
• Responsive Interface: Works well on various screen sizes
• Canvas Size Presets: Choose from common canvas dimensions

Technologies Used

• Next.js: For routing and server-side rendering
• React: For building the user interface
• Konva/React-Konva: For canvas manipulation
• TypeScript: For type safety and better developer experience
• Tailwind CSS: For styling

Getting Started

Prerequisites

• Node.js (v18 or later)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd konva-editor

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 with your browser to see the result.

Usage Guide

1. Select a Tool: Choose from various shapes and tools in the toolbar
2. Add Elements: Click "Add Shape" to add the selected shape to the canvas
3. Add Images: Use the "Add Image" button to upload or link to images
4. Edit Properties: Select an element to edit its properties like color, stroke width, etc.
5. Transform: Resize or rotate elements by dragging the transform controls
6. Save: Export your design as a PNG file

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Konva.js - HTML5 Canvas JavaScript framework
• React Konva - React binding to Canvas via Konva
• Next.js - The React Framework
• Tailwind CSS - A utility-first CSS framework