Skip to main content

Undo/Redo History Timeline

HyperTheme includes a visual undo/redo history system that shows your editing timeline. This isn't just "undo"—it's a complete visual history of everything you've done in your project!

What is the History Timeline?​

Visual undo/redo with a timeline interface:

Instead of blind undo/redo, you get:

  • Visual timeline of all actions
  • Action descriptions for each step
  • Click to jump to any point in history
  • Branching support when you undo then make new changes
  • Unlimited history (within memory limits)

Think of it like: Git for your theme design. Every change is tracked, visible, and reversible.

Where to Find It​

Location:

  • History tab in the right panel
  • Next to Properties and Layers tabs
  • Always available during editing

Or use keyboard shortcuts:

  • Ctrl+Z - Step backward in history
  • Ctrl+Y - Step forward in history

The History Timeline Interface​

Visual Elements​

Each history entry shows:

  • Action icon - Visual indicator of action type
  • Action description - What was changed
  • Timestamp - When it happened (relative time)
  • Current position indicator - Blue highlight shows where you are

Example timeline:

┌─────────────────────────────────┐
│ History Timeline                │
├─────────────────────────────────┤
│ 🎯 Theme Created                │
│    2 minutes ago                │
├─────────────────────────────────┤
│ ➕ Added Image Layer            │
│    1 minute ago                 │
├─────────────────────────────────┤
│ 📏 Moved Layer                  │ ← Current position
│    30 seconds ago               │
├─────────────────────────────────┤
│ 🎨 Changed Color                │
│    10 seconds ago               │
├─────────────────────────────────┤
│ ✨ Added Animation              │
│    Just now                     │
└─────────────────────────────────┘

Action Types Tracked​

Layer Operations:

  • ➕ Layer added
  • ❌ Layer deleted
  • 📝 Layer renamed
  • 📂 Layer grouped
  • 🔓 Layer ungrouped
  • 👁️ Visibility changed
  • 🔒 Lock state changed

Transformations:

  • 📏 Position changed
  • 📐 Scale changed
  • 🔄 Rotation changed
  • ⚓ Anchor point changed
  • 💫 Opacity changed

Animations:

  • ✨ Animation added
  • ❌ Animation removed
  • ⏱️ Animation timing changed
  • 🎭 Animation properties changed

Assets:

  • 🖼️ Asset uploaded
  • 🗑️ Asset deleted
  • 🔄 Asset replaced

Properties:

  • 🎨 Color changed
  • 🔤 Text changed
  • 📊 Property modified
  • 🎛️ Filter added/changed

Project Operations:

  • 💾 Project saved
  • 📋 Layer copied
  • 📄 Layer pasted
  • 📥 PSD imported

Using the History Timeline​

Basic Navigation​

Click any entry:

  • Instantly jump to that point in history
  • Canvas updates to show that state
  • All layers, animations, properties revert

Keyboard navigation:

  • Ctrl+Z - One step back
  • Ctrl+Y - One step forward
  • Can do multiple in a row

Example workflow:

1. You make 10 changes
2. Don't like change #7
3. Click on entry #6 in timeline
4. Boom! Back to that exact moment
5. Continue from there

Visual Feedback​

