---
title: "Keep a local copy that syncs on reconnect · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/live-collaboration/local-first-sync
id: APP-71
level: Recommended
updated: 2026-10-22
tokens: 1004
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Keep a local copy that syncs on reconnect

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Live collaboration](https://agentwranglers.se/playbook/app-ui/live-collaboration.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-71
- Level: Recommended
- Chapter: [Live collaboration](https://agentwranglers.se/playbook/app-ui/live-collaboration.md)
- Rule: For documents people edit offline, keep a copy in the browser's IndexedDB, apply each edit to it first and send the missing changes on reconnect. Show whether the copy is in step with the server.
- Check: A browser test goes offline, types in a document and reloads the page while still offline. The text is still there. Back online, the server copy holds the text and the page shows "Saved".
- How: Local-first means the screen never waits for the network. With a CRDT, each side says which changes it has and receives only the missing ones. Browser storage can be cleared, as [Expect browser storage to fail or be cleared](https://agentwranglers.se/playbook/app-ui/client-and-server-state/storage-can-fail.md) says, so the server copy stays the one you back up. Tell people they are offline as [Say when the network is gone](https://agentwranglers.se/playbook/app-ui/permissions-flags-and-failures/offline-behaviour.md) describes. Native apps queue changes as [Queue offline changes and resolve conflicts on the server](https://agentwranglers.se/playbook/mobile-apps/data-on-the-device/offline-sync.md) says.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```ts
const doc = new Y.Doc();
const local = new IndexeddbPersistence(`doc-${documentId}`, doc);
await local.whenSynced;
const remote = new WebsocketProvider('wss://collab.example.com', `doc-${documentId}`, doc);
remote.on('sync', (inStep: boolean) => showSaveState(inStep ? 'Saved' : 'Saving'));
```

### Python example

```python
from playwright.sync_api import expect

def test_offline_edit_survives_reload(page, context):
    page.goto("https://staging.example.com/docs/42")
    context.set_offline(True)
    page.get_by_role("textbox", name="Document").press_sequentially("Order 40 boxes")
    page.reload()
    expect(page.get_by_role("textbox", name="Document")).to_contain_text("Order 40 boxes")
    context.set_offline(False)
    expect(page.get_by_role("status")).to_have_text("Saved")
    assert "Order 40 boxes" in documents.text("42")
```

## Sources

- [W3C Indexed Database API 3.0](https://www.w3.org/TR/IndexedDB/)

## Related rules

- APP-60 [Expect browser storage to fail or be cleared](https://agentwranglers.se/playbook/app-ui/client-and-server-state/storage-can-fail.md) in Web app interface
- APP-52 [Say when the network is gone](https://agentwranglers.se/playbook/app-ui/permissions-flags-and-failures/offline-behaviour.md) in Web app interface
- MOB-26 [Queue offline changes and resolve conflicts on the server](https://agentwranglers.se/playbook/mobile-apps/data-on-the-device/offline-sync.md) in Mobile apps

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/live-collaboration/local-first-sync">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Show presence from short-lived state](https://agentwranglers.se/playbook/app-ui/live-collaboration/presence-expires.md)
- Next: [Test that copies end up equal in any order](https://agentwranglers.se/playbook/app-ui/live-collaboration/convergence-tests.md)
- [Live collaboration](https://agentwranglers.se/playbook/app-ui/live-collaboration.md)