@autokinesis/react-markdown-editor

React markdown editor + preview components with light/dark themes, syntax highlighting, admonitions, and customizable styles.

Install

npm install @autokinesis/react-markdown-editor

Peer dependency:

• react >= 18

Exports

• Editor (alias of MarkdownEditor): combined toolbar + textarea
• EditorToolbar (alias of MarkdownEditorToolbar): standalone toolbar
• EditorTextarea (alias of MarkdownEditorTextarea): standalone textarea
• Preview: markdown renderer

Types:

• MarkdownTheme
• MarkdownEditorProps
• MarkdownEditorToolbarProps
• MarkdownEditorTextareaProps
• PreviewProps

Quick Start (Combined Editor + Preview)

import { useState } from 'react'
import { Editor, Preview } from '@autokinesis/react-markdown-editor'

export default function Page() {
  const [markdown, setMarkdown] = useState('# Hello')

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <Editor value={markdown} onChange={setMarkdown} theme="dark" />
      <Preview doc={markdown} theme="dark" />
    </div>
  )
}

Independent Composition (Toolbar and Textarea Separately)

Use this when your app header/layout controls where the toolbar should render.

import { useRef, useState } from 'react'
import { EditorToolbar, EditorTextarea, Preview } from '@autokinesis/react-markdown-editor'

export default function ComposedEditor() {
  const [markdown, setMarkdown] = useState('')
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  return (
    <>
      <EditorToolbar
        value={markdown}
        onChange={setMarkdown}
        targetRef={textareaRef}
        theme="dark"
      />

      <EditorTextarea
        ref={textareaRef}
        value={markdown}
        onChange={setMarkdown}
        theme="dark"
        placeholder="Write markdown..."
      />

      <Preview doc={markdown} theme="dark" />
    </>
  )
}

Standalone Preview

import { Preview } from '@autokinesis/react-markdown-editor'

<Preview doc={markdownText} theme="light" />

Theme

theme is supported on editor and preview components:

• light
• dark

Admonition Syntax

Supported admonition input format is generic tag syntax only:

<admonition kind="warning" type="block" title="Warning">
Plain text with **bold** and `inline code`.
</admonition>

<admonition kind="risk" type="outline" title="Risk">
- Full markdown works in outline mode
- Lists, tables, fenced code blocks, etc.
</admonition>

Supported kind values:

• warning
• tip
• note
• critical
• risk
• ai-consideration
• assumption
• decision
• dependency

Supported type values:

• block
• outline

Styling and Customization

You can customize appearance by:

1. Passing className and scoping overrides:

<Preview doc={doc} className="my-preview" theme="dark" />

.my-preview .ak-codeblock__lang {
  border-radius: 999px;
}

2. Overriding CSS variables (--ak-*) at wrapper level.

3. Targeting package classnames directly (examples):

• .ak-editor__toolbar
• .ak-editor__textarea
• .ak-markdown
• .ak-admonition
• .ak-codeblock
• .ak-codeblock__lang

Notes

• Syntax highlighting is enabled for fenced code blocks.
• Language pill appears only when a language is explicitly provided in fenced blocks.
• Unknown/blocked image URLs render an inline fallback label.