Current position:

  • Blue highlight on current entry
  • Everything below = future (if you've undone)
  • Everything above = past

Gray vs colored entries:

  • Colored - Active history path
  • Gray - Branched history (explained below)

Branching History​

What happens when you undo then make new changes?

Standard undo systems:

  • Undo 5 steps
  • Make new change
  • Original 5 steps = GONE FOREVER 😢

HyperTheme's system:

  • Undo 5 steps
  • Make new change
  • Original 5 steps = Still in timeline! 🎉
  • Just grayed out (inactive branch)

Visual representation:

Main Branch:
├─ Added layer
├─ Moved layer
├─ Added animation ← You undo to here
├─ [Changed color] ← Grayed (branched)
└─ [Added text]    ← Grayed (branched)

New Branch (after making change):
├─ Added layer
├─ Moved layer
├─ Added animation
└─ ✨ Added filter ← New action!

You can still click grayed entries:

  • Jumps to that branch
  • That branch becomes active
  • Previous branch becomes grayed
  • Nothing is lost!

Practical Examples​

The "Oops, Go Back" Workflow​

Scenario: You made 20 changes. Somewhere around change 15 things went wrong.

Traditional approach:

  • Hit Ctrl+Z twenty times
  • Count carefully
  • Hope you stop at the right place

HyperTheme approach:

  1. Open History tab
  2. Scan timeline visually
  3. Find the "Added weird filter" entry
  4. Click on entry right before it
  5. Done! Exactly where you need to be

Time saved: Seconds vs minutes

The "What Did I Do?" Workflow​

Scenario: You've been working for an hour. Lost track of changes.

The workflow:

  1. Open History tab
  2. Scroll through timeline
  3. See every single action
  4. Refresh your memory
  5. Continue confidently

Bonus: Great for tracking down when specific change was made!

The "Try and Compare" Workflow​

Scenario: Not sure if change improved the design.

The workflow:

  1. Make change (e.g., add blur filter)
  2. Look at result
  3. Click previous entry in timeline
  4. Look at before version
  5. Click blur entry again
  6. Compare side by side
  7. Keep or undo based on comparison

A/B testing built into your workflow!

The "Experiment Safely" Workflow​

Scenario: Want to try radical changes but afraid of ruining work.

The workflow:

  1. Note current position in timeline
  2. Go wild with experiments
  3. Try 10 different approaches
  4. Don't like any of them
  5. Click original position in timeline
  6. Back to safe state!

Freedom to experiment without fear!

The "Find That One Change" Workflow​

Scenario: The theme looked perfect an hour ago. What changed?

The workflow:

  1. Scroll up timeline to ~1 hour ago entries
  2. Click various entries
  3. Canvas updates to show that state
  4. Find the exact change that broke things
  5. Note what it was
  6. Return to recent state
  7. Undo just that specific type of change

Debugging made visual!

Advanced Features​

Timeline Timestamps​

Relative time updates:

  • "Just now" - Less than 10 seconds ago
  • "30 seconds ago" - Less than a minute
  • "5 minutes ago" - Less than an hour
  • "2 hours ago" - Less than a day
  • "Yesterday" - 1 day ago
  • "3 days ago" - Older entries

Helps you remember:

  • "I made that change right after lunch" → Check entries from 1-2 hours ago
  • "That was from yesterday's session" → Check "yesterday" entries

Action Grouping​

Some actions are automatically grouped:

Example: Moving a layer

  • Drag layer across canvas
  • Multiple position updates happen
  • Timeline shows: "Moved Layer" (single entry)
  • Not: "Position X changed" 50 times

Keeps timeline clean and usable!

Grouped actions:

  • Continuous dragging
  • Multiple property changes in quick succession
  • Related animation adjustments

History Limits​

Practical limits:

  • Unlimited history entries (in theory)
  • Limited by browser memory (in practice)
  • Typically: Hundreds to thousands of actions
  • Older entries may be pruned automatically if memory low

What this means:

  • You'll never hit the limit in normal use
  • Hours of work = fully tracked
  • Even complex projects = complete history

History and Save​

Important: History is NOT saved in project file!

How it works:

  • History = Session-specific
  • Close project = History cleared
  • Reopen project = Fresh history
  • Save only saves current state, not history timeline

Why this matters:

  • Can't undo changes from previous sessions
  • Save often to capture good states!
  • History is for current editing session

Best practice:

  • Make significant change
  • Save project
  • Continue editing
  • If you mess up, worst case is back to last save

Workflow Strategies​

The "Checkpoint" Strategy​

Use saves as checkpoints:

1. Work for 10-15 minutes
2. Reach a good state
3. Ctrl+S to save
4. Continue experimenting
5. Can always close and reopen to get back to checkpoint

Combines history (short-term undo) with saves (long-term checkpoints).

The "Explore All Paths" Strategy​

When you have multiple ideas:

1. Try approach A
2. Undo back to starting point
3. Try approach B
4. Undo back to starting point
5. Try approach C
6. Use history to quickly compare all three
7. Pick the winner
8. Save that one

Branching history makes this easy!

The "Progress Review" Strategy​

Before finishing:

1. Open History tab
2. Scroll to top (beginning)
3. Click through timeline chronologically
4. Watch your theme evolve
5. Appreciate your progress!
6. Make final adjustments
7. Save and publish

Motivating AND useful for catching issues!

The "Collaboration Reference" Strategy​

When working with feedback:

1. Collaborator: "I liked version from 30 minutes ago better"
2. You: Check timeline at ~30 min mark
3. Click around those entries
4. Find the version they meant
5. Note what was different
6. Return to current
7. Apply those specific elements

Visual timeline makes communication easier!

Common Scenarios​

"I can't undo anymore!"​

Possible causes:

  • You're at the beginning of history
  • Look at timeline—are you at the top?

Solution:

  • You can't undo the initial project creation
  • That's the earliest point
  • Use Ctrl+Y to redo forward if you went too far back

"Where did my history go?"​

Likely cause:

  • Closed and reopened project
  • History is session-specific

Solution:

  • History clears on project close
  • This is normal behavior
  • Use saves for long-term state preservation

"Timeline is too long to scroll!"​

Happens on:

  • Complex projects
  • Long editing sessions
  • Lots of small changes

Solutions:

  1. Use Ctrl+Z/Ctrl+Y for recent changes (faster)
  2. Scroll quickly with scrollwheel
  3. Use timeline mainly for jumping back significantly
  4. Save and reopen project to start fresh history

"Grayed entries confuse me"​

What they are:

  • Branched history paths
  • From when you undid then made new changes

Solution:

  • Ignore them if confusing
  • They're there if you need them
  • Focus on colored (active) entries
  • Grayed = alternative timeline you didn't take

"Can I clear history?"​

Currently:

  • No manual clear button
  • History persists for session

Workarounds:

  • Save project
  • Close and reopen
  • Fresh history timeline
  • Doesn't affect actual project

Best Practices​

For Efficient Editing​

Do:

  • Check history when confused about changes
  • Use timeline for big jumps backward
  • Use Ctrl+Z/Y for immediate undo/redo
  • Click through timeline when comparing states

Don't:

  • Obsessively watch history pile up
  • Worry about timeline length
  • Fear branching (it's helpful!)
  • Forget to save periodically

For Experimentation​

Do:

  • Note your starting point before wild experiments
  • Use history to quickly test multiple approaches
  • Click through different attempts to compare
  • Embrace the freedom to try things

Don't:

  • Fear breaking your theme (history has your back!)
  • Limit yourself to cautious changes
  • Forget you can always go back

For Debugging​

Do:

  • Use timeline to isolate when problem started
  • Click through entries to find exact change
  • Note patterns in what actions caused issues
  • Learn from history

Don't:

  • Blame mysterious bugs (check history!)
  • Assume you remember what changed
  • Give up on finding issue cause

For Learning​

Do:

  • Review your history to see progress
  • Notice which actions you use most
  • Learn patterns in your workflow
  • Appreciate how far you've come

Don't:

  • Judge your process
  • Compare to others
  • Rush through without reflection

Technical Details​

What's Actually Tracked​

Full state capture:

  • All layer properties
  • All animation data
  • Layer hierarchy
  • Asset references
  • Visibility and lock states
  • Group structures
  • Aspect ratio settings

Not tracked:

  • Asset file contents (references only)
  • Canvas zoom/pan position
  • UI panel states
  • Selection state

Performance​

Efficient storage:

  • Only differences stored (delta encoding)
  • Not full project snapshots for each action
  • Minimal memory impact
  • Fast navigation between entries

What this means:

  • Thousands of history entries = Still fast
  • No noticeable slowdown
  • Instant jumping in timeline

Browser Memory​

History stored in:

  • Browser RAM
  • Not persisted to disk
  • Cleared on tab close

Limits:

  • Depends on available browser memory
  • Typically: 100MB+ available for history
  • Hundreds to thousands of actions
  • Automatic pruning if memory constrained

Visual Undo/Redo Philosophy​

Traditional undo:

  • Blind jumps backward/forward
  • Count steps carefully
  • No preview
  • Hope you stop at right point

HyperTheme's visual history:

  • See all changes
  • Click exact point
  • Preview each state
  • Complete confidence

The difference:

  • Traditional = "I hope this is right"
  • Visual = "I know exactly where I am"

Power User Tips​

The "Quick Peek" Technique​

See earlier version instantly:

  1. Hold finger over entry in timeline
  2. Click it
  3. Look at canvas
  4. Click current entry again
  5. Back to where you were

Two clicks = Compare any two points in time!

The "History Scrubbing" Technique​

Animate your progress:

  1. Click an early timeline entry
  2. Quickly click next entry
  3. Keep clicking down timeline
  4. Watch theme evolve like a timelapse!

Satisfying AND useful for finding exact change!

The "Branch Comparison" Technique​

Compare different approaches:

  1. Make change A
  2. Undo, make change B
  3. Now have two branches
  4. Click between them rapidly
  5. See which works better
  6. Continue with winner

A/B testing made visual!

The "Save Point" Technique​

Use saves strategically:

  1. Reach milestone
  2. Ctrl+S to save
  3. Note that point in timeline
  4. Experiment freely
  5. If disaster strikes, close without saving
  6. Reopen = Back to saved state

Combines history with save system!

Accessibility​

Keyboard-Only Navigation​

Full keyboard support:

  • Ctrl+Z - Undo (step backward)
  • Ctrl+Y - Redo (step forward)
  • Tab - Navigate through history entries
  • Enter - Jump to selected entry
  • Arrow keys - Scroll timeline

No mouse required!

Visual Clarity​

Clear visual indicators:

  • Current position = Blue highlight
  • Active entries = Full color
  • Inactive branches = Gray
  • Action icons = Visual reinforcement
  • Timestamps = Context

Easy to understand at a glance!

Next Steps​

Pro Tip: The visual history timeline is your time machine. Don't be afraid to explore it! Click around, jump to different points, experiment with states. You literally cannot break anything—everything is reversible! 🕐✨