Collaborative UI State

Summary

Lux Sync can synchronize lightweight collaborative UI state such as shared fields, cursors, selections, presence, review state, and control-panel changes between browser clients.

Buyer phrase: “I need a few users to see the same current UI state in real time, but I do not need a full collaborative editor stack.”

Buyer Problem

Many applications need collaboration-adjacent behavior without needing Google Docs style CRDT editing:

• shared review status;
• visible cursor or selected row;
• collaborative form progress;
• operator handoff state;
• current tab/filter/view;
• live “ready for review” or approval state.

Building a full collaborative engine can be overkill. Lux provides a simple active-state broker for small JSON state.

Lux Architecture

Each browser client uses the Lux SDK. One user writes the current UI state; other clients subscribed to the same document receive the update.

Data path:

1. Editor A changes text or review status.
2. Browser writes state with store.save() or store.patch().
3. Lux updates active state in memory.
4. Editor B receives the state over WebSocket.
5. UI re-renders from the received state.

Example State

{
  "document": "launch-notes",
  "text": "ready for review",
  "cursor": 16,
  "editor": "editor-a",
  "summary": "launch-notes ready for review"
}

Implementation Shape

Use one document per collaborative surface:

review-launch-notes
approval-contract-44
presence-room-alpha
shared-filter-support-queue

Browser:

const shared = lux('review-launch-notes', {
  endpoint: `${broker}/api/lux`,
  websocketUrl: `${wsBroker}/api/lux/stream/review-launch-notes`,
  apiKey,
  realtime: true,
  debounce: 100
});

await shared.load((state, meta) => renderSharedState(state, meta));

input.addEventListener('input', () => {
  shared.patch({
    text: input.value,
    editor: currentUser.id
  });
});

AWS Estate Proof

Scorecard: /mnt/data/ubuntu_data/code/lux/artifacts/usecase-scorecard-aws/20260617T221800Z/scorecard.md

Proof string: launch-notes ready for review

Result:

• CLI proof: PASS
• Browser Playwright proof: PASS
• PUT ack observed from external operator machine to AWS EC2: 156.565 ms
• WebSocket delivery observed from external operator machine to AWS EC2: 396.384 ms

Timing boundary: this external AWS estate timing includes public network latency.

Customer Data Handling

For buyer-deployed brokers, collaborative UI payloads remain in the buyer environment. Buyers decide what UI state is safe to synchronize and how to authenticate clients.

Good Fit

Use Lux for:

• shared review status;
• presence indicators;
• selected-row or cursor state;
• collaborative dashboards;
• lightweight shared forms;
• live approval state;
• multiplayer-style interface state.

Poor Fit

Do not use Lux alone as:

• a full CRDT editor;
• a rich document merge engine;
• a version-control system;
• an offline multi-writer conflict resolver.

For complex concurrent text editing, pair Lux with a purpose-built merge layer or CRDT library.

FAQ

Can Lux power collaborative UI features?

Yes. Lux can synchronize compact current UI state between browser clients in real time.

Is Lux a CRDT system?

No. Lux is a synchronization broker for current state. For complex concurrent editing, buyers should use a CRDT or merge engine and can still use Lux as the live transport layer.

What kinds of collaborative state fit Lux?

Presence, cursor position, selected item, shared filters, review status, approval state, compact form state, and dashboard controls are good fits.

Does Lux require a framework?

No. The SDK is a small JavaScript module and can work with plain browser code or frameworks.