# Configuration and lifetime

Separate initial content, product settings and host services, then update and dispose the editor correctly.

Run the complete [quick start](/en/classic/quick-start) before adapting its configuration. Vue applications use the `/vue` entries to share the application's Vue runtime.

## Creation-time choices

| Option | Purpose |
| --- | --- |
| `element` | Editor host; omit it to call `mount()` later |
| `document` | Initial canonical content, rather than interface translations |
| `preset` | Document model, views and default product plugins |
| `plugins` | Product ribbons, sidebars, actions and file services |
| `extensions` | Additional Core extensions compatible with the model and View |
| `media`, `host` | Durable media and host resource services, following their creation-time contracts |

Do not recreate the instance on every interface render or repeatedly pass `document` to update button state. See [document models](/en/build/model) for model and Schema choices.

## Interface and workspace

| Option | Usage | Defaults and boundaries |
| --- | --- | --- |
| `locale` | `'zh-CN'` or `'en'` | Chinese by default; changes the interface without translating existing content |
| `editable` | false for read-only input | True by default; programmatic writes still need application permission checks |
| `theme` | A complete QuireKit theme | Instance overrides preset; not just a primary color |
| `view` | `{ backend: 'canvas' }` or `'svg'` | Canvas by default; product backend updates rebuild Core |
| `shell` | Menu, ribbon, toolbar, ruler, sidebars and status visibility | Override individual preset fields |
| `ui` | Contribution ID lists or false for toolbar, contextMenu and selectionPopup | Compose installed controls rather than creating document commands |
| `webFonts` | Font-library settings or false | Omission enables default external font-library configuration; disabled hosts still prepare fonts used by content |

For example, retain the ribbon, hide the compact toolbar and collapse controls in narrow windows:

```ts [Interface options at creation]
shell: { toolbar: false, ribbon: true, ribbonOverflow: 'collapse' },
ui: { selectionPopup: false },
webFonts: false,
```

`shell` controls regions; `ui` composes registered items. Install new actions or panels through a [product plugin](/en/classic/plugins), then reference contribution IDs. Visibility does not grant or revoke write permissions.

Load both `@quirekit/classic-editor/styles.css` and the selected Word package's `@quirekit/classic-docx/styles.css`. The host supplies a real height and available width; public styles position product components, painted surfaces and overlays.

## Adjust the current workspace through UI controls

```ts [Interface changes without rebuilding Core]
instance.ui.setZoomMode('fit-width')
instance.ui.setRulerVisible(false)
instance.ui.setSidebarVisible('right', false)
```

These operations preserve content and history. Open an installed panel with `openSidebarPanel(side, panelId)`. `subscribe(listener)` observes UI state and returns a cleanup function.

## Which updates rebuild Core

Updates containing only `locale`, `editable`, and supported `theme` changes retain the same Core, selection, storage, listeners and history. Both built-in generic and Word presets support theme updates. Locale does not translate content; theme refreshes UI and derived paint. Editability updates cancel imports that have not committed.

Supplying `document`, `preset`, `plugins`, `extensions`, `view`, `features`, `shell`, `ui` or runtime structure still unmounts and rebuilds Core/View. Content is retained by default, but the old Core and history end; read `instance.editor` again. Mixed updates also follow this structural path. Update only when configuration changes, never per keystroke or Vue render.

A custom preset retains the session on theme changes only when it implements `updatePresentation(context)`, refreshing owned nonpersistent presentation without changing Schema or content. Without the hook, theme changes still rebuild. See [Classic API](/en/classic/api).

| Updated field | Merge rule |
| --- | --- |
| `document` | Replace when explicitly supplied; otherwise retain current content |
| `plugins`, `extensions` | Replace instance arrays; include retained entries again. Preset plugins remain separate |
| `features`, `shell`, `view`, `canvasRuntime`, `svgRuntime` | Shallow merge individual fields into current settings |
| `ui` | Update by surface; each `items` list is final, and false disables that surface |
| `preset`, `theme`, `locale`, `editable`, `webFonts` | Use the supplied replacement value |
| `media`, `host`, `surfaceMode` | Not update options; create a new product to replace these services |

Bind document subscriptions through plugin `onMount` / `onUnmount`, rather than observing only the first Core. The [saving tutorial](/en/classic/files) includes a reusable recipe. Product `onUpdate` also runs for selection and interface changes; it differs from Core's content `update`.

## Exit and remount

After a dynamic import completes, check that its host still exists. `unmount()` releases the shell and Core while retaining content for `mount(element)`; it loses that Core's history too. `destroy()` permanently releases product resources. Pending built-in import preparation becomes invalid on unmount, destruction or document changes. Task owners still cancel arbitrary custom network requests.

## Saving and resources

A JSON download is an explicit snapshot rather than automatic saving. The application persists canonical content and media, handles failures and tracks unsaved changes; see [Classic saving and opening](/en/classic/files). Full options, instance methods and UI controls are in the [instance reference](/en/classic/reference); actions, panels and services are in [Classic API](/en/classic/api).