How to Add Autosave and Draft Recovery to a React Editor in 2026

How to Add Autosave and Draft Recovery to a React Editor in 2026

Users lose work. Browsers crash. Networks drop. Tabs close by accident. The one thing a rich text editor can’t afford to do in 2026 is lose a user’s content. This guide shows you how to add autosave and draft recovery to a React editor the right way — with debounced server saves, localStorage fallback, conflict resolution, and recovery UX that actually works when things go wrong.

This autosave guide covers the full implementation: hooks, timing strategies, storage patterns, conflict detection, and tested working code for TipTap, Lexical, and Eddyter. Full implementation in 2-4 hours for most apps.

The short answer. Add autosave to a React editor in 2026 with two layers: a debounced server save every 2-5 seconds for the authoritative copy, plus a localStorage write on every change for offline fallback and crash recovery. Add version numbers to detect conflicts. Add a “Last saved” indicator so users trust the system. Full implementation runs 150-300 lines of code and works across every modern rich text editor.

🎥 See a modern editor in action: What is Eddyter? Why Developers Are Switching in 2026

Why Autosave Matters More Than You Think

Autosave looks like a nice-to-have feature. It’s actually one of the top three reasons users stay in or churn out of content apps. Three specific risks make it critical.

1. Browser Tab Crashes Are More Common Than Users Admit

Chrome, Firefox, and Safari all occasionally crash tabs that have been open for hours. Memory pressure, bad extensions, OS-level kills — any of these wipe unsaved editor state. Users blame your app, not Chrome.

2. Network Drops During Save Are the Hidden Killer

User writes for 20 minutes. Hits save. Network blipped. Save fails. Content lost. This happens dozens of times per day across any production editor without autosave + offline fallback.

3. Accidental Close Is the Most Common Failure Mode

Cmd+W to close a tab. Cmd+Q to quit the browser. Clicking “Back” in the browser. Any of these can discard unsaved editor content. Users expect modern editors to handle this gracefully — Notion, Google Docs, and Linear all do.

Build autosave + draft recovery once. Users notice when it’s there (they don’t lose work). They churn hard when it’s not.

The 2-Layer Autosave Architecture

The autosave pattern that actually works in 2026 uses two independent save layers.

Layer 1: Debounced Server Save (Authoritative)

Every 2-5 seconds after the last edit, send the content to your server. This is the source of truth. Server-side storage, versioning, conflict detection — all live here.

Layer 2: localStorage Fallback (Recovery)

On every edit (not debounced), write the content to localStorage. This handles browser crashes, network failures, and accidental closes. On next load, check localStorage for unsaved drafts and offer to recover.

The two layers work independently. If server save succeeds, localStorage is a backup. If server save fails (network drop, server down), localStorage is the only copy. On reload, you reconcile the two.

Step 1: Build the Debounced Server Save

Start with a custom hook that debounces save calls and manages save state.

