---
url: https://chartbuddy.io/embed/docs/api/multi-mount.md
---
> Docs index: [llms.txt](https://chartbuddy.io/embed/docs/llms.txt)

# 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**.

```html
<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](https://chartbuddy.io/embed/docs/samples/dashboard.md).

## 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](https://chartbuddy.io/embed/docs/connect-ai.md) for client-specific notes.

```html
<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`.