portable pixel editor widget

Usage no npm install needed!

<script type="module">
  import potchPixeleditor from 'https://cdn.skypack.dev/@potch/pixeleditor';



a portable pixel editor widget

npm install @potch/pixeleditor

Touch support is quite lacking right now, but mouse and keyboard support is available!

PixelEditor Class

new PixelEditor(options)

creates new PixelEditor object.

options is an object with the following properties:

name required? type default description
width yes Number n/a width of the drawing
height no Number value of width height of the drawing
zoom no Number 8 amount to scale drawing canvas
colors no Array see "Default Colors" below the colors to display in the widget's palette
currentColor no Number 1 index in colors of the initial drawing color
bg no Number 0 index in colors of the color to use to fill the initial drawing and the drawing after calling clear()
container no Element n/a element to append the widget to. Optional as you can also call mount()
onUpdate no Function n/a callback to call when the drawing changes


colors are provided as an Array of [red, green, blue] Arrays, where the color components go from 0 to 255.

The default colors are:

  [255, 255, 255], // white
  [0, 0, 0],       // black
  [255, 0, 0],     // red
  [255, 255, 0],   // yellow
  [0, 255, 0],     // green
  [0, 255, 255],   // cyan
  [0, 0, 255],     // blue
  [255, 0, 255]    // magenta


If a Function is provided to the constructor, it will be called when the drawing is updated. this will refer to the PixelEditor instance.


These are the intended public methods of the class. Other methods are available, but are subject to change.


Appends the widget to a container element. Called automatically if container is passed to the constructor.

  • container - an existing element on the page


Resets the drawing to a single color.

  • color (optional) - the index in colors of the color every pixel should be set to. Defaults to bg.

resize({ [width], [height], [zoom] })

Resize the drawing canvas to the provided dimensions and zoom. At least one of width, height, and zoom must be provided.


Restore to the previous drawing state.

toImageData({ [zoom] })

Returns an ImageData object containing the drawing scaled to the provided zoom.

  • zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

toBlob({ [zoom] }).then(blob => ...)

Returns a Promise that resolves with a Blob of type image/png containing the drawing scaled to the provided zoom.

  • zoom (optional) - scaling factor to apply to the drawing when exported. Defaults to 1.

Keyboard Support

When focused, the following key controls are available:

  • up, down, left, right: move cursor
  • D, L, F: select Draw, Line, Fill tools
  • Z: undo
  • space: activate current tool
  • [ and ]: cycle through colors
  • Alt(Option) + X: clear canvas