# canvasViewExtension

Registers the canvas mounted runtime. Hosts still provide container geometry, base styles and a document model.

Registers the canvas mounted runtime. Hosts still provide container geometry, base styles and a document model.

`@quirekit/view` · **AGPL-3.0-only**

## Editor compatibility
Layer：**View integration**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Supported | [classicEditorPreset](/en/plugins/reference/classic-editor-preset) — Classic presets already register Canvas and SVG. Select view.backend instead of registering a duplicate View in extensions. |
| Block | Unsupported | This View is outside the product's current mounting contract. Independent Core hosts can select it through the View guide; adding the extension does not switch product form. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/view@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { canvasViewExtension } from '@quirekit/view'
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

Classic presets already register Canvas and SVG. Select view.backend instead of registering a duplicate View in extensions.

[classicEditorPreset](/en/plugins/reference/classic-editor-preset)

```ts
import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'

const instance = createClassicEditor({
  element,
  view: { backend: 'canvas' },
})
```

### Block

This View is outside the product's current mounting contract. Independent Core hosts can select it through the View guide; adding the extension does not switch product form.

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### runtime

Runtime options applied when the editor mounts canvas mode.

Type：`CanvasMountedViewRuntimeOptions | undefined`

Default：`undefined`

## Commands and runtime

This entry declares no directly enumerable commands. Children supply bundle commands; product plugins use contributions or document services.

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.