Skip to main content

Installation

Install @powerduck/md-editor from your package manager of choice.

npm install @powerduck/md-editor
yarn add @powerduck/md-editor
pnpm add @powerduck/md-editor

Import paths​

The package defines explicit subpath exports in its package.json:

Import pathWhat it resolves
@powerduck/md-editorMain entry: MarkdownEditor class and all standalone helpers, types, and functions.
@powerduck/md-editor/reactReact subpath: MarkdownEditorReact component plus MarkdownEditorProps and MarkdownEditorHandle types.
@powerduck/md-editor/dist/style.cssCompiled editor stylesheet (must be imported once).
@powerduck/md-editor/styles/tokens.cssRaw design-token CSS custom properties.

The package is shipped as an ECMAScript module ("type": "module") with dual builds: dist/index.mjs (ESM) and dist/index.cjs (CommonJS). Type declarations are emitted to dist/index.d.ts.

// Vanilla JS main entry
import { MarkdownEditor, renderMarkdown } from '@powerduck/md-editor';
import '@powerduck/md-editor/dist/style.css';
// React subpath
import { MarkdownEditorReact, type MarkdownEditorHandle } from '@powerduck/md-editor/react';
import '@powerduck/md-editor/dist/style.css';

Peer dependencies​

react and react-dom are declared as optional peer dependencies (>=17). You only need them if you import the ./react subpath:

npm install react react-dom

The vanilla MarkdownEditor class and the standalone renderMarkdown function have no React dependency, so they work in any browser project without installing React.

TypeScript support​

The package ships its own type declarations. No additional @types/* packages are required. The main entry exposes MarkdownEditorOptions, EditorMode, EditorTheme, ToolbarConfig, RendererOptions, and all helper types; the ./react subpath exposes MarkdownEditorProps and MarkdownEditorHandle.

import { MarkdownEditor, type MarkdownEditorOptions } from '@powerduck/md-editor';
import type { MarkdownEditorHandle } from '@powerduck/md-editor/react';

CSS side effects​

The package marks *.css files as side effects in package.json, so bundlers do not tree-shake them. Import dist/style.css once in your application entry point; it bundles the editor chrome, preview styling (via github-markdown-css), KaTeX styling, and all plugin styles.

Next steps​