https://github.com/lucapalminteri/paint
A simple, web-based drawing and diagramming tool inspired by Excalidraw. Built with React.js and Next.js, featuring intuitive drawing tools, customizable colors, and a responsive design.
https://github.com/lucapalminteri/paint
canvas drawing excalidraw nextjs
Last synced: 8 days ago
JSON representation
A simple, web-based drawing and diagramming tool inspired by Excalidraw. Built with React.js and Next.js, featuring intuitive drawing tools, customizable colors, and a responsive design.
- Host: GitHub
- URL: https://github.com/lucapalminteri/paint
- Owner: LucaPalminteri
- Created: 2024-09-08T20:07:23.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-10T00:35:40.000Z (about 1 year ago)
- Last Synced: 2025-07-28T08:44:59.646Z (3 months ago)
- Topics: canvas, drawing, excalidraw, nextjs
- Language: TypeScript
- Homepage:
- Size: 1.22 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Paint
## Overview
This project is a web-based drawing and diagramming tool inspired by Excalidraw. It provides a simple, intuitive interface for creating diagrams, sketches, and other visual content directly in the browser.
## Features
* **Simple Drawing Tools**: Includes options for freehand drawing, shapes (circle, square, triangle), lines, and text.
* **Color Palette**: A selection of colors for drawing and filling shapes.
* **Canvas Background**: Customizable canvas background colors.
* **File Operations**: Open, save, and export functionalities. (Not fully ready)
* **Collaboration**: Live collaboration feature for real-time editing with others. (Not ready)
* **Command Palette**: Quick access to various functions through a command interface.
* **Responsive Design**: Works on desktop and mobile devices.
* **Dark Mode**: Supports light and dark themes for comfortable use in different lighting conditions. (Not ready)
## Technology Stack
* **Frontend**: React.js with Next.js framework
* **Styling**: Tailwind CSS
* **UI Components**: shadcn/ui
* **Icons**: Lucide React
## Getting Started
### Prerequisites
* Node.js (v14 or later)
* npm or yarn
### Installation
1. Clone the repository:
```
git clone https://github.com/lucapalminteri/paint.git
```
2. Navigate to the project directory:
```
cd paint
```
3. Install dependencies:
```
npm install
```
or
```
yarn install
```
4. Start the development server:
```
npm run dev
```
or
```
yarn dev
```
5. Open `http://localhost:3000` in your browser to see the application.
## Usage
* Use the toolbar at the top to select drawing tools and colors.
* Click and drag on the canvas to draw.
* Use the menu in the top-left corner to access file operations, collaboration features, and settings.
* Adjust the canvas background using the color swatches at the bottom of the menu.
## Contributing
We welcome contributions to this project! Please follow these steps to contribute:
1. Fork the repository
2. Create a new branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## Acknowledgments
* Inspired by [Excalidraw](https://excalidraw.com/)
* UI components provided by [shadcn/ui](https://ui.shadcn.com/)
* Icons from [Lucide](https://lucide.dev/)
## Contact
[Luca Palminteri](https://www.linkedin.com/in/luca-palminteri) - [lucapalminteri02@gmail.com](mailto:lucapalminteri02@gmail.com)
Project Link: [https://github.com/lucapalminteri/paint](https://github.com/lucapalminteri/paint)