The useAutosave Hook

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
"use client";
import { useEffect, useRef, useState, useCallback } from 'react';
type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
interface UseAutosaveOptions {
  content: string;
  documentId: string;
  debounceMs?: number;
  onSave?: (content: string) => Promise<void>;
}
export function useAutosave({
  content,
  documentId,
  debounceMs = 2000,
  onSave,
}: UseAutosaveOptions) {
  const [status, setStatus] = useState<SaveStatus>('idle');
  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const lastContentRef = useRef<string>(content);
  const save = useCallback(async (contentToSave: string) => {
    if (contentToSave === lastContentRef.current && status !== 'idle') {
      return;
    }
    setStatus('saving');
    try {
      if (onSave) {
        await onSave(contentToSave);
      } else {
        // Default save to API endpoint
        const response = await fetch(`/api/documents/${documentId}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ content: contentToSave }),
        });
        if (!response.ok) {
          throw new Error(`Save failed: ${response.status}`);
        }
      }
      lastContentRef.current = contentToSave;
      setStatus('saved');
      setLastSavedAt(new Date());
      // Reset to idle after showing "Saved" for 2 seconds
      setTimeout(() => setStatus('idle'), 2000);
    } catch (error) {
      console.error('Autosave failed:', error);
      setStatus('error');
    }
  }, [documentId, onSave, status]);
  useEffect(() => {
    if (content === lastContentRef.current) return;
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    timeoutRef.current = setTimeout(() => {
      save(content);
    }, debounceMs);
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [content, debounceMs, save]);
  // Save immediately on unmount if there are pending changes
  useEffect(() => {
    return () => {
      if (content !== lastContentRef.current) {
        save(content);
      }
    };
  }, [content, save]);
  return { status, lastSavedAt, saveNow: () => save(content) };
}

How to Use It

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use client";
import { useState } from 'react';
import { useAutosave } from './useAutosave';
export default function Editor({ documentId, initialContent }) {
  const [content, setContent] = useState(initialContent);
  const { status, lastSavedAt } = useAutosave({
    content,
    documentId,
    debounceMs: 2000,
  });
  return (
    <div>
      <SaveStatusIndicator status={status} lastSavedAt={lastSavedAt} />
      <YourEditorComponent
        value={content}
        onChange={(html) => setContent(html)}
      />
    </div>
  );
}

Why 2000ms Debounce?

Too fast (under 1000ms) = too many server calls, higher costs, likely rate-limit hits.
Too slow (over 5000ms) = users lose more work in a crash, feels unresponsive.
Sweet spot = 2000-3000ms. Google Docs uses ~2000ms. Notion uses ~2500ms. Linear uses ~1500ms.

Step 2: Add localStorage Draft Recovery

Debounced server save handles 95% of cases. localStorage handles the other 5% — browser crashes, offline edits, network failures.

The useDraftRecovery Hook

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
"use client";
import { useEffect, useRef } from 'react';
interface Draft {
  content: string;
  documentId: string;
  savedAt: string;
  version: number;
}
interface UseDraftRecoveryOptions {
  content: string;
  documentId: string;
  serverVersion: number;
  onRecoveryAvailable?: (draft: Draft) => void;
}
const DRAFT_KEY_PREFIX = 'editor-draft-';
export function useDraftRecovery({
  content,
  documentId,
  serverVersion,
  onRecoveryAvailable,
}: UseDraftRecoveryOptions) {
  const draftKey = `${DRAFT_KEY_PREFIX}${documentId}`;
  const hasCheckedRef = useRef(false);
  // Write to localStorage on every change (not debounced)
  useEffect(() => {
    if (!content) return;
    const draft: Draft = {
      content,
      documentId,
      savedAt: new Date().toISOString(),
      version: serverVersion,
    };
    try {
      localStorage.setItem(draftKey, JSON.stringify(draft));
    } catch (error) {
      // localStorage quota exceeded or disabled
      console.warn('Failed to write draft to localStorage:', error);
    }
  }, [content, documentId, serverVersion, draftKey]);
  // Check for recoverable drafts on mount
  useEffect(() => {
    if (hasCheckedRef.current) return;
    hasCheckedRef.current = true;
    try {
      const stored = localStorage.getItem(draftKey);
      if (!stored) return;
      const draft: Draft = JSON.parse(stored);
      const draftAge = Date.now() - new Date(draft.savedAt).getTime();
      // Only offer recovery if draft is recent (< 7 days)
      if (draftAge > 7 * 24 * 60 * 60 * 1000) {
        localStorage.removeItem(draftKey);
        return;
      }
      // Only offer recovery if draft is newer than server version
      if (draft.version < serverVersion) {
        localStorage.removeItem(draftKey);
        return;
      }
      // Only offer recovery if content actually differs
      if (draft.content === content) {
        return;
      }
      onRecoveryAvailable?.(draft);
    } catch (error) {
      console.warn('Failed to check for recoverable draft:', error);
    }
  }, [draftKey, serverVersion, content, onRecoveryAvailable]);
  // Clear draft after successful server save
  const clearDraft = () => {
    try {
      localStorage.removeItem(draftKey);
    } catch (error) {
      console.warn('Failed to clear draft:', error);
    }
  };
  return { clearDraft };
}

How to Use It With Recovery UI

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
"use client";
import { useState } from 'react';
import { useAutosave } from './useAutosave';
import { useDraftRecovery } from './useDraftRecovery';
export default function Editor({ documentId, initialContent, serverVersion }) {
  const [content, setContent] = useState(initialContent);
  const [recoverableDraft, setRecoverableDraft] = useState(null);
  const { status, lastSavedAt } = useAutosave({
    content,
    documentId,
    onSave: async (contentToSave) => {
      const response = await fetch(`/api/documents/${documentId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: contentToSave, version: serverVersion }),
      });
      if (!response.ok) {
        throw new Error('Save failed');
      }
      // Clear localStorage draft after successful server save
      clearDraft();
    },
  });
  const { clearDraft } = useDraftRecovery({
    content,
    documentId,
    serverVersion,
    onRecoveryAvailable: (draft) => setRecoverableDraft(draft),
  });
  const handleRecover = () => {
    setContent(recoverableDraft.content);
    setRecoverableDraft(null);
  };
  const handleDiscard = () => {
    clearDraft();
    setRecoverableDraft(null);
  };
  return (
    <div>
      {recoverableDraft && (
        <RecoveryBanner
          draft={recoverableDraft}
          onRecover={handleRecover}
          onDiscard={handleDiscard}
        />
      )}
      <SaveStatusIndicator status={status} lastSavedAt={lastSavedAt} />
      <YourEditorComponent
        value={content}
        onChange={(html) => setContent(html)}
      />
    </div>
  );
}

