Quick start

Create an editable text area with Core, common extensions and the browser's native DOM view. For Vue, you can follow the single-component tutorial.

Install the basics

pnpm add @quirekit/core@alpha @quirekit/starter-kit@alpha @quirekit/dom-view@alpha @quirekit/pm-view@alpha

These packages are MIT; use matching releases. Core provides the instance and commands, StarterKit common content, DOM View browser input, and PM styles whitespace and selection presentation.

Create an editor

Add an element with id="editor" and create the instance after that element exists:

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 editor = new Editor({
  element: document.getElementById('editor'),
  mode: 'dom',
  extensions: [StarterKit, DomViewExtension],
  content: '<p>Hello, QuireKit.</p>',
})

element chooses the location, extensions the supported content and behavior, and content the initial text. Click to type and use shortcuts for formatting and undo.

Try controls and content

This example adds Bold, Undo and download controls to the same editor. Format selected text, undo, then download actual document JSON.

core/editor.vue owns controls, core/create.ts creates Editor, core/shortcuts.ts adds a shortcut, and shared/download.ts handles downloading. Choose files individually in Source. This UI example also needs theme and control styles.

Release on exit

editor.destroy()

Call this on unmount or when finished, rather than immediately after creation. Example edits last for this session; products add persistence.

Continue with Vue, documents and Schema, or build your own editor for Canvas and a product interface.