Pixel Eater, a web based pixel art editor

Every now and then I trumble around with building visual editors. Sometimes they are for vector graphics, sometimes raster. Sometimes for building GUIs, sometimes for editing JSON structures. These editors are almost always for fun and they never see the light of day. Why build a new editor when the world already has so many. Or at least that's what I tell myself.

I suspect the real reason I never release these things is because I'm scared. Scared no one will use them. And that anyone who does use them will quickly tell me it sucks then move on. I'm scared it will be a failure. That I will be a failure. So I work on them until they are ready to be released, which never arrives, and I eventually forget about them and move on.

Well no more. I restarted a pixel editor I was working on a few years ago (the React code still uses JSX files!), polished it up enough to make it work again, and now I'm releasing it. Warts and all. It's not ready for professional use. Far from it. But if I wait until it's perfect it will never be released. Far better to get community feedback now, then wait for a perfection that may (will) never come.

Introducing Pixel Eater

Pixel Eater is a web-based pixel art editor.

z

Pixel Eater has all of the core features you'd expect from any raster drawing tool such as

  • pencil
  • fill buckets
  • selection
  • lines and ellipses

But it also has some features that are only useful to pixel artists, like

  • restricting to a specific palette of colors from a retro game console
  • tracking the exact colors used in the current document
  • painting with a repeated pattern instead of a flat color
  • exporting at integer multiples of the original size

The editor is built entirely in Javascript with React, and uses CSS Grid to ensure the various panels and toolbars resize properly. It also works on mobile with touch events (using the scroll toggle), and should run offline when you save it as a home screen shortcut.

All editing is done locally in the browser, however you can save and load to my document server using your github account.

This is a game I've been working on, all artwork done with Pixel Eater.

z

And a little platformer game.

z

You can use Pixel Eater in your browser at https://apps.josh.eart/pixel-eater or compile it from the source code in the Github repo.

I plan to keep adding more pixel art features, like greater palette control and animated sprite management. If there's a feature you want, or would simply like to translate it into your preferred language, just let me know.

Happy pixeling

Talk to me about it on Twitter

Posted June 8th, 2020

Tagged: pixelart tools