Recovery Banner Component

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function RecoveryBanner({ draft, onRecover, onDiscard }) {
  const draftAge = formatDistanceToNow(new Date(draft.savedAt));
  return (
    <div className="bg-amber-50 border-l-4 border-amber-400 p-4 mb-4 rounded">
      <div className="flex items-start justify-between">
        <div>
          <h3 className="font-semibold text-amber-900">
            Unsaved draft recovered
          </h3>
          <p className="text-sm text-amber-800 mt-1">
            We found a draft from {draftAge} ago that wasn't saved to the server.
            Would you like to restore it?
          </p>
        </div>
        <div className="flex gap-2 ml-4">
          <button
            onClick={onRecover}
            className="px-3 py-1.5 bg-amber-600 text-white rounded text-sm font-medium"
          >
            Restore
          </button>
          <button
            onClick={onDiscard}
            className="px-3 py-1.5 bg-white border border-amber-300 text-amber-900 rounded text-sm"
          >
            Discard
          </button>
        </div>
      </div>
    </div>
  );
}

Step 3: Add Save Status Indicator

Users don’t trust what they can’t see. Show them exactly what’s happening with saves.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { CheckCircle2, Loader2, AlertCircle } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
interface SaveStatusIndicatorProps {
  status: 'idle' | 'saving' | 'saved' | 'error';
  lastSavedAt: Date | null;
}
export function SaveStatusIndicator({ status, lastSavedAt }: SaveStatusIndicatorProps) {
  return (
    <div className="flex items-center gap-2 text-sm text-gray-600">
      {status === 'saving' && (
        <>
          <Loader2 className="w-4 h-4 animate-spin" />
          <span>Saving...</span>
        </>
      )}
      {status === 'saved' && (
        <>
          <CheckCircle2 className="w-4 h-4 text-green-600" />
          <span>Saved</span>
        </>
      )}
      {status === 'error' && (
        <>
          <AlertCircle className="w-4 h-4 text-red-600" />
          <span>Save failed</span>
        </>
      )}
      {status === 'idle' && lastSavedAt && (
        <span>Last saved {formatDistanceToNow(lastSavedAt)} ago</span>
      )}
    </div>
  );
}

Step 4: Handle Save Conflicts With Version Numbers

What happens when two tabs or two users edit the same document at the same time? Without conflict detection, you overwrite each other’s changes silently.

