Skip to main content
Lumen Editor includes a built-in auto-save mechanism that persists editor content to localStorage as the user types, with no extra libraries required. You configure it once at initialization and the editor handles debouncing, serialization, and storage for you — so your users never lose work if they close the tab or navigate away unexpectedly.

​
Enabling auto-save

Pass an autoSave object to the editor constructor with two properties: a key that names the localStorage entry, and an optional debounce delay in milliseconds. 
const editor = new Editor('#editor', {
  autoSave: {
    key: 'my-doc',      // localStorage key
    debounce: 800       // ms to wait after last keystroke (default: 800)
  }
});
The editor starts a debounced timer on every change event. Once debounce milliseconds have elapsed since the last change, it writes the current HTML content to localStorage under the given key.
The key is written directly to localStorage, so it shares the same namespace as every other key your page sets. Use a namespaced key like lumen:doc-123 to avoid collisions with other scripts or libraries on the same origin.
In multi-document applications, use the document’s unique ID as part of the key — for example lumen:doc-${documentId} — so each document has its own isolated auto-save slot.

​
Listening to the autosave event

The editor emits an autosave event each time it successfully writes to localStorage. Hook into it to display a “Saved” indicator, update a status bar, or trigger any other side effect: 
editor.on('autosave', () => {
  console.log('Content auto-saved!');
  document.querySelector('#save-status').textContent = 'Saved';
});
The event fires after the debounce timer completes and the write succeeds. It carries no payload — you can read the latest content from localStorage or from editor.getHTML() if you need it.

​
Restoring saved content

On page load, check localStorage for a previously saved draft and pass it as the value option so the editor initializes with the restored content: 
const savedContent = localStorage.getItem('my-doc');

const editor = new Editor('#editor', {
  value: savedContent ?? '',   // restore draft, or start empty
  autoSave: {
    key: 'my-doc',
    debounce: 800
  }
});
If no saved content exists, localStorage.getItem returns null, so the nullish coalescing fallback (?? '') ensures the editor starts with an empty document.

​
End-to-end example

The following snippet combines initialization, draft restoration, auto-save configuration, and status feedback into a complete setup you can drop into any page: 
const DOC_KEY = 'lumen:my-doc';

// Restore any previously auto-saved draft
const savedDraft = localStorage.getItem(DOC_KEY);

const editor = new Editor('#editor', {
  value: savedDraft ?? '',
  autoSave: {
    key: DOC_KEY,
    debounce: 800
  }
});

// Show a "Saved" indicator after each auto-save
const status = document.querySelector('#save-status');

editor.on('autosave', () => {
  status.textContent = '✓ Saved';
  // Fade it out after 2 seconds
  setTimeout(() => { status.textContent = ''; }, 2000);
});

editor.on('change', () => {
  status.textContent = 'Unsaved changes…';
});
To discard the auto-saved draft — for example when the user explicitly clicks a “Discard” button — remove the key from localStorage directly:
localStorage.removeItem(DOC_KEY);
The next auto-save cycle will create a fresh entry.