BaipixStarOpen the editor

Draw

Sprites, icons, tiles and whole scenes

Every tool you'd expect from a pixel art editor, laid out like a design tool. Baipix is free and open source, and it runs in your browser with nothing to install. Here's what each tool does, and the key that picks it.

Open the editor View on GitHub

01 · Start

Start from a preset, or from an image.

Pick a size and a palette that suit what you're making, or bring your own picture.

  • Presets

    Icons, sprites, tiles, a Game Boy screen and more, each with its size and palette. The sprite opens with symmetry on, the tile with the tile preview. Or one of the last sizes you used.

  • Recover the pixels

    Open a screenshot of pixel art that was scaled up. Baipix finds its grid and gives you back the real pixels, at their real size.

  • Reference image

    Place a photo or a sketch under the layers, move it, resize it, fade it, and draw over it. It's never exported.

A reference image under the layers, traced at 24×24, then hidden. It's never exported.

02 · Draw

Draw pixel by pixel.

Left click paints the primary color, right click the secondary. Alt picks a color from the canvas.

  • Pencil

    Pixel perfect removes the doubled corners that make curves look jagged, and the stabilizer smooths out a shaky hand. Square or round tip, any size.

  • Lasso fill

    Draw around a shape and it's filled, in one gesture.

  • Paint bucket

    Fills an area of the same color. Clicked in a selection, it fills all of it.

  • Gradient

    Linear, radial, angular or diamond, in palette colors only, dithered from one to the next. Edit its stops on a bar, and the last gradient follows every change.

  • Lasso and magic wand

    Select any shape, or a color with one click. Shift adds, Alt takes away, and every tool keeps to what's selected.

  • Spray

    Scatters pixels around the cursor: stars, dust, leaves.

  • Eraser

    Back to transparent, with the same tips as the pencil.

  • Brushes and dithering

    Turn a selection into a brush, in one color or with its own colors. Six dithering patterns mix your two colors with the pencil, the lasso fill and the paint bucket.

As drawn: 16 doubled corners

Pixel perfect

Paint bucket

Gradient

Spray

SolidDotsCheckerDenseSolid

03 · Shapes

Shapes that land on whole pixels.

Outlined or filled, in any tip size.
Shift keeps them square or round.

Line, rectangle, rounded rectangle, ellipse, triangle, star, heart.
Image › Adjustments › Outline. You see it live, then you apply it.

04 · Colors

Colors that follow the palette.

Shading works on the colors you chose, so a drawing never fills up with near-duplicates.

  • Shade and Lighten

    Paint over pixels to step them down or up their ramp: the same hue in the palette, any color in the palette, or free.

  • A light to shade by

    Each board can have a light: drag a lamp around a sphere to set where it comes from and how high. Faint lines on the canvas show it while you shade, and a drop shadow can follow it.

  • Eyedropper

    Picks a color from the canvas. Alt does the same from any drawing tool.

  • Palettes

    Each file keeps its own: one of 25 classics (PICO-8, Game Boy, Endesga 32…), the colors of the drawing, kept up to date as you draw, or one of your own palettes, there in every file. .hex and .gpl files in and out, and a five-step ramp from any color, with hue shifting.

  • Adjustments

    Hue, saturation and brightness for a layer or all of them. Or remap the whole drawing to another palette, by nearest color or by lightness.

Original19 colors
Ice Cream GBRemap, by lightness
SLSO8Remap, by lightness
PICO-8Remap, nearest color
Hue +140°Adjustments
One animation, other palettes: Image › Adjustments, then Remap or Hue, on every frame.

05 · Rework

Rework without adding colors.

Liquify and Jumble move the pixels that are already there: the edges stay sharp and the palette stays the same.

  • Liquify

    Push a part of the drawing, grow it or shrink it, like fluid.

  • Jumble

    Shuffles the pixels under the brush: foliage, rock, noise, a ragged edge.

  • Blur

    Softens an edge. With “Stay within the palette” on, it only uses your colors, with no in-between shades.

Jumble along the edge, twice. Still the same five colors.

06 · The View menu

Every shortcut →

Symmetry, guides and seamless tiles.

Three views that make sprites and textures faster to draw. Turn them on and off as you go.

Symmetry

Draw one side, the other follows. Left-right, top-bottom or both, around an axis you drag anywhere.

View › Left-right symmetry Shift X

Rulers and guides

Drag a guide out of a ruler to line up sprites, or to split a sheet into cells.

View › Rulers and guides

Tile preview

Copies all around the drawing. A stroke that leaves one edge comes back on the other, so the texture repeats without a seam.

View › Tile preview Shift T

07 · Layers

Layers, like in a design tool.

Keep the sky, the background and each character apart, and change one without touching the others.

  • Move

    Click a pixel to grab its layer. Drag the handles to resize it, or just outside a corner to rotate it. The arrow keys nudge by 1 px, with Shift by 8.

  • Blend modes and opacity

    12 blend modes, from Multiply to Difference, and an opacity for each layer.

  • Groups

    Group layers, four levels deep, and drop layers into groups. A group hides, locks, and has its own opacity and blend mode. Double-click on the canvas to reach a layer inside.

  • Layer effects

    Outline, drop shadow and glow, drawn from the layer without changing it, in palette colors.

  • Hide, lock, solo

    Alt-click an eye to see one layer alone. Merge down, merge visible, flatten.

  • Floating preview

    A live view with its own zoom, to check the whole drawing or a detail while you work. Click it to move the canvas there.

