@naresh-khatri/konva-editor NPM

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

Clone the repository:

git clone <repository-url>
cd konva-editor

Install dependencies:

npm install
# or
yarn install

Run the development server:

npm run dev
# or
yarn dev

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

Usage Guide

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