npm Markdown 에디터 라이브러리 추천 - 용도별 정리

마크다운 에디터를 프로젝트에 넣으려고 npm 검색하면 선택지가 너무 많다. Toast UI, Tiptap, CodeMirror, Monaco... 다 써봤는데 용도가 다르다.

용도별로 정리해봤다.

WYSIWYG 에디터 (추천)

Toast UI Editor

가장 먼저 추천한다. 한국 회사(NHN)가 만들어서 한글 지원이 완벽하다.

npm install @toast-ui/react-editor

장점:

WYSIWYG 모드와 마크다운 모드 전환 가능
플러그인 풍부 (차트, 코드 하이라이팅, 색상 선택)
이미지 업로드 훅 제공
무료

import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

<Editor
  initialValue="# Hello"
  previewStyle="vertical"
  height="600px"
  initialEditType="markdown"
  useCommandShortcut={true}
/>

블로그 에디터, 게시판, 문서 관리 시스템 만들 때 바로 쓸 수 있다.

Tiptap

요즘 가장 핫한 에디터다. Notion 스타일 에디터 만들고 싶으면 이거.

npm install @tiptap/react @tiptap/starter-kit

장점:

Headless (UI를 완전히 내 맘대로)
Notion처럼 "/" 슬래시 커맨드 가능
Markdown 익스텐션 지원
협업 기능 지원 (유료)

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
})

<EditorContent editor={editor} />

커스터마이징이 필요하면 Tiptap이 최고다. 대신 직접 만들어야 할 게 많다.

MDXEditor

MDX 네이티브 지원이 필요하면 이거.

npm install @mdxeditor/editor

장점:

MDX 블로그에 최적화
WYSIWYG + 마크다운
React 컴포넌트를 마크다운에 넣을 수 있음

import { MDXEditor } from '@mdxeditor/editor'

<MDXEditor markdown="# Hello" />

Next.js + MDX 블로그 만들 때 좋다.

코드 에디터 스타일

CodeMirror 6

개발자 친화적인 에디터가 필요하면 이거.

npm install @uiw/react-codemirror

장점:

VSCode급 편집 기능
마크다운 하이라이팅
테마 풍부
경량

import CodeMirror from '@uiw/react-codemirror';
import { markdown } from '@codemirror/lang-markdown';

<CodeMirror
  value="# Hello"
  height="400px"
  extensions={[markdown()]}
/>

개발자 도구, 코드 스니펫 공유 사이트 만들 때 쓴다.

Monaco Editor

VSCode 실제 에디터다. 기능은 최고지만 무겁다.

npm install @monaco-editor/react

장점:

VSCode와 똑같은 경험
TypeScript 지원
강력한 IntelliSense

단점:

번들 크기 큼 (주의!)

import Editor from '@monaco-editor/react';

<Editor
  height="90vh"
  defaultLanguage="markdown"
  defaultValue="# Hello"
/>

온라인 IDE, 코드 에디터 플랫폼 만들 때만 쓴다.

미리보기만 필요하면

react-markdown

에디터는 필요 없고 마크다운 렌더링만 하면 되는 경우.

npm install react-markdown

장점:

가장 인기 있는 렌더러
경량
플러그인 (remark/rehype)
보안 (XSS 방지)

import ReactMarkdown from 'react-markdown'

<ReactMarkdown>
  # Hello
  
  This is **bold**
</ReactMarkdown>

블로그 포스트 보여주기, README 렌더링 같은 용도.

marked

react-markdown보다 더 빠르고 가볍다.

npm install marked

import { marked } from 'marked';

const html = marked.parse('# Hello');
<div dangerouslySetInnerHTML={{ __html: html }} />

SSR, 빌드 타임에 변환할 때 좋다.

경량 옵션

SimpleMDE

"그냥 빠르게 마크다운 에디터 하나만 넣고 싶어" 할 때.

npm install react-simplemde-editor

import SimpleMDE from 'react-simplemde-editor';
import "easymde/dist/easymde.min.css";

<SimpleMDE value={value} onChange={setValue} />

초경량. GitHub 스타일. 바로 쓸 수 있다.

용도별 추천

블로그/문서 사이트:

에디터: Toast UI Editor
렌더러: react-markdown

Notion 클론:

에디터: Tiptap
렌더러: 내장

개발자 도구:

에디터: CodeMirror 6
렌더러: react-markdown

빠른 프로토타입:

에디터: SimpleMDE
렌더러: marked

MDX 블로그:

에디터: MDXEditor
렌더러: next-mdx-remote

실전 구현 예시

Toast UI Editor + react-markdown 조합:

'use client'

import { useState, useRef } from 'react'
import { Editor } from '@toast-ui/react-editor'
import ReactMarkdown from 'react-markdown'
import '@toast-ui/editor/dist/toastui-editor.css'

export default function MarkdownEditor() {
  const [markdown, setMarkdown] = useState('')
  const editorRef = useRef<Editor>(null)

  const handleChange = () => {
    const instance = editorRef.current?.getInstance()
    setMarkdown(instance?.getMarkdown() || '')
  }

  return (
    <div className="grid grid-cols-2 gap-4">
      <div>
        <h2>편집</h2>
        <Editor
          ref={editorRef}
          initialValue="# Hello"
          previewStyle="vertical"
          height="600px"
          onChange={handleChange}
        />
      </div>
      
      <div>
        <h2>미리보기</h2>
        <div className="prose">
          <ReactMarkdown>{markdown}</ReactMarkdown>
        </div>
      </div>
    </div>
  )
}

왼쪽 편집, 오른쪽 미리보기. 실시간 동기화.

최종 추천

1순위: Toast UI Editor

한글 지원 완벽하고, 기능 풍부하고, 무료다. 대부분 프로젝트에서 이거면 충분하다.

2순위: Tiptap

커스터마이징 많이 해야 하면 Tiptap. Notion 스타일 만들 수 있다.

3순위: CodeMirror 6

개발자 친화적인 UI 필요하면 CodeMirror.

렌더링만: react-markdown

에디터 없이 마크다운만 보여주면 되는 경우.

선택 기준

쉽고 빠르게: Toast UI Editor
완전한 커스터마이징: Tiptap
개발자 도구: CodeMirror 6
초경량: SimpleMDE
MDX 블로그: MDXEditor

처음 시작이면 Toast UI Editor부터 써보는 걸 추천한다. 설치하고 5분이면 작동한다.