Choose an editor and integration

Choose the product before choosing plugins. Classic is a paginated editor; Block is a continuous HTML flow editor. They share Core and some document capabilities, while product controls, presets and mounting have distinct contracts.

The plugin catalog and references share the editor switch in the left navigation. Integration examples follow that preference, with local tabs available for comparison. The adjacent filter button offers capability categories and license tags. Select multiple licenses to include any of them, or none to include all. On mobile, open the navigation drawer. Choices persist across pages and languages; Reset in the filter panel restores all choices.

An editor filter includes supported entries and entries requiring integration. Unsupported and unverified entries remain available under All. Overview and integration guides stay in the navigation, and filtering keeps the current article open.

Read the support status

Each reference starts with the status for both products and its required assembly. Catalog cards show the same statuses.

Status	Meaning	What to do
Supported	A product assembly exists	Use the listed preset or entry and satisfy control flags, service and asset requirements
Requires integration	A shared capability needs a product adapter or explicit host wiring	Follow the adapter or configuration contract instead of copying the base import alone
Unsupported	This entry is outside the product's current contract	Choose another product or an existing adapter; Block does not consume Classic plugins
Unverified	A complete product integration and verification path has not been established	Validate the model, View, interaction and file lifecycle before treating a public export as product support

Supported does not mean every feature is enabled by default or every export format preserves it completely. Licensing is independent: MIT, AGPL and Commercial labels come from package metadata; private packages require distribution access.

Three layers and their installation paths

Layer	Owns	Installation
Shared document capability	Nodes, marks, commands, options and host ports	Core extensions, directly or through a product preset
Classic product integration	Ribbon, toolbars, panels, file services and product lifecycle	Ordinary extensions in extensions; product plugins in plugins; product presets in preset
Block product integration	Continuous-flow presentation, block actions, toolbars and workspaces	createBlockEditor preset options or extensions, with additional Vue controls mounted through product slots

Classic preset is a product preset object. Block preset accepts an options object or false; createBlockEditorPreset() returns an extension array for independent Core hosts. These values are not interchangeable.

Configuration has one reference. Switch between Classic and Block installation on that page, then read its shared options and commands. Configure existing preset children; disable a child before replacing it to avoid duplicate installation.

Shared graphics: choose the product assembly

Flowchart owns diagram source, previews and host ports. Classic uses ClassicFlowchart for its workspace. Block's default preset already supplies the workspace and media interaction; configure or disable it through preset.flowchart.

The snippets below use an existing host element named element. The host owns sizing, persistence and assets; call instance.destroy() on teardown.

Classic · Requires integration

The shared extension defines content and host ports. Use the Classic adapter below for its workspace and product interaction, without installing both the base extension and its replacement.

ClassicFlowchart

import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'
import { ClassicFlowchart } from '@quirekit/classic-flowchart'

const instance = createClassicEditor({
  element,
  extensions: [ClassicFlowchart],
})

Block · Supported

The default createBlockEditor preset installs this capability. Configure the corresponding preset child; graphic editing uses the preset's workspace ports, while persistence and assets remain host-owned. Avoid duplicate extensions.

createBlockEditorPreset

import { createBlockEditor } from '@quirekit/block-editor'
import '@quirekit/block-editor/styles.css'

const instance = createBlockEditor({
  element,
  content: { type: 'doc', content: [{ type: 'paragraph' }] },
})

Mind maps, whiteboards, text diagrams and data views use the same separation between shared capabilities and product assembly. An editor adapter does not automatically preserve all editing capabilities in DOCX, PDF or other formats; consult the file service's contract.

Tables and numbering: package names do not determine support

@quirekit/block-table reuses canonical nodes and commands from @quirekit/classic-table through a table-only layout profile. @quirekit/block-numbering reuses canonical numbering and commands from @quirekit/classic-numbering. Neither installs the Classic shell or pagination.

Tables: read shared semantics in WordTable, and integrate with Block through createBlockTableExtensions.
Lists: read shared options in WordNumbering, and integrate with Block through createBlockNumberingExtensions.

The table extension array supplies models and commands. For the Vue product UI, also mount table controls in the BlockEditor tools slot:

<script setup lang="ts">
import { BlockEditor } from '@quirekit/block-editor/vue'
import { BlockTableMenu } from '@quirekit/block-table/vue'
// instance comes from createBlockEditor with createBlockTableExtensions() spread into extensions.
</script>

<template>
  <BlockEditor :instance="instance">
    <template #tools="{ editor, editable, viewport }">
      <BlockTableMenu :editor="editor" :editable="editable" :viewport="viewport" />
    </template>
  </BlockEditor>
</template>

The Vue component manages View mounting, so omit element when creating the instance. Its creator still destroys it. Table menus, numbering galleries and underlying commands have distinct boundaries; reusable models alone do not imply complete product interaction.

Continue with plugin configuration, or choose a capability from all plugins.