undo-anything.js — Universal Ctrl+Z for the web

🧬

DOM mutations

Any element added or removed is automatically tracked and restorable

✏️

Input changes

Text field modifications are saved on blur and fully reversible

⚡

Custom actions

Push any action with your own undo/redo logic via Undo.push()

⚡ Quick start

import Undo from 'undo-anything' // Watch any container Undo.watch('#my-list') // Custom action Undo.push({ label: 'My action', undo: () => revert(), redo: () => apply(), }) // Manual control Undo.undo() Undo.redo() Undo.clear()

🧪 Live demo

📝 Task list — delete items then Ctrl+Z

Buy groceries
Call the doctor
Finish the project

⚡ Custom actions

💡 DevTools open? Try Ctrl+Z right now

Waiting for actions...

📋 All options

Undo.watch('#container', { maxHistory: 50, shortcut: true, toast: true, onUndo: (action) => {}, onRedo: (action) => {}, })

⌨️ Keyboard shortcuts

Shortcut	Action
`Ctrl+Z` / `Cmd+Z`	Undo last action
`Ctrl+Y`	Redo
`Ctrl+Shift+Z`	Redo (alt)

✅ What gets tracked

Action
Element removed	✅ restored at position
Element added	✅ removed on undo
Attribute changed	✅ reverted
Input blur	✅ value reverted
Custom push()	✅ anything you define

⚛️ React

import Undo from 'undo-anything' import { useEffect } from 'react' function TaskList() { useEffect(() => { Undo.watch('#list') return () => Undo.unwatch('#list') }, []) return <ul id="list">...</ul> }