Server-Side Conflict Detection

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// pages/api/documents/[id].ts (Next.js API route)
export default async function handler(req, res) {
  if (req.method !== 'PATCH') {
    return res.status(405).end();
  }
  const { id } = req.query;
  const { content, version } = req.body;
  const current = await db.documents.findOne({ where: { id } });
  if (!current) {
    return res.status(404).json({ error: 'Not found' });
  }
  // Conflict detection
  if (current.version !== version) {
    return res.status(409).json({
      error: 'Conflict',
      currentVersion: current.version,
      currentContent: current.content,
      yourVersion: version,
    });
  }
  // Save with incremented version
  const updated = await db.documents.update({
    where: { id },
    data: {
      content,
      version: current.version + 1,
      updated_at: new Date(),
    },
  });
  return res.json({
    success: true,
    version: updated.version,
  });
}

Client-Side Conflict Handling

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { status } = useAutosave({
  content,
  documentId,
  onSave: async (contentToSave) => {
    const response = await fetch(`/api/documents/${documentId}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content: contentToSave, version: serverVersion }),
    });
    if (response.status === 409) {
      const conflict = await response.json();
      // Show conflict resolution UI
      setConflictData(conflict);
      throw new Error('Conflict');
    }
    if (!response.ok) {
      throw new Error('Save failed');
    }
    const result = await response.json();
    setServerVersion(result.version);
  },
});

Conflict Resolution UI

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function ConflictResolutionModal({ conflict, onResolve }) {
  return (
    <Modal>
      <h2>Changes from another session</h2>
      <p>
        Someone else edited this document while you were working. Choose how to resolve:
      </p>
      <div className="grid grid-cols-2 gap-4 mt-4">
        <div className="border rounded p-4">
          <h3 className="font-semibold mb-2">Your version</h3>
          <div dangerouslySetInnerHTML={{ __html: conflict.yourContent }} />
          <button onClick={() => onResolve('keep-yours')}>Keep mine</button>
        </div>
        <div className="border rounded p-4">
          <h3 className="font-semibold mb-2">Other version</h3>
          <div dangerouslySetInnerHTML={{ __html: conflict.currentContent }} />
          <button onClick={() => onResolve('keep-theirs')}>Use theirs</button>
        </div>
      </div>
    </Modal>
  );
}

Full Working Example: Autosave + Recovery + Conflicts

Here’s the complete production-ready component that ties everything together.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
"use client";
import { useState } from 'react';
import { useAutosave } from './useAutosave';
import { useDraftRecovery } from './useDraftRecovery';
export default function Editor({
  documentId,
  initialContent,
  initialVersion,
}) {
  const [content, setContent] = useState(initialContent);
  const [serverVersion, setServerVersion] = useState(initialVersion);
  const [recoverableDraft, setRecoverableDraft] = useState(null);
  const [conflict, setConflict] = useState(null);
  const { status, lastSavedAt } = useAutosave({
    content,
    documentId,
    debounceMs: 2000,
    onSave: async (contentToSave) => {
      const response = await fetch(`/api/documents/${documentId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          content: contentToSave,
          version: serverVersion,
        }),
      });
      if (response.status === 409) {
        const conflictData = await response.json();
        setConflict({
          yourContent: contentToSave,
          currentContent: conflictData.currentContent,
          currentVersion: conflictData.currentVersion,
        });
        throw new Error('Conflict');
      }
      if (!response.ok) {
        throw new Error(`Save failed: ${response.status}`);
      }
      const result = await response.json();
      setServerVersion(result.version);
      clearDraft();
    },
  });
  const { clearDraft } = useDraftRecovery({
    content,
    documentId,
    serverVersion,
    onRecoveryAvailable: (draft) => setRecoverableDraft(draft),
  });
  const handleRecover = () => {
    setContent(recoverableDraft.content);
    setRecoverableDraft(null);
  };
  const handleDiscardDraft = () => {
    clearDraft();
    setRecoverableDraft(null);
  };
  const handleResolveConflict = (choice: 'keep-yours' | 'keep-theirs') => {
    if (choice === 'keep-yours') {
      setServerVersion(conflict.currentVersion);
    } else {
      setContent(conflict.currentContent);
      setServerVersion(conflict.currentVersion);
    }
    setConflict(null);
  };
  return (
    <div className="editor-container">
      {recoverableDraft && (
        <RecoveryBanner
          draft={recoverableDraft}
          onRecover={handleRecover}
          onDiscard={handleDiscardDraft}
        />
      )}
      <div className="flex items-center justify-between mb-4">
        <SaveStatusIndicator status={status} lastSavedAt={lastSavedAt} />
      </div>
      <YourEditorComponent
        value={content}
        onChange={(html) => setContent(html)}
      />
      {conflict && (
        <ConflictResolutionModal
          conflict={conflict}
          onResolve={handleResolveConflict}
        />
      )}
    </div>
  );
}

