@mdwrk/markdown-edit-in-renderer-react

In-place markdown block editing for React

This package keeps markdown in the rendered document flow, activates individual blocks in place, and emits full-document markdown updates.

Why

Use it when you want Typora-style authoring without splitting the document into a separate source-only surface.

What

• Rendered markdown with block activation.
• Source editor activation only where the user is editing.
• Integration with the MdWrk renderer and editor packages instead of a second parsing model.

Installation

Node.js 20.x through 22.x, matching the workspace engine contract in the root package manifest.

npm install @mdwrk/markdown-edit-in-renderer-react @mdwrk/markdown-renderer-react @mdwrk/markdown-editor-react

Usage

import { MarkdownEditInRenderer } from "@mdwrk/markdown-edit-in-renderer-react";
import "@mdwrk/markdown-renderer-react/styles/default.css";
import "@mdwrk/markdown-editor-react/styles/default.css";
import "@mdwrk/markdown-edit-in-renderer-react/styles/default.css";

export function DocumentEditor() {
  return (
    <MarkdownEditInRenderer
      defaultValue={"# Draft\n\nClick a block to edit it."}
      onChange={(markdown) => console.log(markdown)}
    />
  );
}

Related

• Packages index - family and package navigation
• Root README - repo overview