Typemark

Typemark is a lightweight React Markdown editor component built with TypeScript.
It allows developers to easily build a Markdown editing experience with simple command handling — no dependencies other than react and react-dom.

🤞 Here is a quick Demo...

---

🚀 Features

• ⚛️ React 17, 18, 19 support
• ✨ Simple command-based API
• 🧩 Easily extendable command map
• 💅 Auto-resizing textarea
• ✅ Written in TypeScript

---

Installation

npm install typemark

Uses

import { useState } from "react";
import { useEditor, EditorElement, Bold, Italic, Code, Heading1 } from "typemark";

export default function TypeMark() {
  const [value, setValue] = useState<string>('')

  // Create the editor
  const editor = useEditor({
    commandMap: { Bold, Italic, Code, Heading1 },
  });

  return (
    <div className='container'>
      <h3>Typemark demo</h3>

      <div>
        <button onClick={async () => await editor.command.execute("Heading1")}>H1</button>
        <button onClick={async () => await editor.command.execute("Bold")}>Bold</button>
        <button onClick={async () => await editor.command.execute("Italic")}>Italic</button>
        <button onClick={async () => await editor.command.execute("Code")}>Code</button>
      </div>

      <EditorElement
        className=""
        editor={editor}
        value={value}
        onChange={e => setValue(e.target.value)} />
    </div>
  )
}

API Reference

useEditor(options)

Creates a new editor instance.

Params:

• commandMap: An object of available commands (Bold, Italic, Code, etc.)

Returns:

• ref: Ref to the textarea
• textController: Internal controller for managing textarea content
• command: The command executor

<EditorElement />

A resizable <textarea> component connected to the editor instance.

Props:

• editor: The result from useEditor & All native <textarea> props (e.g. value, onChange)

Custom Commands

You can define your own commands by extending the Command interface.

Coming soon: A full guide on building custom commands.

Credits

This package is based on the open-source react-mde by Andre Pena.

Upgraded and maintained by Coding Samrat.