Tools

The toolbar has 33 tools. Some share a button: a small corner mark shows a button holds more than one tool, and right-clicking it lists them. Pressing a shared button's key again switches to the next tool on it (for example, B picks the Pencil, pressing B again picks the Spray, then the Scatter and then the Dither).

Each tool's settings appear in the tool options bar above the canvas, and each entry below links to them in Tool options. Each tool keeps its own brush size, shape and ink, so switching from the pencil to the eraser and back brings the pencil's brush back; turn off Settings > Remember Brush per Tool to share one brush between every tool. Your other settings are kept as you switch tools.

How tools behave

• Left and right mouse buttons. The left button draws with the foreground color and the right button with the background color. With the Shading ink, the right button steps the other way along the shade ramp.
• Alt picks a color. Holding Alt over the canvas switches to the Eyedropper until you let go, except on tools that use Alt themselves: the selection tools, Magic Wand, Move, Hand, Line, Rectangle, Ellipse, Triangle, Hexagon, Star, Tile Stamp and Iso Shape.
• Selections and symmetry. When part of the sprite is selected, painting stays inside the selection. With symmetry on, strokes and shapes are mirrored across the symmetry axes.
• Painting several cels at once. Turn on Paint across cels in the tool options bar, then select cels in the timeline: each stroke, fill or shape you make on one of them lands on all of them, and one undo takes it all back. The badge next to the button says how far it reaches, for example "2 layers × 4 frames". While you draw you see the stroke on the cel you're painting; the others update when you let go.
• Snap to grid (Shift+S) snaps shapes, lines, selections, slices and gradients to the document grid. A drag across cells covers them exactly, as in Aseprite: a rectangle or selection dragged over one 8×8 cell is 8×8, not 9×9. Snap to guides (Ctrl+Shift+;) snaps them onto a nearby guide, which wins over the grid.
• Shapes and lines. Shift makes a square, circle or square box (on the shorter side of the drag, as in Aseprite) and snaps a line's angle. Alt or Ctrl draws from the center: the point you pressed becomes the middle. Pressing or letting go of these keys mid-drag updates the shape straight away, except that on the Rectangle Alt pressed after the drag has begun rotates it instead.
• Straight lines from the last point. Shift-click with any freehand tool (Pencil, Eraser, Dither, Spray, Scatter, Blur, Jumble, Dodge/Burn) draws a straight line from where the last freehand stroke ended, whichever tool made it and on whichever layer or frame. The stabilizer doesn't apply to that line, so it reaches the click.
• Locked and hidden layers can't be painted on, including layers inside a locked or hidden group.
• Tilemap layers. The pixel tools paint a tilemap layer's tiles in the Pixels modes; picking one while in Tiles mode switches back to Pixels. The Tile Stamp switches to Tiles mode.
• Tools with several steps (Polygonal Lasso Selection, Polygon, Curve, Iso Shape) finish with Enter or a double-click. Esc cancels. The Text tool finishes with Ctrl+Enter instead, since Enter starts a new line.
• The tool wheel. Hold ` (the backquote key, under Esc) and two rings of tools open around the pointer: the inner ring close by, the outer ring behind it with each icon between two inner ones. Move toward one and let go of the key to switch to it; letting go in the middle, or pressing Esc, changes nothing. Choose the tools and where they sit in Settings > Tool Wheel...: drag tools into the eight slots of each ring (slots may stay empty), drag one slot onto another to swap, and right-click a slot or drag it onto the trash at the end of its row to empty it.
• Borrowing a tool. Turn on Settings > Hold Tool Keys to Borrow and a tool's key does two things: tapping it switches to the tool as usual, while holding it for a moment only borrows the tool, and letting go returns to the tool you had (hold E to erase, release to carry on with the pencil). It is off by default so that a key held while you think never changes the tool.
• Panning. Hold Space and drag, or drag with the middle mouse button, with any tool (Space is the hand tool's quick key, as in Aseprite). While keyboard drawing is on, Space draws instead.

Brush and ink options

The drawing tools share their brush and ink options: the brush Size from 1 to 64 pixels (which the Spray, Scatter, Dither, Blur, Jumble and Dodge/Burn use too), Brush shape (square, circle, line, diamond, cross, X or star) and Angle (it turns the line and square), a Custom brushes button for the Brush Library (its built-in brushes and My Brushes), Pixel-perfect, Dynamics (a stabilizer, and pen pressure or speed mapped to size, angle and color; pen pressure to size is on from the start, and mouse and finger strokes ignore pressure) and the Ink with its Shades. Each tool's list, with the values and defaults, is in Tool options.

Selection tools

Double-click with any of them to select the grid cell under the pointer, and keep the button down after the second click to drag across more cells (grid cells).

Drag from one corner to the opposite one. Hold a key when you start to combine with the current selection, as in Aseprite: Shift adds to it, Alt+Shift (or just Alt) subtracts from it, and Ctrl+Shift keeps only the overlap. A click without a drag deselects. During the drag, Shift makes a square and Ctrl grows it from the point you pressed; a key you held when you started only does this once you press it again. Radius rounds the selection's corners, all four together or each on its own (see the Rectangle below); the marquee keeps its own radius, separate from the Rectangle's.

Works like the Rectangular Selection, with the same keys when you start and during the drag: Shift during the drag makes a circle and Ctrl grows it from the center. A click without a drag deselects.

Drag around the area; the outline closes by itself when you let go. The keys combine with the current selection as above, and a click without a drag deselects.

Each click adds a corner, and a line follows the pointer to show the next edge. Pressing and dragging before you let go adds two corners, where you pressed and where you let go, as in Aseprite. Double-click or press Enter to close the shape. Esc cancels.

Selects by color on the active layer only. Contiguous selects the connected area you click; Global selects every matching pixel on the layer. Tolerance (0 to 255) sets how different a color can be and still match. On an indexed sprite it matches palette indices instead: two entries of the same color are different, and Tolerance is how many indices apart a pixel may be. 8-connected and Stop at grid work as with the paint bucket. These settings are the wand's own: changing them leaves the paint bucket's alone (in Aseprite the two share them). Press and drag to sweep: every area the pointer passes over joins one selection, the outline grows as you go, and letting go makes it a single step to undo. The wand ignores the current selection while it looks for matching pixels; the selection keys held as you press then combine the whole result with the current selection. A click outside the canvas does nothing.

Drawing tools

Drag to draw; the whole stroke is one undo step. Shift-click draws a straight line from where the last freehand stroke ended. In tiled view, strokes wrap around the edges. As in Aseprite, a tilted line brush skips pixel-perfect (removing corners would leave holes in its band).

Options: brush size, shape and angle, pixel-perfect, ink and dynamics. On a tilemap layer, Place tiles puts the selected tile on the cells the stroke touches.

Holding the button still keeps spraying. Rate (1 to 64) sets how many dots each burst adds; moving, it sprays a burst per pixel of path, so a fast mouse or pen doesn't spray thicker. The spray's radius follows the brush size.

Drag to stamp the brush along your path, about one brush width apart, with each stamp landing at a random spot near the path: good for leaves, grass, sparkles and rubble, especially with a custom brush. Scatter X and Scatter Y (0 to 64 pixels) set how far a stamp can land to either side of the path and above or below it, and Count (1 to 16) sets how many stamps land at each step. With both offsets at 0 you get a dotted line. The whole stroke is one undo step, and unlike the spray, holding still adds nothing.

Options: brush size, shape and angle, ink, Scatter X, Scatter Y and Count.

Draws like the pencil, but paints only the pixels of an ordered pattern and leaves the pixels in between as they are, for dithered shading and textures. Pattern picks the pattern (Bayer 2×2, 4×4 or 8×8, halftone dots, horizontal, vertical or diagonal lines, or noise) and Density (0 to 100%) how much of it gets painted: 50% of Bayer 2×2 is a checkerboard, 100% paints every pixel. The pattern lines up with the sprite's top-left corner, not with your stroke, so strokes that overlap, mirrored strokes and other frames all stay on one pattern. With the brush preview on, the cursor shows the pixels a stroke would paint. Shift-click draws a straight line from where the last freehand stroke ended.

Options: brush size, shape and angle, pixel-perfect, ink, dynamics, Pattern and Density.

Erases to transparent with the current brush. Shift-click erases a straight line from the end of the last freehand stroke. The Right-click option chooses what the right button does: Paint BG paints the background color, and Replace FG turns only pixels of the foreground color into the background color.

With a pen that has an eraser end, turn the pen over: the editor switches to the Eraser while the eraser end is on or over the canvas, and back to your tool once you draw with the tip again or move the pen away. A stroke always finishes with the tool it started with.

Click, or drag to keep picking as you move. Transparent pixels are skipped. Composite picks the color you see, from all visible layers; Layer picks from the active layer only.

View tools

Each click zooms in a step, keeping the point under the pointer where it is (in tiled view too, on whichever copy you clicked); right-click zooms out.

Drag to move the view. Double-click zooms in 2x; Alt and double-click zooms out.

Moving and slicing

Drag inside to move the pixels; Shift keeps the move to one direction and Alt moves a copy. The handles transform them:

• drag a corner or edge handle to scale (Shift keeps the proportions);
• Ctrl and drag an edge handle to skew;
• Ctrl and drag a corner handle to distort it on its own (add Shift for perspective);
• drag just outside a corner to rotate (Shift snaps to 15° steps);
• drag the dot in the middle to move the point everything turns and scales around.

Press Enter or click outside to apply the change as one undo step, or Esc to cancel it. The options choose the rotation method (Fast Rotation, RotSprite or Bilinear) and place the pivot. Layers with locked movement can't be moved.

The Move tool also drags guides (unless View > Guides > Lock Guides is on): drag one to move it, or off the canvas to remove it. With View > Guides > Snap to Guides on, moving lands the content's nearer edge on a guide in reach, and scaling and the pivot snap to guides too.

Drag on an empty spot to make a slice; Shift makes it square. Click a slice to select it (Shift or Ctrl adds to the selection), then drag it, its handles, its 9-slice guides or its pivot. Double-click a slice to open its properties, or right-click it for its menu. Changes apply from the current frame on.

Fill tools

Contiguous fills the connected area you click; Global recolors every matching pixel on the layer. Tolerance (0 to 255) sets how close a color must be to count as matching (on an indexed sprite, how close a palette index must be, as with the magic wand). Right-click fills with the background color.

On a tilemap layer, Place tiles makes the bucket fill cells instead of pixels: Contiguous fills the connected cells holding the clicked cell's tile with the selected tile, Global every cell holding it (Tolerance and the other pixel options don't apply).

With a selection, a Contiguous fill stays inside it: unselected pixels act as walls, so the fill doesn't flow from one selected area into another, and clicking outside the selection fills nothing. A Global fill recolors the matching pixels inside the selection wherever you click.

8-connected (Contiguous only) also spreads to diagonal neighbors, so the fill leaks through 1 px diagonal lines; off, only up, down, left and right count as connected (Aseprite's default). Stop at grid, while the grid is shown, keeps the fill inside the grid cell you click. On an isometric grid that's the diamond the grid draws: it includes the line pixels along its two upper edges and stops at the lines along its lower edges, which belong to the diamonds below. A hexagonal grid works the same way: a hexagon includes the line pixels along its left side and its two upper edges.

Close gap (0 to 5, Contiguous only) lets you fill a sketchy outline that isn't quite closed: gaps up to that many pixels wide count as closed, so the fill stops at them instead of leaking out, and the gap itself is filled. Keep it low on small shapes, where a high setting can also stop the fill at narrow necks inside the shape.

Pattern fills with a repeating pattern of the foreground and background colors (Checker, Dither 25% and 75%, stripes, Diagonal, Grid, Dots, Bricks) instead of a solid color; right-click swaps the two. Patterns line up from the canvas's top-left corner, so fills next to each other match.

Drag from where the gradient starts to where it ends; right-drag runs it the other way. Like the paint bucket, it fills only the area you start in: the connected area of the color you press on (or, with Global, every pixel of that color), with the bucket's Tolerance, 8-connected, Stop at grid and Close gap, and inside the selection, so you can shade a shape without selecting it first. To fill the whole layer, use Global with Tolerance 255. With symmetry on, the mirrored areas get the same gradient. A fade to a transparent color keeps the other color and only fades it out. Options: Linear or Radial; Colors, either foreground to background (FG → BG) or through up to 32 Stops placed along the drag; Dither for a stepped pixel-art blend (Bayer 2×2, 4×4 or 8×8 checkers, halftone Dots, horizontal, vertical or diagonal lines, or an even Noise scatter); and Snap, where Palette paints only palette colors, so with Dither on the gradient steps between neighboring palette colors.

To make a multi-color gradient, set Colors to Stops. The Stops bar shows the ramp, with a handle under it for each stop; its left end is where you start dragging on the canvas.

• Add a stop: click the bar (it takes the foreground color), or drop a palette swatch on it. Shift+clicking a range of the palette loads the whole range, evenly spaced.
• Move a stop: drag its handle. Stops can't pass each other, but two can meet for a hard edge between their colors. With a handle selected, the arrow keys nudge it (Shift for bigger steps).
• Recolor a stop: drop a palette swatch on its handle, or select it and press FG.
• Remove a stop: drag its handle well off the bar and let go, or select it and press Del.
• Even spreads the stops out evenly; Clear removes them all.

Click or drag across a tilemap layer to place the selected tile in each cell you pass; Alt removes tiles instead. Flip and rotate the stamped tile with the Flip H, Flip V and Rot 90° options. Works on visible, unlocked tilemap layers. It mirrors with symmetry and stays inside a selection, as the other tools do when they Place tiles (see Tilemaps).

Shape tools

Pressing U repeatedly steps through the rectangle and ellipse, outlined and filled. Shift+U starts the same cycle from the ellipse. The triangle, hexagon and star have no key of their own: pick them from the Shape button's flyout, or give them one in Keyboard Shortcuts (pressing it again switches between outlined and filled).

Drag from corner to corner; Shift makes a square and Ctrl draws from the center, as does Alt if it is already down when you press. Press Alt part-way through the drag to rotate the rectangle about its center: move the cursor around the center to turn it (Shift snaps to 15° steps), and let go of Alt to keep the angle and carry on sizing. A turned rectangle is painted as a four-corner polygon, so its corners are not rounded. Options: Outline or Filled, and Radius to round the corners. With the link button on, one Radius sets all four corners; turn it off for a field per corner (top-left, top-right, bottom-right, bottom-left), so you can round just one side or make a tab or a speech bubble.

Drag the box the ellipse fits in; Shift makes a circle and Alt or Ctrl draws from the center. The pixels are Aseprite's, so an ellipse always touches all four sides of its box, and the circle brush is the same filled circle. Options: Outline or Filled.

Drag the box the triangle fits in: it points up, with its base along the bottom of the box. Shift makes the box square and Alt or Ctrl draws from the center. Options: Outline or Filled.

Drag the box the hexagon fits in: its flat sides run along the top and bottom of the box. Shift makes the box square and Alt or Ctrl draws from the center. Options: Outline or Filled.

Drag the box the five-pointed star fits in: it points up and its outer points touch every side of the box. Shift makes the box square and Alt or Ctrl draws from the center. Options: Outline or Filled.

1. Drag from the shape's back corner to its front corner to set its footprint. Shift keeps it square; hold Alt to freeze the footprint and move the pointer up or down to set the height. A click without dragging places a shape the size of the last one.
2. Adjust it: drag a handle to change that dimension (Shift scales all three together), drag the shape to move it, or nudge it with the arrow keys.
3. Press Enter or double-click to draw it. Clicking elsewhere also draws it; Esc throws it away.

Pressing K again switches the shape. Options:

• Shape: Box, Ramp, Stairs, Pyramid, Prism (a roof), Cylinder, Cone, Sphere or Dome. The round shapes (cylinder, cone, sphere, dome) have a circular footprint, so their two side handles both set the diameter. The cone rises to a point and the dome to a rounded top at the height you set. A sphere's height follows its width, so it has no height handle.
• Cap: the width of the flat tip at the top and bottom corners, 2 (pointed) to 4 (flat).
• Bevel (boxes): chamfers the top edges by that many pixels, so a slope runs between the top and the sides. 0 keeps the edges square.
• Style: fill and outline, fill only, or outline only. In outline style, Show back edges draws the hidden edges too.
• Rotate 90° turns ramps, stairs and prisms to slope the other way.
• Auto-shade from foreground: the top face uses the foreground color and the sides are shaded darker, following the Shades ramp when the color is on it. Turn it off to pick the outline, inner edge and face colors yourself.

The shape follows the sprite's isometric grid ratio (2:1 unless you change it).

Fills the shape you drag, outline included. The shape needs at least three points.

Each click places a corner, and the shape always closes back to the first one; pressing and dragging places two, where you pressed and where you let go (Aseprite's way). Double-click or press Enter to finish. Options: Outline or Filled.

Line tools

Hold Shift to snap to 16 angles (0°, 90°, 45° and 5:2 / 2:5 for 22.5° / 67.5°; an isometric grid adds its own slope), with even pixel steps, and Ctrl or Alt to draw from the middle: the point you pressed becomes the line's midpoint. Option: Width, 1 pixel by default; wider lines get round ends.

Draws a path through as many points as you like, like a pen tool:

• Click to place a corner point. Two corner points in a row are joined by a straight line.
• Press and drag to place a smooth point: the drag pulls out its handles, which bend the path on both sides. Hold Alt while dragging to move only the outgoing handle, for a sharp turn. Shift snaps a handle, or the next point, to the pixel-art angles.
• Click the first point to close the path (it turns green when the pointer is over it). Drag there to shape the closing curve.
• Enter or a double-click finishes the path open; Backspace removes the last point; Esc throws the path away.

Until you finish it, the path stays editable. Press on a point you've already placed to change it instead of adding a new one:

• Drag a point to move it; its handles come with it. Hold Ctrl to move the first point (a plain click there closes the path).
• Drag a handle to reshape the curve. The handle on the other side turns with it so the point stays smooth; hold Alt to move one handle on its own. Drop a handle on its point to remove it.
• Alt-click a point to make it a sharp corner, or Alt-drag it to pull out new handles.

Zoomed out, a press only grabs a point within two pixels of it, so you can still place points close together.

Options: Width (shared with the Line), Pixel perfect (on by default: removes the L-shaped corners a 1-pixel curve picks up), and Outline or Filled, which fills a closed path.

Adjusting tools

Each pixel is softened once per stroke. Strength (1 to 4) sets how far it looks for neighbors.

Each pixel the brush touches takes the color of a random nearby pixel. Strength (0 to 100%) is the chance that a pixel changes.

Drag to lighten (dodge) the pixels under the brush; right-drag to darken (burn) them. By default it changes perceptual (OKLCH) lightness only, so hue and saturation hold steady instead of washing out to gray, and transparent pixels are left alone. Each pixel changes once per stroke: stroke again to push it further. Strength (1 to 100, default 25) sets how far: 100 moves half way from black to white, 25 about one step of a typical ramp. Hue shift (0 to 60 degrees, default 0 = off) shades the way pixel artists do: lightening turns the hue toward warm yellow and softens the color, darkening toward cool blue and deepens it, never past those hues; gray pixels stay gray. With Show Brush Preview on, the cursor shows the result before you click (hold the right button to see the burn). On an indexed sprite the result snaps to the nearest palette color, so a low strength may not change anything.

Ruler and text

Drag between two points to measure them. The info bar shows the length in pixels, the angle (counter-clockwise from the right, so up is 90°) and the horizontal and vertical offsets, and a line with two handles marks the span. Nothing is painted and nothing goes on the undo stack. The measurement stays after you let go until you press again to start another, press Esc or switch tool; Shift snaps the end to the 16 pixel-art angles.

Click where the text should start and type. The text appears as you type, in the foreground color, inside a dashed box with a caret. Enter starts a new line, and the arrow keys, Home and End move the caret as in any text field. Click inside the box to move the caret there, or drag the box to move the text.

Press Ctrl+Enter, or click outside the box, to finish: the text lands as one undo step on a new text layer directly above the active layer, named after its first line. Switching to another tool lands it too. Esc drops it at any point before it lands.

Editing text. Click text on a text layer with the Text tool to open it again: its words come back in the box with the caret at the end, and its font, size, style, spacing, alignment and color come back into the options and the foreground color. Change any of them and finish to redraw it; delete all of it to clear the layer's cel. Text layers show in the timeline. Use the Move tool to move a text layer's cel: it stays editable.

A text layer is ordinary pixels to everything else: it exports, merges and blends like any layer, in .aseprite files too. Painting on it, or anything that changes its pixels (a transform, a color-mode change, resizing the sprite), turns it into plain pixels, which you then edit like any drawing; undoing back to the drawn text makes it editable again. Text keeps the name of its font, not the font itself, so text drawn in a font you loaded opens only in a browser where that font is loaded too.

Fonts. Six pixel fonts come with pxstud.io: Tom Thumb (a tiny 4x6), Spleen 5x8, 6x12 and 8x16, and Scientifica in regular and bold. Bitmap fonts are drawn exactly as designed, the same on every device, and Scale makes their pixels bigger by whole steps. Load font... adds a font file from your computer: a bitmap font (.bdf) or an outline font (.ttf, .otf, .woff, .woff2). Outline fonts are drawn at the Size you choose without anti-aliasing, so every pixel is solid. Each line is shaped as a whole, so kerning, ligatures and scripts that join letters (Arabic, for example) come out as the font intends; the exact pixels can differ slightly between browsers. Pixel fonts sold as TTF look right at their design size or a whole multiple of it. A loaded font stays in this browser only: it doesn't sync, and the trash button next to the font list removes it.

Bold and Italic use a loaded font's own bold and italic (or ones the browser makes from it). A bitmap font gets them from its own pixels: bold doubles every pixel to its right, and italic shifts rows right a pixel at a time going up, leaving the baseline where it is. The bundled fonts' authors and licenses are listed on the editor's Open-source licenses page.

Options: font, scale or size, letter spacing, line spacing and alignment.