extensions: [StarterKit, Mention]MSFE = Markdown Source-First Editor · A source-first Markdown editor framework · Preview
- 01Core only
- 02Install
- 03Write one
- 04Source intact
Click anywhere in the text to take the pen
pnpm add @quirekit/msfe-core @quirekit/msfe-starter-kitPART 1Framework · MSFE
One core, every kind of editor
MSFE is an editor core plus plugins you compose freely. The four editors below are real and editable. They share one core and differ only in the plugins they install.
FIG 1 — Four assembliescreateMsfeEditor({ extensions })
extensions: [StarterKit, CustomContainer, Highlight]extensions: [StarterKit, Math, Mermaid]extensions: [StarterKit, MsfeMindMap]- ONE CORE
- One createMsfeEditorThe core owns source, parsing, projection, commands and undo.
- PAY FOR WHAT YOU USE
- One package per capabilityImport what you need; bundle size follows the plugins you install.
- ALL THE WAY UP
- MD Editor is built the same wayThe full product is also a set of plugins plus UI. See part two below.
Every capability is a plugin
MSFE itself owns only source, parsing and projection. Containers, math, diagrams and AI are plugins: they declare syntax, read and write source, draw projections and register commands. Install ready-made ones, or write your own.
FIG 2 — Plugin bench0 / 7 plugged in · Auto demo
- addMarkdownExtensionsaddSourceaddStateaddProjectionLayers
- addMarkdownExtensionsaddSourceaddProjections
- addMarkdownExtensionsaddSourceaddProjectionLayers
- addSourceaddProjectionLayers
- addSourceaddAttributesaddCommandsaddProjectionLayers
- addSourceaddAttributesaddCommandsaddProjectionLayers
- addProjectionLayers
- color-swatch.ts
const ColorSwatch = Extension.create({ name: 'colorSwatch', addProjectionLayers: () => [{ key: 'color-swatch', placement: 'inline', build(input) { const text = input.document.slice(input.from, input.to) return [...text.matchAll(/#[0-9a-f]{6}\b/gi)].map(m => { const from = input.from + m.index return { type: 'widget', from, key: `swatch-${from}`, // Swatch.vue: a ColorPicker that rewrites these 7 characters view: componentView(Swatch, { color: m[0], from }), } }) }, }], })
- SOURCE
- 0 toggles, 0 bytes of source changedPlugins only decide presentation. Picking a swatch color is what rewrites those 7 characters.
- HOOKS
- Syntax · Source · Projection · CommandsPlus shortcuts, input rules, component views and AI capability facts.
- COMPOSE
- Compose what you needVue and React components can serve as plugin views; a product installs only what it needs.
Source is the truth, the view is a projection
The editor first parses Markdown into a syntax tree, then projection layers draw headings, containers and diagrams. Change one character in any view and only those characters change in the source. Where an edit cannot be mapped, it is refused rather than rewriting the block.
FIG 3 — One edit, through three layersClosed
L0 · Markdown source
# Release notes A paragraph of **native Markdown**. ```mermaid flowchart LR Write --> Ship ```
L1 · Lezer syntax tree
L2 · View (projection layer)
Release notes
A paragraph of native Markdown.
WriteShip
10,000-paragraph document · one edit15,234 → <150syntax fragment comparisons
@quirekit/lezer-markdown
An optimized Lezer Markdown parser.On top of native incremental parsing, it records which syntax blocks were actually reused, so an edit compares only nearby fragments. Every result is checked against a full parse.
@quirekit/cm-*
A source-maintained CodeMirror 6.15 packages are built from source, with fixes for adjacent block spacing in the height map, DOM reuse and old-view release, so clicks, scrolling and drag selection land more accurately in long documents.
A few lines into your app
Start from one editor instance and install the extensions you need. Commands, state, component views and resource lifecycles are all covered by the developer guide.
FIG 4 — Setup and packagesVue · React · Vanilla JavaScript
// editor.ts import { createMsfeEditor } from '@quirekit/msfe-core' import { StarterKit } from '@quirekit/msfe-starter-kit' const editor = createMsfeEditor({ parent: document.querySelector('#editor'), markdown: '# Give your ideas some room', extensions: [StarterKit], }) // What you get back on save is the Markdown the user wrote const markdown = editor.getMarkdown()
Coremsfe-coremsfe-starter-kitmsfe-prose
Framework bindingsmsfe-vuemsfe-react
Syntax & nodesmsfe-headingmsfe-boldmsfe-linkmsfe-imagemsfe-code-blockmsfe-htmlmsfe-html-sandboxmsfe-markdown-extras
Diagramsmsfe-flowchartmsfe-mind-mapmsfe-whiteboard
Collaboration & AImsfe-commentsmsfe-collaborationmsfe-collaboration-hocuspocusmsfe-ai
PART 2Product · MD Editor, built with MSFE
A full editor, built on MSFE
MD Editor is a product built with MSFE that works out of the box. One source delivers DOCX, PDF and OFD, and the source file itself is .md; both Markdown and docx can be imported to keep writing.
FIG 5 — One source, four deliverablesVue component · MIT
01 · Source
# Quarterly review
Revenue grew **18%** year over year.
$$
g = \frac{R_t - R_{t-1}}{R_{t-1}}
$$
```quirekit-mind-map
{"title":"Next quarter", …}
```Export→Import←
02 · Delivery
DOCX
Quarterly review
Revenue grew 18% year over year.
g = (Rt − Rt−1) / Rt−1
Next quarterRetentionNew channels
PDF
OFD
MD
- FORMULA
- Editable equationsLaTeX becomes native DOCX equations that stay editable in Word and WPS.
- DIAGRAM
- Diagrams import backDiagrams export as images with their source data, so they can still be double-clicked and edited after import.
- TEMPLATE
- Export templatesHeadings, body text and table styles follow a template; DOCX, PDF and OFD come from the same source.
- Diagram editorsFlowcharts, mind maps, whiteboards
- MathFormula panel and LaTeX
- Text diagramsMermaid, PlantUML, DOT
- Comments & mentionsStored apart, source stays clean
- AI assistantBlock edits you can review or revert
- Edit historyChanges traced on a timeline
- Mobile writingTouch selection and toolbar
Your next idea starts in Markdown
Put MSFE in your app, or use MD Editor as it is.