Skip to workspace
PixelOkay

Pixel Art & Sprite Studio

Creative workspace
Local workspace
Tools
1200%
Draw directly on the canvas · Right click to erase · Scroll the workspace to pan
Ready to create
—·32 × 32 px·1 layer
ANIMATION

Frames 01

Frame 1 of 1

Make pixel art, animated sprites, and game-ready sprite sheets

PixelOkay Pixel Art & Sprite Studio is a free, browser-based pixel editor for small game characters, RPG tiles, retro icons, sprites, and looping frame-by-frame animations. Use a pencil, eraser, fill, line, rectangle, ellipse, and color picker, with separate layers for art and backgrounds. Zoom in to place pixels accurately and use horizontal or vertical mirroring to create symmetrical shapes.

How to animate pixel art

Create or duplicate a frame in the timeline, edit its pixels, set its duration, and preview the resulting animation. Onion skinning helps you compare adjacent frames. Download a GIF to share the animation or export a sprite sheet PNG with JSON frame coordinates for game development.

PNG vs GIF vs sprite sheet

PNG exports the current frame with transparency and optional nearest-neighbor upscaling. GIF exports all frames with individual durations and a maximum of 256 palette colors, including one transparent index. Sprite sheets arrange frames into a PNG grid and package it with JSON metadata in one ZIP download. Save a PixelOkay project file to preserve editable layers and frames.

Can I work offline or privately?

Yes. Once the static page has loaded, drawing and exporting run locally without uploading images to a server. Browser storage may keep a recovery copy of smaller projects, but you should download editable project files regularly. The studio has no account requirement or external rendering library.

What sizes can I edit?

Choose canvases from 8 × 8 to 256 × 256 pixels. Frames and layers have caps to protect browser memory. Larger documents and exports can take more time, especially when creating animations, so compact sprite sizes generally work best.

NEW WORKSPACE

Create a sprite

Start with a transparent canvas. Choose the pixel dimensions for your game character, tile, icon or animation.

Resize canvas

Canvas grows or shrinks from the top-left corner. Pixels outside the new bounds are removed. Undo is available.
EXPORT

Export artwork

Export locally without sending artwork to a server.

Choose format

PNG preserves the current frame and transparency.

Shortcuts & tips

Recovery copy:

B Pencil E Eraser G Fill I Eyedropper

L Line R Rectangle O Ellipse M Select

Ctrl/⌘+Z Undo Ctrl/⌘+Shift+Z Redo Ctrl/⌘+S Save project Ctrl/⌘+X Cut

[ ] Brush size + − Zoom Space Play animation

Right click the canvas to erase · Select a region, then copy, cut, paste or move it · Focus the canvas, use arrow keys to navigate pixels and Enter to paint. When a selection is active, Shift+arrow moves its pixels.

Using Pixel Art & Sprite Studio

Choose a canvas, draw on layers and add frames for animation. Preview the sequence, then export a still frame, GIF or sprite-sheet ZIP containing the PNG and frame map.

Export dimensions, frame counts and memory budgets are bounded. GIF worker support and cancellation differ from the blocking compatibility fallback. Browser recovery may be stale, so keep editable project JSON backups.

Choose a pixel frame, animated GIF or sprite sheet

Practice: a two-frame blinking sprite

  1. Draw a simple face on a small canvas, then create a second frame and change the eyes.
  2. Set the frame durations and preview the sequence.
  3. Save JSON before exporting a GIF or sprite sheet. Check the destination's frame-map and transparency requirements.

This is an authored pixel-animation exercise, not a supplied sprite or decoded output.

Sprite export questions

Why does a large sprite sheet fail even when the canvas is small?

The sheet combines all frames and the chosen scale, so total dimensions and pixel count can exceed the export budget. Reduce scale or the number of frames and review the sheet layout.

Will GIF export always remain responsive and cancellable?

No. Where Worker support is unavailable, the compatibility path can block the interface and cannot offer the same cancellation behavior. Keep the editable project first and use a smaller animation when resources are limited.

Related tools