Vue Pixel Art

Vue Pixel Art is an easy way to draw your Pixel Arts and get the CSS code generated from it.


  • Click on a square to paint. If it is already painted, that square will be transparent again.
  • Hold mouse down and drag your mouse everywhere in the grid to paint. This will not erase any square, just paint.
  • Size can't be greater than 100.


contributions welcome

This project follow the Puzzle Pattern guidelines and uses Standard Code Style.

Fork the project and enter this commands in your terminal:

git clone
cd vue-pixel-art
npm install
npm run serve

The default port is 8080.


  • [ ] Add E2E tests with Cypress.
  • [ ] Add Unit tests with Jest.
  • [ ] Add Redo/Undo.
  • [X] Add mouse drag and paint.
  • [X] Add Vuejs pixel logo on README and favicon.ico.
  • [X] Deploy.