Multiple Applications in the same document can find each other and communicate directly. One Application advertises what it can do; another discovers it and calls its methods. The connection is live — providers appear and disappear as Applications load and unload, and subscribers are notified automatically.

Application discovery is capability-based, not identity-based. Applications don't look for each other by name or node ID. They look for a capability — a string label like 

 — and get back whatever Applications in the document are currently providing it.

 return Observables. This distinction matters for consumers — 

 returns an Observable that emits the current list of providers immediately, then again whenever the list changes. Always handle the empty case — the provider might not exist yet.

let chartProxy;

window.charmiq.discover('chart').subscribe(providers => {
  chartProxy = providers[0] || undefined;
  updateConnectionStatus(chartProxy ? 'connected' : 'disconnected');
});

// Later, when you need to call:
if (chartProxy) {
  await chartProxy.setData(newData);
}

, which means it must be serializable. The structured clone algorithm handles: primitives, plain objects, arrays, Dates, typed arrays. It does not handle: functions, DOM nodes, class instances with methods, Symbols.

// CORRECT — returns data
window.charmiq.advertise('math', {
  add: (a, b) => a + b,               // ✅ returns a number
  computeAsync: async () => result,    // ✅ Promise resolves to data
});

// INCORRECT — returns a function
widgetAPI.advertise('math', {
  getAdder: () => (a, b) => a + b,    // ❌ functions can't be cloned (DataCloneError)
});

Three Applications working together in one document:

const dataSubject = new rxjs.BehaviorSubject([]);

// Incoming data from an external source (MCP, form input, etc.)
window.charmiq.appContent.onChange$("[name='ingest']").subscribe(change => {
  const records = change.content
    .split('\n')
    .filter(l => l.trim())
    .map(l => JSON.parse(l));
  dataSubject.next(records);
});

// Advertise to other Applications
window.charmiq.advertise('data-source', {
  getData: () => dataSubject.getValue(),
  data$: () => dataSubject.asObservable(),
});

 — discovers the data source, processes it:

window.charmiq.discover('data-source').pipe(
  rxjs.switchMap(providers =>
    providers[0] ? providers[0].data$() : rxjs.EMPTY
  )
).subscribe(async records => {
  const results = await runAnalysis(records);
  await window.charmiq.appContent.set(JSON.stringify(results), "[name='output']");
});

 — discovers the analysis output and renders it:

window.charmiq.appContent.onChange$("[name='output']").subscribe(change => {
  const results = JSON.parse(change.content || '{}');
  renderChart(results);
});

Each Application is focused on one job. None of them know about each other's internal structure. The document's shared data layer and Application discovery are the connective tissue.

 namespace support multiple providers simultaneously — unlike custom capabilities, which are single-provider by design. The 

 capability is used for command registration: any Application can advertise handlers for document-level commands, and the parent editor can invoke specific Applications by node ID.

window.charmiq.advertise('charmiq.command', {
  exportData: () => { /* ... */ },
  refresh: () => { /* ... */ },
  clear: () => { /* ... */ },
});

How Applications in the same document find each other and communicate in real time.

Developer | Widget Discovery

The Model

Advertising a Capability

Discovering and Calling

Lifecycle

Serialization

A Worked Example: Data Pipeline

The `charmiq.command` Namespace

Patterns

Next Steps