Single vs multi mounts

Chartbuddy Embed ships in two packaging modes: multi-mount and single-mount. Multi-mount is the normal package for pages that can load Chartbuddy’s engine assets and host one or more charts. Single-mount is an all-in-one script for hosts that cannot fetch any further JavaScript after the first file.

Multi-mount is the default. Use it for dashboards and normal HTML/app pages. Reach for single-mount only when the host is constrained (for example an AI chat artifact window).

Multi-mount (default)

A normal page or dashboard: you control the host, so Chartbuddy can load its engine assets and you can put several Insights on one page.

• Prefer the multi-file package (@chartbuddy.io/embed / chartbuddy-embed.mjs) on sites you control.
• Construct one Insight per container.
• Pass a stable instanceId so each chart has a stable registry key. Duplicate ids on the same page throw.

<div id="a" style="height:300px"></div>
<div id="b" style="height:300px"></div>
<script type="module">
  import { Insight, snapshotInsights } from 'https://unpkg.com/@chartbuddy.io/embed';

  const a = new Insight('#a', {
    instanceId: 'revenue',
    chartData: chartA,
  });
  const b = new Insight('#b', {
    instanceId: 'bridge',
    chartData: chartB,
  });
  await Promise.all([a.ready, b.ready]);

  // Agent: await snapshotInsights() → { charts: { revenue, bridge } }
</script>

Update with setData / update / setChartData on the instance you own. Destroy before removing the element.

Live registry: window.__CHARTBUDDY_INSIGHTS__ / getInsights().

See the dashboard sample.

Single-mount (constrained hosts)

Use single-mount when the environment only allows one self-contained script and cannot fetch sibling engine files afterward. Typical cases:

• AI chat / artifact sandboxes
• Strict CSP or single-script embeds

In those hosts:

• Use the single-file build (https://unpkg.com/@chartbuddy.io/embed or chartbuddy-embed.single.mjs). Do not pass assetBase.
• Usually mount one Insight for the deliverable.
• Keep view mode unless you deliberately want in-artifact editing. See Chart with AI for client-specific notes.

<div id="chart" style="width:100%;height:420px"></div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  const insight = new Insight('#chart', {
    chartData: { /* … */ },
  });
  await insight.ready;
</script>

If you are building a dashboard you control, stay on multi-mount. Reach for single-mount only when the host forces a one-script, no-extra-JS setup.

Single-file vs multi-file

Build	When
Single-file (package root / .single.mjs)	Single HTML page, strict CSP, one script tag
Multi-file (chartbuddy-embed.mjs + siblings)	Sites you control that can load engine assets

For single-script or strict-CSP hosts: use the single-file path. Do not pass assetBase. Do not import engine internals (d3, wasm, workers) yourself.

The explicit single-file URL is https://unpkg.com/@chartbuddy.io/embed/chartbuddy-embed.single.mjs.