---
url: https://chartbuddy.io/embed/docs/getting-started/view-vs-edit.md
---
# View vs edit

## Default: view mode

```js
new Insight('#chart', { chartData });
```

* Chart draws immediately
* No formatting toolbar
* Hover the ChartBuddy ball for **Download**, **Drag to slide**, and **Edit**

## Display-only (export chrome, no Edit)

```js
new Insight('#chart', {
  allowEdit: false,
  chartData,
});
```

Same view ball and exports, but **Edit** is hidden and `enterEditMode()` is a no-op. Use for dashboards that should stay read-only.

## Open the editor immediately

```js
new Insight('#chart', {
  editable: true,
  chartData,
});
```

Boots in edit with toggle chrome (Done / morph). Users can leave edit and return to view.

## Always-on editor (no mode chrome)

```js
new Insight('#chart', {
  editSession: 'locked',
  chartData,
});
```

Stays in edit for the life of the mount: no Done control, no morph ball. `enterEditMode()` / `exitEditMode()` are no-ops. Use this when the host page owns the surrounding UI (marketing demos, dialogs).

## Switch at runtime

```js
await insight.enterEditMode();
insight.mode; // 'edit'

await insight.exitEditMode(); // or use Done on the chrome ball
insight.mode; // 'view'
```

Only applies when `editSession` is `'toggle'` (the default) and `allowEdit` is not `false`.

## What edit mode is for

Interactive formatting: axes, colors, annotations, orientation, and the rest of the ChartBuddy editor. The embed package has no spreadsheet UI — you edit styling, not the underlying data grid.