Get Started
markloom/react is an optional peer wrapper.
The editor itself is Preact-based; React is not required for the core or view entrypoints.
npm i markloom react react-domimport { useRef, useEffect } from 'react'
import { mdToDoc, docToMd } from 'markloom'
import { Editor } from 'markloom/view'
import 'markloom/view/theme.css'
export function NoteEditor({ initialMd, onMd }: {
initialMd: string
onMd: (md: string) => void
}) {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!ref.current) return
const ed = new Editor(ref.current, mdToDoc(initialMd), {
onChange: (d) => onMd(docToMd(d)),
})
return () => { ed.destroy?.() }
}, [])
return <div ref={ref} className="note-editor" />
}
Prefer a thin host (as above) unless you need the package’s React helper.
Keep initialMd seeding one-shot; drive updates through the editor API to avoid fighting controlled React state.
react ≥ 18 is optional and only needed for the React entrypoint.