Skip to main content

​
Overview

The Preview Window provides a dedicated space for viewing your animations in real-time. Unlike the main canvas, the preview window shows your sprite at its native size without zoom or grid overlays, giving you an accurate representation of how the animation will appear in your game or project.
The Preview Window updates automatically as you edit, allowing you to see changes instantly without manually refreshing.

​
Opening the preview window

Access the preview window in multiple ways:
Keep the Preview Window open on a second monitor while working for continuous feedback on your animations.

​
Preview window features

The preview window includes several tools for animation review:

Auto-play

Automatically plays animations when enabled

Playback controls

Play, pause, and navigate through frames

Native resolution

Shows sprite at 1:1 pixel ratio by default

Zoom options

Scale preview up or down as needed

Center view

Automatically centers sprite in window

Background options

Choose checkerboard, solid color, or custom backgrounds

​
Playback controls

Control animation playback with the preview window controls:

​
Basic controls

Click the Play button or press Enter to start/stop animation playback. The preview plays at the frame durations defined in your timeline.
Stop playback and return to the first frame of the current animation tag (or frame 1 if no tag is active).
Step backward one frame. Useful for frame-by-frame analysis.
Step forward one frame. Examine each frame individually.
Jump to the first frame of the animation or current tag.
Jump to the last frame of the animation or current tag.

​
Playback speed

Adjust animation speed for testing:
  • Normal speed: Plays at the frame durations set in your timeline
  • Speed multiplier: Adjust with the speed slider (0.25x to 4x)
  • Custom speed: Right-click the speed indicator to enter a precise value
Speed adjustments in the Preview Window don’t affect frame durations in your actual sprite—they only change preview playback.

​
Preview settings

Customize the preview window appearance:

​
Zoom levels

Control preview magnification:
Automatically scales sprite to fit the preview window. Best for large sprites.

​
Background options

Choose how transparency is displayed:
Default transparency indicator. Clearly shows transparent areas with a gray/white checkered pattern.
Display transparent areas as a solid color. Useful for previewing against your game’s background.
Load a background image to preview your sprite in context (game scene, UI mockup, etc.).
To change background:
  1. Right-click in the Preview Window
  2. Select Background Color or Load Background
  3. Choose your preferred background
Preview your sprite against your actual game background to ensure proper contrast and visibility.

​
Automatic preview updates

The preview window updates in real-time as you work:

​
What triggers updates

  • Drawing: Every brush stroke updates the preview
  • Frame changes: Switching frames reflects immediately
  • Layer changes: Show/hide layers updates the preview
  • Palette edits: Color changes (especially in Indexed mode)
  • Transformations: Move, scale, rotate operations

​
Update behavior

Continuous playback

Animation continues playing while you edit

Frame sync

Preview follows the main editor’s active frame

Live editing

See changes instantly without manual refresh

Performance

Minimal performance impact on most systems
On very large sprites or complex animations, continuous preview updates may impact performance. Close the preview window if you experience slowdowns.

​
Working with animation tags

Preview specific animation sequences:

​
Tag-based playback

When animation tags are defined:
  1. Select a frame within an animation tag
  2. The preview window automatically plays only that tag’s frame range
  3. Playback loops according to the tag’s loop settings (Forward, Reverse, Ping-pong)
1

Create animation tag

Define a tag in the timeline for your animation sequence (walk, idle, attack, etc.).
2

Select tagged frame

Click any frame within the tag in the timeline.
3

Preview plays tag

Preview window now loops only the tagged frames.

​
Tag-specific settings

Tags can loop Forward, Reverse, Ping-pong, or Ping-pong Reverse. Preview window respects these settings.
Color-coded tags help identify which sequence is currently playing.
Click frames in different tags to quickly switch between animation sequences.
Use tags to organize animation states (idle, walk, run, jump) and preview each independently.

​
Multiple preview windows

Open multiple preview windows to compare animations:

​
Creating multiple previews

1

Open first preview

Open the preview window normally (Ctrl+Shift+P).
2

Open additional previews

View → Preview again to open a second preview window.
3

Configure each preview

Set different zoom levels, backgrounds, or frame ranges in each window.

​
Use cases for multiple previews

  • Compare animation states: View walk and run cycles side by side
  • Different zoom levels: Native resolution in one window, zoomed in another
  • Various backgrounds: Test against different background colors simultaneously
  • Before/after comparisons: Keep a reference preview while editing
Multiple preview windows may impact performance, especially with large sprites or complex animations.

