Autosave with Undo Last Save

ProNew

Autosaving keeps a short history of saved versions and offers "Undo" for the last change (and Redo) with Cmd/Ctrl+Z inside the field, restoring the previous saved text and saving it again. Use this when autosave can feel scary because mistakes are saved too.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

initial

delay800

depth20

Guide and examples

When to use it

Autosave overwrites the only copy and people worry about saving a mistake.

Do not use it when: For full version history across sessions, use server-side revisions; this keeps a short in-session stack.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	sample	The saved text.
`save`	`(text) => Promise<void>`	-	Persist the text.
`delay`	`number`	`800`	Autosave delay.
`depth`	`number`	`20`	Saved versions kept.

Accessibility

Undo and Redo are real buttons that say what they do ("Undo last save"); the version counter ("Version 2 of 4") is plain text. They are disabled when there is nothing to go back or forward to.
Cmd/Ctrl+Z and Shift+Z work in the field only when the text equals the last saved version; with unsaved typing the browser's own fine-grained undo is left alone instead of being hijacked.
Going back is itself saved, so the server and the screen agree.

Testing

The pattern ships with a Testing Library test (autosave-with-undo.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Autosave overwrites the only copy and people worry about saving a mistake.

Do not use it when: For full version history across sessions, use server-side revisions; this keeps a short in-session stack.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`initial`	`string`	sample	The saved text.
`save`	`(text) => Promise<void>`	-	Persist the text.
`delay`	`number`	`800`	Autosave delay.
`depth`	`number`	`20`	Saved versions kept.

Accessibility

Undo and Redo are real buttons that say what they do ("Undo last save"); the version counter ("Version 2 of 4") is plain text. They are disabled when there is nothing to go back or forward to.
Cmd/Ctrl+Z and Shift+Z work in the field only when the text equals the last saved version; with unsaved typing the browser's own fine-grained undo is left alone instead of being hijacked.
Going back is itself saved, so the server and the screen agree.

Testing

The pattern ships with a Testing Library test (autosave-with-undo.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.