llm-in-text/milkdown-docs/guide/getting-started.md

Getting Started with Milkdown

Milkdown is a powerful WYSIWYG markdown editor that combines the simplicity of markdown with the flexibility of a modern editor. It's designed to be lightweight yet extensible, making it perfect for both simple and complex editing needs.

Quick Start

The fastest way to get started is using @milkdown/crepe:

npm install @milkdown/crepe

import { Crepe } from "@milkdown/crepe";
import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";

const crepe = new Crepe({
  root: "#app",
  defaultValue: "Hello, Milkdown!",
});

crepe.create();

::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/editor-crepe"}

Core Concepts

Milkdown consists of two main parts:

1. Core Package (@milkdown/core)

   • Plugin loader
   • Internal plugins

2. Additional Plugins

   • Syntax support
   • Commands
   • UI components
   • Custom features

This modular architecture allows you to enable or disable features as needed, from basic markdown support to advanced features like tables, LaTeX equations, and collaborative editing.

Key Features

• 📝 WYSIWYG Markdown - Write markdown in an elegant way
• 🎨 Themable - Create your own theme and publish it as an npm package
• 🎮 Hackable - Create your own plugin to support your awesome idea
• 🦾 Reliable - Built on top of prosemirror and remark
• ⚡ Slash & Tooltip - Write faster than ever, enabled by a plugin
• 🧮 Math - LaTeX math equations support via math plugin
• 📊 Table - Table support with fluent ui, via table plugin
• 🍻 Collaborate - Shared editing support with yjs
• 💾 Clipboard - Support copy and paste markdown, via clipboard plugin
• 👍 Emoji - Support emoji shortcut and picker, via emoji plugin

Tech Stack

Milkdown is built on top of these powerful libraries:

• Prosemirror - A toolkit for building rich-text editors on the web
• Remark - Markdown parser done right
• TypeScript - For type safety and better developer experience

Creating Your First Editor

Milkdown provides two distinct approaches to create an editor, each suited for different needs:

1. 🍼 Using @milkdown/kit (Build from Scratch)

This approach gives you complete control over your editor. Use this if you want to:

• Build a custom editor from the ground up
• Have full control over which features to include
• Create a highly customized editing experience
• Integrate with specific frameworks or requirements

First, install the required packages:

npm install @milkdown/kit

Create a basic editor with commonmark syntax:

import { Editor } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
// This is the must have css for prosemirror
import "@milkdown/kit/prose/view/style/prosemirror.css";

Editor.make().use(commonmark).create();

::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/vanilla-commonmark"}

Add undo & redo support:

import { Editor } from "@milkdown/kit/core";
import { history } from "@milkdown/kit/plugin/history";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import "@milkdown/theme-nord/style.css";

const milkdown = Editor.make()
  .config(nord)
  .use(commonmark)
  .use(history)
  .create()
  .then(() => {
    console.log("Editor created");
  });

// To destroy the editor
milkdown.destroy();

Note

: <Mod> is <Cmd> for macOS and <Ctrl> for other platforms.

2. 🥞 Using @milkdown/crepe (Ready to Use)

This is the quickest way to get started with a fully-featured editor. Use this if you want to:

• Get up and running quickly
• Have a well-designed editor out of the box
• Focus on content rather than configuration
• Have a production-ready solution with minimal setup

npm install @milkdown/crepe

import { Crepe } from "@milkdown/crepe";
import "@milkdown/crepe/theme/common/style.css";
/**
 * Available themes:
 * frame, classic, nord
 * frame-dark, classic-dark, nord-dark
 */
import "@milkdown/crepe/theme/frame.css";

const crepe = new Crepe({
  root: "#app",
  defaultValue: "Hello, Milkdown!",
});

crepe.create().then(() => {
  console.log("Editor created");
});

// To destroy the editor
crepe.destroy();

::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/editor-crepe"}

Next Steps

• Learn more about overview
• Explore available plugins
• Check out theming

🍼 Fun fact: This documentation is rendered by Milkdown itself!