​
Preview window positioning

Arrange the preview window for optimal workflow:

​
Window management

Drag the preview window anywhere on your screen or to a second monitor. Ideal for multi-monitor setups.
If you have two monitors, put the Preview Window on your second monitor for a dedicated animation view.

​
Performance considerations

Optimize preview window performance:

​
Performance tips

Disable thumbnails

Turn off cel thumbnails in timeline settings

Reduce zoom

Lower zoom levels require less rendering

Pause when idle

Stop playback when not actively reviewing

Close when unused

Close preview window during intensive editing

​
When to close the preview

  • Complex sprites: Many layers and large canvas sizes
  • High frame counts: Animations with 50+ frames
  • Slow systems: Older computers or limited hardware
  • Intensive editing: Batch operations or transform tools
If Aseprite becomes sluggish, close the Preview Window first to improve responsiveness.

​
Preview shortcuts

Speed up preview window usage:
ActionWindows/LinuxmacOS
Open/close previewCtrl+Shift+PCmd+Shift+P
Play/pauseEnterEnter
Previous frame, (comma), (comma)
Next frame. (period). (period)
First frameHomeHome
Last frameEndEnd
Zoom in++
Zoom out--
Fit to window00
Center viewCC
Shortcuts only work when the Preview Window is focused. Click the preview window first to activate it.

​
Context menu options

Right-click in the preview window for additional options:
Automatically centers the sprite in the preview window.
Choose a solid color to display behind transparent areas.
Import an image to use as the preview background.
Return to the default checkerboard pattern.
Scales sprite to fit the current window size.
Resets to native 1:1 pixel ratio.

​
Advanced features

​
Tiled preview mode

For repeating patterns and tileable sprites:
  1. Enable View → Tiled Mode in the main editor
  2. Preview window shows the sprite tiled in a grid
  3. Verify seamless edges and pattern continuity
  4. Adjust sprite to eliminate visible seams
Tiled preview mode is essential for creating seamless backgrounds and textures for games.

​
Onion skin in preview

Some Aseprite versions support onion skinning in the preview:
  • Enable onion skinning in the main timeline
  • Preview window may show previous/next frames as semi-transparent overlays
  • Helps evaluate animation flow and smoothness
Onion skin preview support varies by Aseprite version. Check your version’s documentation for availability.

​
Best practices

Keep it open

Leave preview open while animating for constant feedback

Test backgrounds

Preview against your actual game background

Check native size

Always review at 100% zoom before exporting

Review tags separately

Test each animation state individually

Use second monitor

Dedicate a monitor to preview for maximum workspace

Verify frame timing

Play at normal speed to ensure proper pacing

​
Comparison with timeline playback

​
Preview Window vs. Timeline

FeaturePreview WindowTimeline
Dedicated spaceFull window for previewSmall preview area
Zoom controlIndependent zoomFollows editor zoom
Background optionsCustom backgroundsEditor background only
Distraction-freeNo grid or guidesShows grid/guides
Multiple instancesCan open multipleSingle instance
PerformanceHigher overheadLower overhead
Use the Preview Window for detailed animation review, and the timeline’s playback controls for quick checks during editing.

​
Scripting with preview

Control preview window with Lua scripts: 
-- Open the preview window
app.command.Preview()

-- Play animation
app.command.PlayAnimation()

-- Stop animation
app.command.PlayAnimation({ play = false })

-- Go to specific frame
local sprite = app.activeSprite
app.activeFrame = sprite.frames[5]

-- Adjust playback speed (not directly exposed)
-- Workaround: Adjust frame durations temporarily
for i, frame in ipairs(sprite.frames) do
  frame.duration = frame.duration * 2  -- Slow down 2x
end
Learn more in the Scripting API documentation.

​
Troubleshooting

Solution: Check if it’s already open but minimized or on another monitor. Close and reopen with Ctrl+Shift+P.
Solution: Close the preview window, reduce canvas size, or lower frame count. Complex sprites require more rendering power.
Solution: Ensure color profile settings match between editor and preview. Check Sprite → Properties → Color Profile.
Solution: Verify animation tag settings. Right-click the tag in timeline and check loop direction.
Solution: May be off-screen on a disconnected monitor. Reset window positions: Edit → Preferences → Reset Window Positions.

​
Related topics

Timeline

Frame-by-frame animation controls

Animation Concepts

Learn animation fundamentals

Export GIF

Export animated GIFs