Features and installation

Base composition

@quirekit/msfe-core provides editor and extension contracts. StarterKit groups common Markdown behavior. Vue / React adapters retain the application's Provider tree. Pin compatible package versions together; the public API remains experimental.

import { StarterKit } from '@quirekit/msfe-starter-kit'
import { CustomContainer, Footnotes, Math, Mermaid } from '@quirekit/msfe-markdown-extras'
const extensions = [StarterKit, CustomContainer, Footnotes, Math, Mermaid]

Configure themes, UI and language support through the relevant guides. You do not need every optional package to start.

StarterKit features

Feature	Source forms	Editing entry
Headings	ATX / Setext	`setHeading(level)`
Bold, emphasis, strikethrough	`bold`, `em`, `~~del~~`	Corresponding toggle commands
Inline and block code	Spans, fences, indented code	Language command and native source editing
Links and images	Inline / resolved references	Insert commands and supported field patches
Lists and tasks	Ordered, unordered, task syntax	Indent, outdent, continue and task controls
Quotes and thematic rules	`>` and separators	Native source and presentation
GFM tables	Pipe tables	Row/column commands and native cell text
Literals	Escapes, entities, breaks	Source-neutral presentation

Readable or renderable forms do not all support identical field writes. Check can(), semantic queries and codec support before calling arbitrary attribute updates.

Table and list commands

editor.commands.insertTableRow('after')
editor.commands.insertTableColumn('before')
editor.commands.moveTableCell(1)
editor.commands.deleteTableRow()
editor.commands.indentList()

Related @quirekit/msfe-prose features install these commands. Selection must identify an applicable structure; deleting the last row or column has constraints. Tables remain GFM source, not arbitrary rich-text block containers. See Commands.

Optional Markdown features

These exports come from @quirekit/msfe-markdown-extras and are not all included in StarterKit.

Extension	Syntax	Boundary
`Frontmatter`	Leading YAML fence	Source presentation, not a business configuration form
`DocumentProperties`	Optional YAML property table, requires `Frontmatter`	Explicit installation; source mode preserves the header; can be disabled on the same instance
`Subscript` / `Superscript`	`H~2~O` / `x^2^`	Distinct from strikethrough; unconfirmed forms retain source
`InsertedText` / `Highlight`	`++added++` / `==marked==`	Supply corresponding theme styles
`Emoji`	`:smile:` / optional emoticons	Unicode output; configurable definitions
`DefinitionList`	Term followed by `: definition`	Markdown owns the body
`Abbreviations`	`*[HTML]: Hyper Text Markup Language`	Source and lookup index stay separate
`Footnotes`	References, definitions, inline notes	Source-derived numbering, query and navigation
`Typographer`	Quote and punctuation display	Source-neutral; configurable quotes and work bounds
`Callout`	Quote with `[!NOTE]`	Role styling, distinct from colon containers
`CustomContainer`	`::: warning`	Registered types, nesting and disclosure; see Containers
`Math`	$...$ and `$$...$$`	KaTeX preview with source fallback; no structured math commands
`Mermaid`	`mermaid` fences	Optional asynchronous preview; see Diagrams

import { Emoji, Typographer, Footnotes } from '@quirekit/msfe-markdown-extras'
const emoji = Emoji.configure({ definitions: { ship: '🚢' }, emoticons: false })
const typography = Typographer.configure({ smartQuotes: true, quotes: ['“', '”', '‘', '’'] })
const footnotes = Footnotes.configure({
  referenceLabel: number => `Footnote ${number}`,
  definitionLabel: number => `Back to footnote ${number}`,
})

Load KaTeX CSS, for example katex/dist/katex.min.css, from the host's global CSS entry. Math and Mermaid accept host preview controls.

Advanced footnote access uses queryFootnotes() and navigateFootnote(); abbreviations use queryAbbreviations(). Queries may be pending. Reuse their indexes and never treat display numbers as permanent IDs.

HTML is separate

@quirekit/msfe-html exports Html, defaulting to source. Html.configure({ rendering: 'safe' }) enables restricted sanitized presentation. Image loading additionally needs explicit allowImage. Scripts, arbitrary HTML editing and unrestricted embedded/browser HTML layout are outside its promise.

Adjust the preference through the package's public functions without rewriting Markdown. Unsupported structures retain source.

Host responsibilities

Storage, files, uploads, routing, permissions, navigation, HTML/PDF export and Yjs integration belong to the host. applyChanges validates revisions but is not a collaboration adapter. markdown-it, ProseMirror and Tiptap plugins cannot install directly; see Markdown plugins.

Continue with nodes, containers, diagrams, themes or saving.