grapesjs-autosave — local autosave & crash recovery for GrapesJS

A tab dies. A laptop sleeps. Someone hits ⌘W on the wrong window.

Whatever was open in the editor is gone, and the only honest thing your app can say is "sorry". Every page builder eventually meets this support ticket.

Server-side saves don't help — the work that vanishes is precisely the work that never reached the server. What's missing is a layer closer to the user than the network.

How it works

An independent local layer — not another storage backend.

It never registers a StorageManager adapter, never calls editor.store(), and never competes with your backend. Three design decisions do the heavy lifting.

01

Stores project data, not HTML

Snapshots are getProjectData() — the real project state, including styles, pages and component structure. Exported HTML would lose all of it.

02

Survives with no backend at all

Works with storageManager: false, with a REST backend, and alongside Studio's own project storage. IndexedDB, with a localStorage fallback for private-mode browsers.

03

One Ctrl+Z undoes a restore

Restoring applies the whole project inside a single undo group, so a misclick costs nothing. Recovery that can't be reverted isn't safe to offer.

What you get

Everything the rescue actually needs.

Version history, not just one slot

A ring buffer of up to 20 versions by default, each with a timestamp, component count and size. Open the History panel, preview which one matches the current state, restore or delete any of them.

Recovery banner

Appears only when a stored snapshot actually differs from what loaded. No noise on a clean start.

⌘S / Ctrl+S

Bound by default, rebindable, or off entirely. Pressing it repeatedly never floods the history with identical copies.

Every string translatable

All 13 user-facing labels are overridable, so the plugin speaks your product's language and tone.

Studio SDK ready

Handles Studio resolving its project after editor load — so the recovery decision is never made against an empty editor.

Built to fail quietly

Saves are serialized so concurrent writes can't corrupt the ring buffer. Quota errors evict the oldest snapshot and retry. Storage failures surface through onError instead of propagating into the editor's change loop. Teardown removes every command, keymap, listener and injected style.

API

One function call. Sensible defaults.

Drop it into plugins and it works. Every knob is optional.

Option	Default	What it does
`key`	`'default'`	Isolates one project's snapshots from others on the same origin.
`intervalMs`	`3000`	Debounce between the last change and a save.
`maxSnapshots`	`20`	Ring-buffer size. The oldest is evicted past this.
`excludeEmpty`	`true`	Never let a blank editor overwrite a real snapshot.
`saveKeymap`	`true`	Bind ⌘S / Ctrl+S. Pass a string to rebind, or false to disable.
`recoveryBanner`	`true`	Show the "unsaved session found" banner on load.
`onError`	`console.warn`	Called on any storage failure the plugin recovered from.
`labels`	`—`	Override any of the 13 UI strings.