Skip to content
inkroom inkroom

Getting started

Install

Terminal window
npm i @inkroom/editor        # pnpm add / yarn add work too

Five lines

import { Editor } from "@inkroom/editor";
import "@inkroom/editor/style.css";


const editor = new Editor({ el: document.querySelector("#editor") });
console.log(editor.getMarkdown());

That’s a complete editor: toolbar, table editor, link/image dialogs, slash menu (/), bubble menu, WYSIWYG ⇄ markdown switch, dark mode, word count.

The options you’ll actually use

const editor = new Editor({
  el,
  initialValue: "# Hello",
  initialMode: "wysiwyg",          // or "markdown"
  height: "560px",                  // or "auto"
  placeholder: "Start writing…",
  theme: "auto",                    // "light" | "dark" | "auto"
  language: "ko",                   // en tr ko ja zh de fr es pt ar
  onChange: (ed) => save(ed.getMarkdown()),
  onUploadImage: async (file) => {
    const { url } = await api.upload(file);
    return url;                     // omit the hook → base64 fallback
  },
});

Reading & writing content

editor.getMarkdown();                          // clean GFM
editor.getMarkdown({ normalize: true });       // canonical form (see round-trip.md)
editor.setMarkdown("## replaced");
editor.getHTML();                              // deterministic render, SSR-safe
editor.getJSON();                              // ProseMirror document JSON
editor.setMode("markdown");                    // cursor survives the switch
editor.on("change", () => {});
editor.destroy();

Frameworks

React — @inkroom/react

import { InkroomEditor } from "@inkroom/react";
import "@inkroom/editor/style.css";


<InkroomEditor defaultValue="# Hi" height="500px"
  onChange={(md) => setValue(md)} onReady={(ed) => (ref.current = ed)} />

Vue 3 — @inkroom/vue

<script setup>
import { InkroomEditor } from "@inkroom/vue";
import "@inkroom/editor/style.css";
const markdown = ref("# Hi");
</script>


<template>
  <InkroomEditor v-model="markdown" theme="auto" height="500px" />
</template>

Plugins

import { Editor } from "@inkroom/editor";
import { codeHighlightPlugin } from "@inkroom/plugin-code";
import { mathPlugin } from "@inkroom/plugin-math";       // + `npm i katex`
import { mermaidPlugin } from "@inkroom/plugin-mermaid"; // + `npm i mermaid`
import "@inkroom/plugin-code/highlight.css";
import "katex/dist/katex.min.css";


new Editor({ el, plugins: [codeHighlightPlugin(), mathPlugin(), mermaidPlugin()] });

KaTeX and Mermaid are lazy-loaded on first use — your initial bundle doesn’t pay for them.

Coming from TOAST UI Editor?

One line: @inkroom/toast-compat. Run npx inkroom-migrate-toast for the guided version.