Getting started

A 10-minute walkthrough that takes you from a blank editor to a single-frame sprite, then to a small animation. By the end you'll know where the panels are, how to draw, how to add layers and frames, and how to export.

Heads up: the editor is fully client-side. Everything you do is autosaved to your browser's IndexedDB after ~1.5 s of inactivity. To share or back up, export to .mstack (full project) or PNG / GIF / sheet (rendered output).

1. Open the editor

Run npm run dev in the project root and open the printed URL (usually http://localhost:5173). The first time you open it, the editor creates a default 32×32 project.

Empty editor on first launch

The layout has four areas:

Top bar — project name, zoom, mode (RGB/IDX), preview window toggle, export
Left panel — Tools, Brush, Symmetry, Onion Skin, Reference (everything you draw with)
Centre — the canvas
Right panel — three tabs: Layers, Sprites, Anims + the Palette below
Bottom — Frames timeline (with the optional docked Preview panel on the right)

2. Create a new project

File menu → New project opens the New Project dialog. Pick:

Canvas size — try 32 × 32 for icons, 64 × 64 for character sprites, 128 × 32 for a sprite sheet row.
Palette — pick a built-in preset (DB16, PICO-8, Sweetie 16, …). You can change it later.

Click Create. The editor switches to the new project. The previous project stays in IndexedDB — you can switch via File → Open project.

3. Pick a colour and draw

The Palette is in the right panel below the layer list:

Click a swatch → it becomes the primary colour (used by pencil/fill/etc.)
Right-click a swatch → secondary colour (used by gradient and the eraser-into-secondary trick)
Double-click a swatch → opens the Colour Picker (HEX/RGB/HSL + visual picker)

Press B to make sure the Pencil is active, then click and drag on the canvas to paint. Press E for the Eraser, or right-click with the Pencil active to erase temporarily with the same brush.

Tip: Press + and - to zoom, hold Space and drag to pan.

Pencil, palette, and zoomed canvas

4. Brush size and shape

In the Brush section of the Tools panel:

Size slider — 1 to 16 px
Shape — square (default), circle, diamond, cross, horizontal line, vertical line. Disabled at size 1 because it's irrelevant.

Move the cursor over the canvas to see a live preview of the stamp footprint at the current size + shape.

5. Add a layer

Right panel → Layers tab → click +. The new layer appears on top and becomes active.

Each layer has visibility (eye), lock, and a chain icon for linking across frames. Drag the grip on the left to reorder. Double-click the name to rename. Use opacity / blend-mode controls below the list when a layer is selected.

For deeper organisation, group layers with the folder+ button — see Layer groups.

Layer panel with two layers

6. Add a second frame

Bottom timeline → click +. A blank frame appears next to the current one and becomes active. Each frame has its own independent layers.

Click on a frame thumbnail to switch. Double-click the name to rename. The small 100ms text under each thumbnail is the frame duration — click to edit (used as the default when this frame plays).

7. Use onion skin

In the Tools panel, click Onion Skin → ON. By default you'll see 1 frame before and 1 frame after the active one as faded ghosts. Use the sliders to widen the range, and try a Before tint / After tint colour to colour-code direction (e.g. red = past, blue = future).

Two frames with onion skin

8. Preview the animation

Press P (or click the preview-window icon in the top bar). The Preview window opens docked to the right of the Frames timeline by default. It plays through your frames at their durations. You can:

Zoom in/out with the buttons in the header
Pause / play
Detach (Pin off) to make it floating

Frames play through the current sprite/animation if one is active; otherwise the preview just shows the active frame.

9. Save and export

Autosave runs every ~1.5 s in the background, so you usually don't need to think about it. If you want to force a save right now, press Ctrl+S — it writes to browser storage immediately and suppresses the browser's native "Save Page As" dialog so you can use the shortcut freely. The status bar updates with a "Saved Xs ago" indicator.

To take your work elsewhere:

File → Export project (.mstack) — full editable project, can be re-opened
File → Export → PNG — single image of the active frame
File → Export → Sprite sheet — grid of frames + JSON metadata
File → Export → GIF — animated GIF of any animation
File → Export → JSON — raw manifest for tooling

See Export formats for the full options on each.

Getting started ​

1. Open the editor ​

2. Create a new project ​

3. Pick a colour and draw ​

4. Brush size and shape ​

5. Add a layer ​

6. Add a second frame ​

7. Use onion skin ​

8. Preview the animation ​

9. Save and export ​

What to read next ​