Convert images into pixel art directly in the browser. Upload a PNG/JPG, adjust pixel size, preview instantly, and download the pixelated image.

PixelX is a lightweight web app for quick pixelation:

• What it solves: Fast, client-side image pixelation without installing software
• What makes it unique: Adjustable pixel size with live preview and export at high-resolution PNG
• What was learned: Canvas-based image processing, file validation, React state for graphics controls, and responsive UI with Tailwind

The app uses the HTML Canvas API to redraw images in pixel blocks, with safeguards for file type/size and a clean download flow.

• React 19.0.0
• Vite 6.2.0
• Tailwind CSS 4.0.9
• HTML Canvas API

• Node.js and npm installed

1. Clone the repo

   git clone https://github.com/tumansutradhar/pixel-x.git
   cd pixel-x

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open in browser

   http://localhost:5173/
   

1. Click Choose file and select a PNG or JPG (max 10MB)
2. Adjust Pixel Size slider to change blockiness (0 = no pixelation)
3. View live preview on the canvas
4. Click Download Image to save as PNG

Features in action:

• File validation: PNG/JPG only, max 10MB
• Pixel size control: dynamic pixelation via canvas re-draw
• High-DPI output: renders at 2x scale for sharper exports
• Download: saves current canvas as pixel_art.png

• Image upload with type/size validation
• Adjustable pixel size slider (live preview)
• Canvas-based pixelation with offscreen buffer
• High-resolution PNG download
• Error handling and user feedback
• Responsive layout and dark UI
• Footer with author link

pixel-x/
├── src/
│   ├── components/
│   │   └── Footer.jsx
│   ├── App.jsx        # Pixelation logic and UI
│   ├── App.css
│   ├── index.css
│   └── main.jsx
├── public/
├── index.html
├── package.json
├── vite.config.js
└── tailwind.config.js

• Image upload and validation
• Pixelation slider with live preview
• PNG download
• Drag-and-drop upload
• Multiple output formats (JPG/WebP)
• Adjustable canvas background
• Preset pixel sizes
• Mobile touch optimizations

Contributions are welcome!

1. Fork the Project
2. Create your Feature 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

Distributed under the MIT License. See LICENSE.md for more information.

Tuman Sutradhar

• GitHub: @tumansutradhar
• Email: [email protected]
• LinkedIn: Tuman Sutradhar

Project Link: https://github.com/tumansutradhar/pixel-x

• HTML Canvas API docs
• Tailwind CSS framework
• React and Vite documentation