Multiple tabs, devices, edge caches show same logical state — broadcast channel, `storage` event, WebSocket sync, SWR revalidation.

Frontend Architecture

Distributed UI consistency

<h2>Summary</h2>
<p>LWW, vector clocks, CRDT merge, server authoritative reject — pick per domain (notes vs inventory). UI exposes conflicts users care about; auto-merge the rest. Ties to <a href="#610-offline-conflict-resolution">6.10 Offline conflict resolution</a> and <a href="#88-crdt-basics-for-collaboration">8.8 CRDT basics</a>.</p>
<h2>Code example</h2>
<pre><code class="language-javascript">function resolveConflict(local, remote) {
  if (remote.version &gt; local.version) return remote;
  if (local.version &gt; remote.version) return local;
  return { ...remote, merged: true, body: mergeText(local.body, remote.body) };
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>LWW, vector clocks, CRDT merge, server authoritative reject — pick per domain (notes vs inventory).</li>
<li>UI exposes conflicts users care about; auto-merge the rest.</li>
<li>Ties to <a href="#610-offline-conflict-resolution">6.10 Offline conflict resolution</a> and <a href="#88-crdt-basics-for-collaboration">8.8 CRDT basics</a>.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">Conflict resolution</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API">Background Sync</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-10-offline-first-design">Offline-first design</a></li>
<li><a href="/blogs/level-10-distributed-ui-consistency">Distributed UI consistency</a></li>
</ul>


LWW, vector clocks, CRDT merge, server authoritative reject — pick per domain (notes vs inventory).

Conflict resolution models

Local source of truth syncs to server — optimistic UI, conflict resolution, queue mutations.