# Display content with Canvas/SVG

Replace DOM with Canvas and understand scrolling, zoom and pagination responsibilities.

View handles document display and input. Replace the native DOM view from chapter one with Canvas; Core still uses the same nodes, commands and history mechanisms.

Obtain a matching version of `@quirekit/view`. Its licensing differs from Core; see [licensing](/en/support).

## 1. Install the view

Replace `DomViewExtension` with the Canvas adapter and select `mode: 'canvas'`. This creation excerpt belongs inside the previous component's `onMounted`:

```ts [Create a Canvas view]
import { canvasViewExtension } from '@quirekit/view'
import '@quirekit/view/styles.css'

editor = new Editor({
  element: element.value,
  mode: 'canvas',
  extensions: [
    StarterKit,
    canvasViewExtension({ runtime: { width: 720, height: 900 } }),
  ],
  content: '<p>Content displayed by Canvas.</p>',
})
```

`runtime` configures the view; dimensions use CSS pixels. Structure styles position content, input and selection layers and must be imported with the adapter.

This single-file example uses its container width. Click to edit; its source includes all imports and Vue lifecycle hooks.

### tutorial/canvas.vue

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { Editor } from "@quirekit/core";
import { StarterKit } from "@quirekit/starter-kit";
import { canvasViewExtension, svgViewExtension } from "@quirekit/view";
import "@quirekit/view/styles.css";

const props = withDefaults(defineProps<{
  /** Initial text language, separate from the document after creation. */
  locale?: "zh-CN" | "en";
}>(), { locale: "zh-CN" });
const element = ref<HTMLElement>();
let editor: Editor | undefined;

onMounted(() => {
  if (!element.value) return;
  const runtime = { width: element.value.clientWidth, height: 240, pageStack: false };
  editor = new Editor({
    element: element.value,
    mode: "canvas",
    extensions: [StarterKit, canvasViewExtension({ runtime }), svgViewExtension({ runtime })],
    content: props.locale === "en" ? "<p>This text is displayed by Canvas. Click to edit.</p>" : "<p>这段正文由 Canvas 显示。点击这里开始编辑。</p>",
  });
});
onBeforeUnmount(() => editor?.destroy());
</script>

<template><div ref="element" style="min-height: 240px; position: relative" /></template>

```

## 2. Switch to SVG while keeping content

Install `svgViewExtension()` too when creating the editor, then call:

```ts [Switch display]
editor.changeMode('svg')
editor.changeMode('canvas')
```

`changeMode()` replaces the primary view without creating new content. Another `mount()` adds a view instead. Destroy the owned Editor when the component exits.

## 3. Let the workspace manage scroll and zoom

For scrolling inside your container, pass it as `scrollViewport` with `scrollSource: 'viewport'`. View can then handle input and selection using the correct scroll position.

The complete example calculates display zoom in `workspace.vue` and reports page counts and content dimensions from `runtime.ts`. Display zoom must not rewrite paper dimensions in the document.

## 4. Pagination comes from the model

Canvas does not itself add Word pagination. Articles can use continuous layout; the Word model supplies page rules. `pageStack: true` displays resulting pages separately without inventing section, header or footer rules.

For pagination, inspect `assembly/word.ts`, `runtime.ts` and `workspace.vue` in the [complete reference](/en/build/reference), alongside [document models](/en/build/model). Next: [connect your toolbar](/en/build/commands). Detailed parameters are in [View API](/en/api/view).