Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
By Trevor Norris - Jul 31, 2025
You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
@uiw/react-markdown-editor
Advanced tools
@uiw/react-markdown-editor
A markdown editor with preview, implemented with React.js and TypeScript.
A markdown editor with preview, implemented with React.js and TypeScript.
Migrate from @uiw/react-markdown-editor 4.x to 5.x.
Install
npm i @uiw/react-markdown-editor
Document
Official document demo preview (🇨🇳中国镜像网站)
Basic Usage
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';
const Dome = () => (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
ReactDOM.render(<Dome />, document.getElementById('app'));
Controlled Usage
import React, { useState } from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';
function App() {
const [markdown, setMarkdown] = useState("");
return (
<MarkdownEditor
value="# This is a H1 \n## This is a H2 \n###### This is a H6"
onChange={(value, viewUpdate) => setMarkdown(value)}
/>
);
}
export default App;
Only Markdown Preview
This markdown preview sub-component is a direct export @uiw/react-markdown-preview component, API documentation, please check @uiw/react-markdown-preview.
import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';
function App() {
return (
<MarkdownEditor.Markdown source="# This is a H1 \n## This is a H2 \n###### This is a H6" />
);
}
export default App;
Custom Toolbars
import React from "react";
import ReactDOM from "react-dom";
import MarkdownEditor from '@uiw/react-markdown-editor';
const title2 = {
name: 'title2',
keyCommand: 'title2',
button: { 'aria-label': 'Add title text' },
icon: (
<svg width="12" height="12" viewBox="0 0 512 512">
<path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
</svg>
),
execute: ({ state, view }) => {
if (!state || !view) return;
const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
let mark = '#';
const matchMark = lineInfo.text.match(/^#+/)
if (matchMark && matchMark[0]) {
const txt = matchMark[0];
if (txt.length < 6) {
mark = txt + '#';
}
}
if (mark.length > 6) {
mark = '#';
}
const title = lineInfo.text.replace(/^#+/, '')
view.dispatch({
changes: {
from: lineInfo.from,
to: lineInfo.to,
insert: `${mark}${title}`
},
// selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
selection: { anchor: lineInfo.from + mark.length },
});
},
};
const Dome = () => (
<MarkdownEditor
value="Hello Markdown!"
toolbars={[
'bold', 'italic', 'header', title2
]}
/>
);
export default Dome;
Support Nextjs
Use examples in nextjs.
npm install next-remove-imports
npm install @uiw/react-markdown-editor
// next.config.js
const removeImports = require('next-remove-imports')();
module.exports = removeImports({});
import dynamic from 'next/dynamic';
import '@uiw/react-markdown-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';
const MarkdownEditor = dynamic(
() => import("@uiw/react-markdown-editor").then((mod) => mod.default),
{ ssr: false }
);
function HomePage() {
return (
<div>
<MarkdownEditor value="Hello Markdown!" />
</div>
);
}
export default HomePage;
Support dark-mode/night-mode
By default, the dark-mode is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark" parameter for html Element.
<html data-color-mode="dark">
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
Inherit custom color variables by adding .wmde-markdown-var selector.
const Demo = () => {
return (
<div>
<div className="wmde-markdown-var"> </div>
<MarkdownEditor value="Hello Markdown!" />
</div>
)
}
Props
value (string)- the raw markdown that will be converted to html (required)visible?: boolean- Shows a preview that will be converted to html.toolbars?: ICommand[] | string[]- Tool display settings.toolbarsMode?: ICommand[] | string[]- Tool display settings.onChange?:function(editor: IInstance, data: CodeMirror.EditorChange, value: string)- called when a change is madeonBlur?: function(editor: IInstance, event: Event)- event occurs when an object loses focuspreviewProps- react-markdown options
import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
export interface IMarkdownEditor extends ReactCodeMirrorProps {
className?: string;
prefixCls?: string;
/** The raw markdown that will be converted to html (**required**) */
value?: string;
/** Shows a preview that will be converted to html. */
visible?: boolean;
visibleEditor?: boolean;
/** Option to hide the tool bar. */
hideToolbar?: boolean;
/** Override the default preview component */
renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
/** Preview expanded width @default `50%` */
previewWidth?: string;
/** Tool display settings. */
toolbars?: IToolBarProps['toolbars'];
/** Tool display settings. */
toolbarsMode?: IToolBarProps['toolbars'];
/** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
previewProps?: MarkdownPreviewProps;
/** replace the default `extensions` */
reExtensions?: ReactCodeMirrorProps['extensions'];
}
import React from 'react';
import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
export * from '@uiw/react-markdown-preview';
export interface ToolBarProps {
editor: React.RefObject<ReactCodeMirrorRef>;
preview: React.RefObject<HTMLDivElement>;
container: React.RefObject<HTMLDivElement>;
containerEditor: React.RefObject<HTMLDivElement>;
editorProps: IMarkdownEditor;
}
export interface MarkdownEditorRef {
editor: React.RefObject<ReactCodeMirrorRef> | null;
preview?: React.RefObject<MarkdownPreviewRef> | null;
}
export interface IToolBarProps<T = keyof typeof defaultCommands | ICommand> extends ToolBarProps {
className?: string;
editorProps: IMarkdownEditor;
mode?: boolean;
prefixCls?: string;
toolbars?: T[];
onClick?: (type: string) => void;
}
declare const MarkdownEditor: MarkdownEditorComponent;
declare type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & {
Markdown: typeof MarkdownPreview;
};
export default MarkdownEditor;
import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
export declare type ButtonHandle = (command: ICommand, props: IMarkdownEditor, options: ToolBarProps) => JSX.Element;
export declare type ICommand = {
icon?: React.ReactElement;
name?: string;
keyCommand?: string;
button?: ButtonHandle | React.ButtonHTMLAttributes<HTMLButtonElement>;
execute?: (editor: ReactCodeMirrorRef) => void;
};
export declare const defaultCommands: {
undo: ICommand;
redo: ICommand;
bold: ICommand;
italic: ICommand;
header: ICommand;
strike: ICommand;
underline: ICommand;
quote: ICommand;
olist: ICommand;
ulist: ICommand;
todo: ICommand;
link: ICommand;
image: ICommand;
fullscreen: ICommand;
preview: ICommand;
};
export declare const getCommands: () => ICommand[];
export declare const getModeCommands: () => ICommand[];
export declare const defaultTheme: import("@codemirror/state").Extension;
Development
npm run watch # Listen create type and .tsx files.
npm run start # Preview code example.
npm run doc
Related
- @uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
- @uiw/react-codemirror: CodeMirror component for React. @codemirror
- @uiw/react-monacoeditor: Monaco Editor component for React.
- @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
- @uiw/react-markdown-preview: React component preview markdown text in web browser.
Contributors
As always, thanks to our amazing contributors!
Made with action-contributors.
License
Licensed under the MIT License.
FAQs
A markdown editor with preview, implemented with React.js and TypeScript.
The npm package @uiw/react-markdown-editor receives a total of 6,264 weekly downloads. As such, @uiw/react-markdown-editor popularity was classified as popular.
We found that @uiw/react-markdown-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 05 Sep 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Announcing Precomputed Reachability Analysis in Socket
Socket’s precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
By Martin Torp - Jul 30, 2025
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
By Mix Irving, Alexandros Kapravelos, Eli Insua - Jul 30, 2025