https://github.com/parisa-singh/pixel-art-editor
A Pixel Art Editor with a customizable grid, color palette management, and use of LocalStorage support for artwork.
https://github.com/parisa-singh/pixel-art-editor
css customizable html js localstorage pixel-art website
Last synced: about 2 months ago
JSON representation
A Pixel Art Editor with a customizable grid, color palette management, and use of LocalStorage support for artwork.
- Host: GitHub
- URL: https://github.com/parisa-singh/pixel-art-editor
- Owner: parisa-singh
- License: mit
- Created: 2025-03-19T16:24:41.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-19T16:31:43.000Z (about 2 months ago)
- Last Synced: 2025-03-19T17:34:08.227Z (about 2 months ago)
- Topics: css, customizable, html, js, localstorage, pixel-art, website
- Language: JavaScript
- Homepage: https://parisa-singh.github.io/pixel-art-editor/
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎨 Pixel Art Editor
A **simple and aesthetic** Pixel Art Editor with a **customizable grid, color palette management**, and **local storage support** to keep your artwork saved even after refreshing the page.
## 🚀 Features
- **Create pixel art** on a resizable grid.
- **Choose colors** from a predefined palette or add your own custom HEX colors.
- **Prevent duplicate colors** in the palette.
- **Delete unwanted colors** by right-clicking (or long-pressing on mobile).
- **Local Storage support** to save the grid size, colors, and artwork across page reloads.
## 🛠️ Technologies Used
- **HTML**
- **CSS**
- **JavaScript (Vanilla)**
- **Local Storage API**
## 📦 Installation
1. Clone this repository:
```sh
git clone https://github.com/yourusername/pixel-art-editor.git
```
2. Open the `index.html` file in your browser.
## 🎮 How to Use
1. **Select a color** from the palette (or add a custom HEX color).
2. **Click on the grid** to start drawing.
3. **Drag the mouse** to paint multiple pixels.
4. **Change grid size** using the slider.
5. **Right-click (or long-press) a color** in the palette to delete it.
6. **Your artwork is automatically saved** and will reload when you refresh the page.
7. **Click "Clear"** to reset the grid.
## 🤝 Contributing
Pull requests are welcome! If you'd like to improve the project, feel free to fork and submit a PR.
## 📜 License
This project is open-source and available under the **MIT License**.
---