PIXI helps to make your site pixel perfect.

Download .zip Download .tar.gz View on GitHub View Demo


PIXI helps to make your site pixel perfect. PIXI let you overlay design mockup over your site. You can adjust opacity and position of the overlay.


  • include pixi.js & pixi.css in your site.
<link rel="stylesheet" href="http://praveenvijayan.github.com/PIXI/code/pixi.min.css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://praveenvijayan.github.com/PIXI/code/pixi.min.js"></script>


  • Press G to activate the overlay.
  • Drag n Drop design mockup/template into the overlay.
  • Press shift + click & drag image to adjust.
  • Press 0-9 to set opacity.


  • G Toggle overlay.
  • Z Bring fornt or sent to back [z-index:0-9999].
  • Moves overlay image 1px left.
  • Moves overlay image 1px right.
  • Moves overlay image 1px up.
  • Moves overlay image 1px down.
  • shift + Drag Moves overlay image.
  • 0 - 9 Sets overlay opacity.
  • P - Disables overlay's pointer event. When pointer event is none, you can't drag n drop images. Activate it (press 'P') when you want to inspect underlaing elements.

Browser support

PIXI uses HTML5 DnD, File API & Local storage to do things. It won't work in IE. Tested in chrome & Firefox.


PIXI : Tool to create a pixel perfect site.