A modern, responsive drawing application built from scratch. This project is a complete refactor of a classic vanilla JavaScript sketchpad, enhanced with a modern tech stack and a polished, animated user interface.
- ✏️ Pencil & Eraser Tools: Draw and erase with an adjustable brush size.
- 🎨 Rich Color Palette: A wide selection of curated colors, plus a dynamic random color option.
- 💧 Paint Bucket: Fill the entire canvas with the selected color in a single click.
- 🖼️ Adjustable Canvas: Resize the grid from 1x1 up to 100x100 pixels.
- 🌐 Toggle Grid Lines: Show or hide the grid for better guidance.
- 📥 Export to PNG: Save your creations as a high-quality PNG image.
- 📱 Fully Responsive: A seamless experience on desktop, tablet, and mobile devices.
- ✨ Modern UI: A sleek, dark-themed interface with glassmorphism effects, custom cursors, and smooth animations.
- Vite: Next-generation frontend tooling for a fast development experience.
- Tailwind CSS: A utility-first CSS framework for rapid and responsive UI development.
- JavaScript (ES6+): Modern, clean, and modular vanilla JS to handle all the application logic.
- Lucide Icons: Beautiful and consistent open-source icons.
- dom-to-image-more: A powerful library to export DOM nodes as images.
To run this project locally, follow these steps:
-
Clone the repository:
git clone [https://github.com/ericpastorm/sketchpad](https://github.com/ericpastorm/sketchpad)
-
Navigate to the project directory:
cd sketchpad -
Install dependencies:
npm install
-
Run the development server:
npm run dev
The application will be available at
http://localhost:5173.
This project is licensed under the MIT License. See the LICENSE file for details.