Move a layer, darken the scene with a Multiply layer, hide another. The rest stays put.

08 · Components

Draw it once, use it everywhere.

The same sprite in ten places, and one change goes to all of them.

  • Component

    Turn the selection, or what's drawn on a layer, into a component. It's listed at the top of the left panel, with a diamond.

  • Instances

    Drag the component onto the canvas to place a copy, or Alt-drag one. Draw on the component and every instance follows, live.

  • Repeat grid

    Columns and rows of instances, with a gap between them, set up live.

  • Go to component, detach

    From an instance, jump to its component, or detach it to change that copy on its own.

Fill the component: every instance fills with it.

09 · Isometric

Whole volumes, in one drag.

Turn on the isometric grid and draw boxes, cylinders, pyramids and stairs, already shaded, with clean 2:1 edges.

  • Isometric grid

    Diamonds of the cell you pick, in the Board section. Lines snap to 2:1 with Shift, and shapes lie flat on the ground or stand on a wall.

  • Box and pyramid

    Drag across the top, set the height. The sides come out darker from the palette, with an outline, a light edge, lines between the faces, and bevels for crates and stone blocks.

  • Cylinder

    Upright for pillars and towers, or lying along a wall for logs, barrels and wheels.

  • Stairs and ramps

    A slope or a staircase of even steps, rising toward the corner you pick.

  • A color per face, tiles edge by edge

    Pick the top, left and right colors by hand, and choose which edges of a floor tile get the outline, so tiles side by side share one line.

Each volume is one drag, shaded from one color.

10 · Boards

Several boards, one file.

A sprite and its variants, a scene in four seasons, a sheet of icons: side by side, each with its own size and layers.

  • Boards

    Draw a rectangle beside the others with the Board tool to add one, or duplicate a board next to it. Drag a board by its name to move it, click it to work on it.

  • Arrange

    Select several boards to move, align or delete them together. Deleted one by mistake? Undo brings it back.

  • Layers outside the boards

    Drag a layer off every board and it stays there, listed next to the boards, until you drop it onto one.

  • History that stays

    Each board keeps its last 50 steps of undo and redo, even after you reload the page.

Duplicate the board, recolor the copy: four seasons in one file.

11 · Animate

Make it move.

A timeline under the canvas, a row per layer and a column per frame. A background on its own layer stays put while the rest moves.

  • Frames

    Add a frame (a copy of the one shown) or an empty one that keeps the scenery, drag frames to reorder them, give each its own duration. Shift+A opens the timeline.

  • Onion skin

    The frames before in red and after in blue, faded under the one you draw, up to five on each side. Loop shows the last frames before the first, for animations that cycle.

  • Play

    Enter or Space plays it as you draw; comma and period step one frame back or forward.

Animate the slime
  1. 260 ms
  2. 90 ms
  3. 80 ms
  4. 80 ms
  5. 60 ms
  6. 60 ms
  7. 70 ms
  8. 110 ms
  9. 70 ms
  10. 60 ms
  11. 60 ms
  12. 80 ms
  13. 70 ms
  14. 70 ms
Each frame shows for its own duration: a pose holds, a jump flashes by.

12 · Export

Out as clean vector, or frame by frame.

What you draw goes straight into your design files, or into your game.

  • Copy as SVG

    Ctrl+Shift+C copies it with one path per color, so the file stays small and easy to edit. Paste it into Figma or Illustrator and it stays sharp at any size.

  • PNG from 1× to 32×

    With a live preview, a transparent background or not, the whole drawing or one layer.

  • Animated GIF

    Every frame with its duration, looping, with the drawing's exact colors.

  • Sprite sheets and tilesets

    The frames or the layers on one sheet, with a JSON that Phaser, Unity or Godot read. A PNG sequence, one file per frame. Or the drawing cut into tiles for Godot and Tiled.

  • Aseprite

    Keep working in Aseprite: layers, groups, blend modes, the palette and every frame, in an .aseprite file.

  • Pixel gap

    Space the pixels apart for an LED or dot-matrix look, on the canvas and in exports.

Drag the Gap field to space the pixels apart, on the canvas and in exports.

heart.svg2 paths
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="7" viewBox="0 0 9 7" shape-rendering="crispEdges">
  <path fill="#b13e53" d="M1 0h2v1h-2zM6 0h2v1h-2zM0 1h1v1h-1zM3 1h1v1h-1zM5 1h3v1h-3zM0 2h1v1h-1zM2 2h6v1h-6zM0 3h8v1h-8zM1 4h6v1h-6zM2 5h4v1h-4zM3 6h2v1h-2z"/>
  <path fill="#f4f4f4" d="M1 1h2v1h-2zM1 2h1v1h-1z"/>
</svg>
What Copy as SVG puts on the clipboard: one path per color.

Shortcuts

Every tool is one key away.

And every command is in the palette, on Ctrl+K.

Draw your first pixel.

Free and open source, under the MIT license. No account, and your drawings stay on your device.

Open the editorRun it locally