# View: adapters and workspace options

Backend choice, runtime options, geometry queries and freshness.

## Register and select

Canvas/SVG hosts also import `@quirekit/view/styles.css` for base positioning of content, overlay and input layers. The host supplies its theme and workspace dimensions; standalone Core integration does not depend on Classic product CSS. The complete source and [mounting guide](/en/build/view) include this import.

| Backend | Registration | Meaning |
| --- | --- | --- |
| `canvas` | `canvasViewExtension({ runtime })` | Canvas content and View-owned input/geometry |
| `svg` | `svgViewExtension({ runtime })` | SVG surface with shared pagination semantics |
| `html` | `htmlViewExtension({ runtime })` (`@quirekit/view-html`) | Retained continuous DOM flow, not native DOM view |
| `dom` | `DomViewExtension` from `@quirekit/dom-view` | Separate native contenteditable adapter |

### canvasViewExtension

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

Creates a configured Canvas mounted view extension.
@param options - Runtime options for canvas mode.
@returns Configured Canvas mounted view extension.

```ts
function canvasViewExtension(options?: Partial<CanvasViewExtensionOptions>): QuireExtension<CanvasViewExtensionOptions>
```

### svgViewExtension

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

Creates a configured SVG mounted view extension.
@param options - Runtime options for SVG mode.
@returns Configured SVG mounted view extension.

```ts
function svgViewExtension(options?: Partial<SvgViewExtensionOptions>): QuireExtension<SvgViewExtensionOptions>
```

### htmlViewExtension

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

Creates a configured HTML mounted view extension.
@param options - Runtime options for HTML mode.
@returns Configured HTML mounted view extension.

```ts
function htmlViewExtension(options?: Partial<HtmlViewExtensionOptions>): QuireExtension<HtmlViewExtensionOptions>
```

## Common Canvas runtime options

| Option | Purpose/unit | Integration |
| --- | --- | --- |
| `width` / `height` | Preferred surface size in CSS px | Not Word units or model page settings |
| `pageStack` | Per-page presentation | Profile/Engine own pagination facts |
| `scrollSource` / `scrollViewport` | Scroll ownership | Use the same product viewport element |
| `viewportPadding` | Viewport padding in CSS px | Separate from document margins |
| `devicePixelRatio` / `getDevicePixelRatio` | Raster backing density | Not content zoom |
| `surfaceConfig` | Selection/object presentation | Outside persisted content |
| `mediaResolver` | Stable asset references to resources | Match persistence/conversion resources |
| `onRender` | Completed mounted-render facts | Read layout snapshot without starting another layout |
| `onVisiblePagesChange` | Realized page set | Not total page count |
| `textMeasurer` / `lineBreaker` | Font measurement and line breaking | Need consistent verified policies |

SVG has its own contract, including `textMeasurementBackend: 'browser'`. Similar field names do not establish interchangeability; type-check each backend. Shared callbacks in the tutorial use `QuireMountedViewRenderEvent`.

## Mounted capabilities

`editor.mountedView` can be absent; `editor.view` needs an active primary view. Use `focus()`, `hasFocus()` and `scrollToSelection()` for input/visibility. `coordsAtPos()` and `posAtCoords()` use browser client CSS pixels. `getCaretRect()` and `getTextRangeRects(range, sourceDocument)` return geometry only when supported and current.

Where required, pass the captured immutable source document. A stale frame returning null/unavailable is a valid refusal, not permission to hit-test new content with old coordinates. Subscribe to `onGeometryUpdate()` when needed and release its returned subscription.

See [the mounting tutorial](/en/build/view) for the workspace, zoom and mode switching, and [Editor API](/en/api/editor) for mount/changeMode options.