Version History

Save named snapshots of your design at any point and restore them later. Version history complements undo/redo by providing persistent save points that survive page switches and session reloads.

VersionManager API

Access the VersionManager through engine.getVersionManager().

// Get the VersionManager instance
const vm = engine.getVersionManager();

// Create a named snapshot of the current state
vm.createSnapshot('Before logo change');

// List all snapshots
const snapshots = vm.getSnapshots();
// Returns: Array<{ id: string, name: string, timestamp: number, thumbnail: string }>

// Restore a snapshot (replaces current canvas)
await vm.restoreSnapshot(snapshotId);

// Delete a snapshot
vm.removeSnapshot(snapshotId);

VersionManager Methods

Name	Type	Default	Description
`createSnapshot(name)`	`string`	—	Save a named snapshot; returns the snapshot ID
`restoreSnapshot(id)`	`Promise<void>`	—	Restore the canvas to the given snapshot state
`previewSnapshot(id)`	`void`	—	Temporarily load a snapshot for preview
`applyPreview()`	`Promise<void>`	—	Commit the currently previewed snapshot
`cancelPreview()`	`Promise<void>`	—	Exit preview mode and return to previous state
`removeSnapshot(id)`	`void`	—	Delete a snapshot
`renameSnapshot(id, name)`	`void`	—	Rename an existing snapshot
`getSnapshots()`	`Snapshot[]`	—	Get all snapshots sorted by timestamp (newest first)

Preview Mode

Preview mode lets you temporarily view a snapshot without losing your current work. This is useful for comparing different versions before deciding which one to keep.

// Preview mode: temporarily load a snapshot
// The canvas shows the snapshot state without committing to it

// Enter preview mode
vm.previewSnapshot(snapshotId);

// If the user wants to keep this version:
await vm.applyPreview();

// If the user wants to go back to their current work:
await vm.cancelPreview();

⚠️

Preview restrictions

While in preview mode, editing the canvas is disabled. You must either apply or cancel the preview before making further changes.

Snapshot Limit

A maximum of 30 snapshots can be stored at any time. When the limit is reached, you must delete an existing snapshot before creating a new one.

💡

Storage

Snapshots are stored in memory and included when exporting to JSON. Large designs with many snapshots will produce larger JSON files. Remove unnecessary snapshots before saving to reduce file size.

Snapshot Data

// Snapshot object structure
interface Snapshot {
  id: string;           // Unique identifier (UUID)
  name: string;         // User-provided label
  timestamp: number;    // Unix timestamp (ms)
  thumbnail: string;    // Base64 data URL
  data: string;         // Serialized canvas JSON (internal)
}

// Rename a snapshot
vm.renameSnapshot(snapshotId, 'Final version');

// Get snapshot count
const count = vm.getSnapshots().length;

Complete Example

// Version history workflow
async function designWithVersions(engine) {
  const vm = engine.getVersionManager();

  // Save initial state
  vm.createSnapshot('Initial layout');

  // Make changes...
  engine.addShape('rect', {
    left: 100, top: 100,
    width: 300, height: 200,
    fill: '#4f46e5',
  });
  engine.addText('New Section', {
    left: 150, top: 150,
    fontSize: 24, fill: '#ffffff',
  });

  // Save progress
  vm.createSnapshot('Added hero section');

  // Try a different approach...
  engine.updateObject(rectId, { fill: '#ef4444' });
  vm.createSnapshot('Red variant');

  // Compare versions
  const snapshots = vm.getSnapshots();
  // Preview the original approach
  vm.previewSnapshot(snapshots[1].id);

  // Decide to keep it
  await vm.applyPreview();
}

UI: History Panel

The History Panel is accessible from the right sidebar via a Properties/History tab switcher. It provides:

Snapshot list — each entry shows the name, timestamp, and thumbnail preview
Save button — create a new snapshot with a custom name
Preview on hover — hover over a snapshot to see a larger thumbnail
Restore button — click to enter preview mode, then apply or cancel
Delete button — remove a snapshot (with confirmation)
Rename — double-click the snapshot name to rename it

ℹ️

Auto-save

The editor does not auto-create snapshots. Users must explicitly save versions. However, undo/redo (Ctrl+Z / Ctrl+Shift+Z) works independently for granular changes.