Quick start
Create your first editor through public package exports, then edit, read, and clean up.
This page puts Markdown editing in your application: create an instance, type, read the source and clean up on exit.
1. Prepare dependencies
The development version is consumed through workspace packages or locally packed artifacts. A stable public npm release is not yet promised. In a pnpm workspace containing the MSFE packages, add these dependencies to your application:
pnpm add '@quirekit/msfe-core@workspace:*' '@quirekit/msfe-starter-kit@workspace:*'
For Vue, also add @quirekit/msfe-vue; for React, use @quirekit/msfe-react. Install the peer dependencies matching the framework version in your application.
Install local tarballs through the package manager and retain their published dist and types directories. StarterKit's type entry includes the command declarations from its installed plugins, so methods such as editor.commands.toggleBold() require no additional plugin imports for typing.
Plain installations may use different dependencies from this repository. Release preparation remains incomplete; use the acquired version’s support boundaries for long sessions and diagram behavior.
2. Create an instance
Provide a mounted DOM element. markdown supplies the initial text, and extensions selects the installed features.
import { createMsfeEditor } from '@quirekit/msfe-core'
import { StarterKit } from '@quirekit/msfe-starter-kit'
const parent = document.querySelector<HTMLElement>('#editor')!
const editor = createMsfeEditor({
parent,
markdown: '# Hello, Markdown\n\nStart writing.',
mode: 'live',
extensions: [StarterKit],
})
// Read on save; there is no need to serialize the document on every keystroke.
const markdown = editor.getMarkdown()
// Clean up when the host leaves the page.
// editor.destroy()
3. Add Vue and controls
Type in the example, switch source and live modes, then read the current Markdown.
basic/editor.vue owns the interface and instance, shared/appearance.ts configures appearance, shared/messages.ts supplies example labels, and shared/types.ts defines locale types. Choose the file you need in Source.
Next steps
Read Vue integration or React integration for framework lifecycle and custom components. To connect existing storage, continue to Reading and saving.
Before considering integration complete
Give the parent a real width and reasonable minimum height, label the editor and connect cleanup to route/component lifetime. Feature defaults are not your complete product theme; follow UI and themes.
Keep one CodeMirror state/view dependency identity when linking workspace source. Production consumers should use public entries and their own built packages, not private source paths. This site's aliases are repository-development configuration.
Verify typing, modes, readonly, saving and teardown, then choose optional capabilities from the feature catalog.