Build your first editor

This chapter adds an editor to a Vue page. Start with the browser's native DOM view to learn Core; later chapters add Canvas, pagination and your product interface.

You should be familiar with Vue components and lifecycle hooks, and have Node.js and pnpm installed. In an existing Vue 3 project, start with the dependency installation.

1. Prepare a Vue project

pnpm create vite my-editor --template vue-ts
cd my-editor
pnpm install
pnpm add @quirekit/core@alpha @quirekit/starter-kit@alpha @quirekit/dom-view@alpha @quirekit/pm-view@alpha

core manages content and commands. starter-kit provides paragraphs, headings and common formatting. dom-view displays editable DOM, and the pm-view stylesheet preserves whitespace and native selection presentation. Use matching QuireKit release versions.

2. Create an editor component

Create src/Editor.vue. Vue supplies an empty element; Editor manages its editable contents after mounting.

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Editor } from '@quirekit/core'
import { StarterKit } from '@quirekit/starter-kit'
import { DomViewExtension } from '@quirekit/dom-view'
import '@quirekit/pm-view/style/prosemirror.css'

const element = ref<HTMLElement>()
let editor: Editor | undefined

onMounted(() => {
  editor = new Editor({
    element: element.value,
    mode: 'dom',
    extensions: [StarterKit, DomViewExtension],
    content: '<p>My first QuireKit editor.</p>',
  })
})

onBeforeUnmount(() => editor?.destroy())
</script>

<template><div ref="element" /></template>

element selects the display location, extensions determines supported content, and content supplies the initial document. mode: 'dom' selects the installed DOM view. Create the instance once, rather than recreating it on each edit.

onMounted waits for the host element; destroy() releases the view and listeners. With SSR, the server renders only the outer element and the browser creates the editor.

3. Use it in your page

Import the component in src/App.vue, then run pnpm dev.

<script setup lang="ts">
import Editor from './Editor.vue'
</script>

<template><Editor /></template>

Click to type, drag to select, and use your system undo shortcut. This example uses the same integration and has just one component source file.

What comes next

The editor has no toolbar or paginated workspace yet. Learn the document model next: how structured content works and why articles and Word documents use different extensions. Then mount Canvas/SVG.

Already familiar with these basics? The complete workspace reference explains the files for state management and file operations individually.