How to Use Layers and History in a Browser Photo Editor

Layers and history are the two features that separate a real editor from a filter app. Once you understand them, you'll never flatten an image by accident again.

What is a layer?

Think of a layer as a transparent sheet stacked on top of your image. Text, shapes, and drawings each live on their own sheet, so you can move, hide, or delete them without touching the pixels underneath.

The Layers panel

• Reorder — drag layers up or down to change stacking order.
• Visibility — click the eye icon to toggle without deleting.
• Lock — freeze a layer so accidental drags don't move it.
• Delete — remove any layer; use Ctrl+Z if you change your mind.

The history stack

Every meaningful action — apply an adjustment, add text, commit a crop — pushes a new snapshot onto the history stack. The scrubber at the top of the editor shows one pill per snapshot: emerald for now, grey for the past, dim for the redo future.

Jump to any state

Click a pill and the canvas rewinds to that exact state. It's the fastest way to compare two versions of an edit without duplicating layers.

Pending previews

Adjustments and filters live-preview before they commit. The Apply bar at the bottom shows whether you have unapplied changes. Hit Enter to bake it in, Escape to throw it away — nothing bloats your history.

Practical workflow

1. Drop your photo. It lands as the base image layer.
2. Add a text layer for a headline.
3. Add a shape layer behind the text for readability.
4. Open Adjust, pull down brightness a touch, hit Enter to apply.
5. Export as WebP for the web or PNG for print.