Editor Overview

Overview

The spritesynth editor is a full-featured pixel art creation tool built on PixiJS v8. It provides everything you need to create, edit, and export pixel art directly in your browser.

The spritesynth editor — toolbar on the left, canvas in the center, layers and color picker on the right.

Accessing the Editor

Navigate to /editor from the dashboard or click Open Editor on any project page.

The editor works on both desktop and mobile devices, with a responsive layout that adapts to your screen size.

Canvas

The editor canvas renders your pixel art at native resolution with smooth zoom and pan controls.

Zoom & Pan

• Mouse wheel to zoom in/out
• Space + drag to pan the canvas
• Keyboard shortcuts + / - to zoom
• Canvas dimensions are displayed in the status bar

Zoom and pan in action — scroll to zoom, hold Space to drag.

Grid Overlay

A pixel grid overlays the canvas to help with precise alignment. The grid automatically adjusts visibility based on zoom level and can be toggled on/off.

The pixel grid becomes visible at higher zoom levels for precise editing.

Layer System

Organize your artwork with a layer-based workflow:

• Add, delete, and rename layers
• Toggle visibility per layer
• Lock layers to prevent accidental edits
• Adjust opacity (0–100%)
• Blend modes: normal, multiply, screen, overlay
• Reorder layers by dragging
• Merge down or flatten all layers

Layer panel — reorder, toggle visibility, adjust opacity, change blend modes.

See Layers for details.

Animation Timeline

Create frame-by-frame animations with a visual timeline:

• Add, delete, and duplicate frames
• Play, pause, and stop preview
• Set FPS and per-frame duration
• Onion skinning for ghost frames
• Export as sprite sheet or GIF

The animation timeline — frame thumbnails, playback controls, and per-frame duration settings.

Watch: Walk cycle animation with onion skinning — ghost frames show previous/next positions.

See Animation for details.

Color Picker

A full HSV color picker with:

• 2D saturation/value picker
• HSV sliders for fine control
• Hex input for exact colors
• Primary and secondary color swatches
• Recently used colors
• Built-in palettes (NES, Gameboy, SNES, Pico-8, and more)
• Custom palette creation and import/export

The color picker — HSV picker, hex input, and built-in retro palettes.

Tool Palette

Seven drawing tools for every pixel art need:

• Pencil — single pixel precision
• Brush — variable size (1–8px)
• Eraser — remove pixels
• Line — straight lines
• Fill — flood fill
• Selection — rectangular area selection
• Eyedropper — sample colors from canvas

Drawing tools — pencil, brush, eraser, line, fill, selection, and eyedropper.

See Drawing Tools for shortcuts and usage.

Export

Export your work in multiple formats:

• PNG (single frame)
• Sprite sheet (horizontal or grid)
• GIF (animation)
• JSON (project data)
• Game engine formats (Unity, Godot, Tiled, Aseprite)
• Copy to clipboard

Export options — choose format, scale, and game engine target.

See Export for all options.

Status Bar

The bottom status bar shows:

• Current canvas dimensions
• Cursor pixel coordinates
• Active tool
• Zoom level