https://github.com/amanuel-1/kanvas

Kanvas is a customizable canvas editor app built with Next.js, TailwindCSS, Supabase, Prisma, and Zustand. It enables users to design div-based canvases with undo/redo functionality and supports integration with Konva or Fabric for advanced use.
https://github.com/amanuel-1/kanvas

canvas canvas-editor lucia lucia-auth nextjs prisma shadcn-ui supabase

Last synced: 13 days ago
JSON representation

Kanvas is a customizable canvas editor app built with Next.js, TailwindCSS, Supabase, Prisma, and Zustand. It enables users to design div-based canvases with undo/redo functionality and supports integration with Konva or Fabric for advanced use.

• Host: GitHub
• URL: https://github.com/amanuel-1/kanvas
• Owner: Amanuel-1
• Created: 2024-09-15T20:42:43.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-11-25T21:04:22.000Z (5 months ago)
• Last Synced: 2025-04-12T23:54:02.695Z (13 days ago)
• Topics: canvas, canvas-editor, lucia, lucia-auth, nextjs, prisma, shadcn-ui, supabase
• Language: TypeScript
• Homepage: https://kanvas-psi.vercel.app
• Size: 2.65 MB
• Stars: 28
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Kanvas 🎨

Welcome to **Kanvas**, lightweight, and fully customizable canvas app built with cutting-edge technologies! 🚀 Whether you're a designer, developer, or someone passionate about creative web apps, Kanvas is here to help you design beautiful and interactive **div-based** canvases.

![image](https://github.com/user-attachments/assets/c6f114c9-70cb-408c-931d-4566b0063108)

But it doesn't stop there! **Kanvas** is easily extendable, making it a versatile tool for designing not only div elements but also for integrating with popular libraries like **Konva** or **Fabric**.

## ✨ Features

- **Modern Tech Stack**: Built with **Next.js**, **Lucia Auth**, **Prisma**, **Supabase**, **Shadcn**, **TailwindCSS**, and **Zustand**.

- **State Management**: Effortlessly manage your state using Zustand, with built-in **undo/redo** functionality.

- **Interchangeable Use**: Configurable to work with **Konva** or **Fabric** if you prefer to design with those libraries.

- **Beautiful UI**: Styled with **TailwindCSS** and **Shadcn**, offering a sleek and intuitive user experience.

- **Customizable**: Easily configure and adapt the template to your needs or scale it for your projects.

- **State Persistence**: Using Supabase for database management ensures that your designs are saved and retrievable with ease.

- 

  ![image](https://github.com/user-attachments/assets/a677d175-5da5-45e8-95e1-d0c858c99d98)

## 📦 Tech Stack

- **Next.js**: For a fast and scalable React framework.

- **Lucia Auth**: Authentication made simple and secure.

- **Prisma**: Powerful ORM for easy database access.

- **Supabase**: Scalable and secure data management.

- **Shadcn**: Beautiful UI components built with Radix UI.

- **TailwindCSS**: Rapid styling with utility-first CSS.

- **Zustand**: A small, fast state-management library with a minimal API.

  ![image](https://github.com/user-attachments/assets/eb5a5fbe-db10-4b18-bc2d-eb8c31f3f560)

## 🚀 Get Started

Clone the repository:

```bash

git clone https://github.com/your-username/kanvas.git

cd kanvas

```

**now before you go , please star this repo if you liked the project . Thank you . **