Autosave Integration With Specific Editors

The hooks above work with any React editor. Here’s how to wire them into the three most common.

With TipTap

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"use client";
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { useState } from 'react';
import { useAutosave } from './useAutosave';
export default function TipTapEditorWithAutosave({ documentId, initialContent }) {
  const [content, setContent] = useState(initialContent);
  const editor = useEditor({
    extensions: [StarterKit],
    content: initialContent,
    onUpdate: ({ editor }) => {
      setContent(editor.getHTML());
    },
    immediatelyRender: false,
  });
  useAutosave({ content, documentId, debounceMs: 2000 });
  return <EditorContent editor={editor} />;
}

With Lexical

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use client";
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { $generateHtmlFromNodes } from '@lexical/html';
import { useState } from 'react';
import { useAutosave } from './useAutosave';
export default function LexicalEditorWithAutosave({ documentId, initialContent }) {
  const [content, setContent] = useState(initialContent);
  useAutosave({ content, documentId, debounceMs: 2000 });
  const handleChange = (editorState, editor) => {
    editor.update(() => {
      const html = $generateHtmlFromNodes(editor, null);
      setContent(html);
    });
  };
  return (
    <LexicalComposer initialConfig={{ /* config */ }}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Start writing...</div>}
      />
      <OnChangePlugin onChange={handleChange} />
    </LexicalComposer>
  );
}

With Eddyter

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
} from 'eddyter';
import 'eddyter/style.css';
import { useState } from 'react';
import { useAutosave } from './useAutosave';
export default function EddyterEditorWithAutosave({ documentId, initialContent }) {
  const [content, setContent] = useState(initialContent);
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  useAutosave({ content, documentId, debounceMs: 2000 });
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        initialContent={initialContent}
        onChange={(html) => setContent(html)}
      />
    </EditorProvider>
  );
}

Get your Eddyter API key at eddyter.com/user/license-key. Full setup in the Eddyter docs.

🎥 See it in action: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Common Autosave Mistakes to Avoid

Teams implementing autosave for the first time consistently hit these specific issues.

Mistake 1: Saving on Every Keystroke

Sending a request on every character typed destroys server performance and hits rate limits. Always debounce. 2000-3000ms is the sweet spot.

Mistake 2: No “Save in Progress” Indicator

Users don’t trust silent saves. If content disappears when they close the tab, they blame your app. Always show save status (saving, saved, error).

Mistake 3: localStorage Without Quota Handling

localStorage has quotas (typically 5-10 MB per origin). Large documents can exceed quota. Always wrap localStorage calls in try/catch and handle QuotaExceededError.

typescript

1
2
3
4
5
6
7
8
try {
  localStorage.setItem(key, value);
} catch (error) {
  if (error.name === 'QuotaExceededError') {
    // Clean up old drafts or warn user
    cleanupOldDrafts();
  }
}

Mistake 4: Not Clearing Draft After Successful Save

If you keep the localStorage draft after server save succeeds, next page load prompts recovery for content that’s already saved. Always clear draft after confirmed server save.

Mistake 5: No Version Numbers for Conflict Detection

Without version numbers, two tabs editing the same document silently overwrite each other. Always use optimistic concurrency with version numbers.

Mistake 6: Autosave Across Component Unmounts

When users navigate away from the editor, pending debounced saves get cancelled. Always flush pending saves on unmount using cleanup functions.

Mistake 7: Showing Recovery for Old Drafts

If a user hasn’t edited for 2 weeks, offering to restore a 2-week-old draft is confusing. Only offer recovery for recent drafts (< 7 days).

Mistake 8: localStorage Writes Blocking the Main Thread

localStorage writes are synchronous. Writing a 500 KB HTML document on every keystroke causes typing lag. Debounce localStorage writes too (shorter interval than server, like 500ms).

Testing Your Autosave Implementation

Before shipping to production, test these specific scenarios:

Scenario 1: Happy Path

• Open editor
• Type a few paragraphs
• Wait 3 seconds
• Verify “Saved” indicator appears
• Verify server has the content

Scenario 2: Browser Crash

• Open editor
• Type content
• Force-kill the browser (don’t close normally)
• Reopen the page
• Verify recovery banner appears
• Verify restored content matches typed content

Scenario 3: Network Failure During Save

• Open editor
• Type content
• Disable network (DevTools → Network → Offline)
• Wait for save attempt
• Verify “Save failed” indicator appears
• Re-enable network
• Verify save retries succeed

Scenario 4: Two-Tab Conflict

• Open same document in two tabs
• Edit in tab A, wait for save
• Edit in tab B (without reloading)
• Wait for tab B’s save attempt
• Verify conflict modal appears in tab B
• Verify resolution flow works correctly

Scenario 5: Draft Older Than 7 Days

• Create a draft (manually set localStorage with old timestamp)
• Reload page
• Verify old draft is NOT offered for recovery
• Verify old draft is auto-cleared

Scenario 6: Quick Successive Edits

• Open editor
• Type rapidly for 10 seconds
• Verify only 3-5 server save calls (not one per keystroke)
• Verify localStorage updates on every change
• Verify final content on server matches final typed content

Advanced: Autosave for Collaborative Editors

If your app has real-time collaboration (Y.js, Automerge), the autosave pattern is different. CRDT-based editors manage sync automatically, but you still need:

1. Snapshot Saves

CRDT state grows unbounded. Periodically snapshot the resolved document to normal storage.

typescript

1
2
3
4
5
6
7
8
// Save Y.js document snapshot every 30 seconds
useEffect(() => {
  const interval = setInterval(() => {
    const snapshot = Y.encodeStateAsUpdate(ydoc);
    saveSnapshotToServer(documentId, snapshot);
  }, 30000);
  return () => clearInterval(interval);
}, [ydoc, documentId]);

2. Offline Draft Handling

CRDTs merge offline edits automatically on reconnect, but users still want visible confirmation. Show offline indicator and pending-sync status.

3. Last-Online Timestamp

Store when the user was last connected. On reconnect, show “Syncing offline changes” indicator.

For real-time collaboration integration patterns, see How to Add Real-Time Collaboration to a React Editor With Y.js 2026.

FAQs

1. How often should I autosave a React editor in 2026?

Debounce server saves to 2000-3000 milliseconds after the last edit. This matches Google Docs (~2000ms), Notion (~2500ms), and Linear (~1500ms). Faster than 1000ms causes rate limit issues and wastes server resources. Slower than 5000ms loses too much work in crash scenarios. Write to localStorage on every change (not debounced) for crash recovery — localStorage writes are fast enough that no debounce is needed for small documents. For large documents (>100 KB), debounce localStorage writes to 500ms to prevent typing lag. The two-layer architecture (debounced server + instant localStorage) gives you both performance and reliability.

2. Should I use localStorage or IndexedDB for draft recovery?

Use localStorage for most apps. localStorage is simpler, synchronous, and works for drafts up to a few MB. IndexedDB is only worth the complexity if you store large documents (>5 MB), multiple drafts simultaneously, or need async transactions. For typical rich text editor drafts (10-200 KB each), localStorage is the pragmatic choice. If you hit localStorage quota limits, that’s a signal to clean up old drafts or compress content before storage, not to switch to IndexedDB. For offline-first apps that need robust local storage with sync, consider libraries like Dexie.js on top of IndexedDB — but only when the use case clearly justifies it.

3. How do I handle autosave conflicts between two tabs or two users?

Use optimistic concurrency with version numbers. Every document stores a version integer that increments on each save. Clients send the version they’re based on with every save request. If the server’s current version doesn’t match, return a 409 Conflict with the current content. Clients then show a conflict resolution UI letting the user choose their version, the other version, or merge manually. For simpler apps, “last write wins” works but silently discards changes. For collaborative apps, Y.js or Automerge handle this automatically with CRDTs. For most non-collaborative editors, version-based conflict detection with explicit resolution is the right choice.

4. What happens if the user closes the browser before autosave completes?

The debounced save is cancelled when the tab closes. Without additional handling, pending changes are lost. Mitigate with three patterns: (1) Save on every change to localStorage (not debounced) — this always captures the latest state. (2) Flush pending debounced saves on beforeunload — attempt a synchronous save when the tab is closing. (3) Offer draft recovery on next load — check localStorage for drafts newer than the last server save and prompt to restore. The three patterns together handle 99%+ of close scenarios. Pure debounced save without localStorage fallback consistently loses work on browser crashes and accidental closes.

5. Should I use useDebounce from a library or write it myself?

Write it yourself for autosave. Library debounce functions (lodash, use-debounce) are generic and don’t understand the specific save state machine you need (saving, saved, error, idle). The custom useAutosave hook in this guide handles the full lifecycle: debouncing, save state transitions, error handling, unmount cleanup, and status indicators. It’s 50 lines of code and gives you full control over save behavior. Library debounces are fine for simple UI debouncing (search inputs, resize handlers) but underpowered for autosave. If you want to simplify, use a library debounce inside your custom hook — not instead of it.

6. How do I show “Saved” vs “Saving...” vs “Save failed” in the UI?

Use a four-state state machine: idle, saving, saved, error. Transition from idle → saving when the save request starts. Transition from saving → saved on success and show “Saved” for 2 seconds, then return to idle. Transition from saving → error on failure and keep showing “Save failed” until the next save attempt. When idle and lastSavedAt is set, show “Last saved X ago” using a library like date-fns or dayjs for relative time formatting. The four states cover all user communication needs: “something is happening,” “you’re safe,” “something went wrong,” “here’s when you were last safe.” Avoid complex nested state — four states is enough.

7. Does autosave work offline?

localStorage-based draft recovery works offline — writes to localStorage happen locally and don’t require network. Server-side autosave fails offline, which is expected. The right pattern: localStorage captures every change offline. When the user comes back online, the next edit triggers a server save attempt. If you want full offline-to-online sync (user edits offline for an hour, comes back, all changes sync), you need a service worker or background sync API. For most apps, “offline edits stored in localStorage, synced on next online edit” is sufficient. For true offline-first apps (notes apps, drafting tools), use PouchDB or similar for structured offline sync.

8. How do I test autosave in automated tests?

Mock localStorage and fetch in your test setup. Use fake timers (jest.useFakeTimers() or similar) to advance time past the debounce window without waiting. Test the full lifecycle: component mounts → content changes → debounce timer advances → save fetch is called → save status transitions through saving → saved. For conflict scenarios, mock fetch to return 409 and verify conflict state is set correctly. For recovery scenarios, pre-populate localStorage before mounting the component and verify the recovery callback fires. React Testing Library + Jest handle this cleanly. End-to-end tests (Playwright, Cypress) verify the full stack including real server behavior.

The Bottom Line on Autosave and Draft Recovery

Autosave is table stakes for any modern rich text editor in 2026. Users don’t notice when it works. They churn hard when it doesn’t.

The two-layer pattern — debounced server save plus localStorage fallback — handles 99%+ of real-world failure modes. Add version numbers for conflict detection. Show save status clearly. Clean up old drafts. These five patterns together take 2-4 hours to implement and permanently eliminate “I lost my work” support tickets.

For most apps, the custom hooks in this guide (useAutosave, useDraftRecovery) are the right level of abstraction. Library solutions over-generalize or under-handle. Write it once, use it everywhere.

Whatever editor you use (TipTap, Lexical, Eddyter, CKEditor), the autosave pattern is independent. The hooks work with any editor that provides an onChange callback and HTML or JSON content.

Ready to Build Your Editor With Autosave?

Stop losing user work. Deploy Eddyter into your React or Next.js app today — clean semantic HTML output ready for the autosave hooks in this guide, multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) included, 10-minute setup, $12-$59/mo flat.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min setup guide