Markon

Extensible rich text WYSIWYG editor & compiled markdown engine

Modern document authoring canvas with slash commands, floating bubble menus, math typesetting, and code syntax highlighting.

Interactive Preview

Architecture: Authoring & Publication Pipeline

Nofinite Markon provides an end-to-end publishing pipeline split across two complementary subsystems:

[Authoring Canvas]                [Compiled Document AST]              [Publication Engine]
  <MarkonEditor />  ─── Exports ───>  TipTap JSON AST   ─── Renders ───>  <MarkonRender />
(Slash commands, DND)                or Markdown String                 (Article, Newsroom, Docs)

1. Authoring Layer (MarkonEditor): A rich, keyboard-driven authoring canvas featuring Notion-style slash commands (/), gutter block drag handles (⋮⋮), interactive table pickers, and debounced draft auto-saving.
2. UI Publication Layer (MarkonRender): The visual presentation engine for compiled Markon JSON and Markdown documents. It transforms abstract ASTs into publication-grade editorial layouts (article, document, newsroom, minimal), generating automated sticky Table of Contents with scrollspy, compiling server-side KaTeX mathematics, and formatting author bylines and hero cover images.

Core Capabilities

• 4 Specialized Publication Layouts: Built-in responsive presentation modes for articles, technical documentation, press releases, and minimal embeds.
• Notion-Style Slash Commands (/): Type / anywhere on a blank line to open a floating command palette for headings, tables, callout blocks, code blocks, and math equations.
• Gutter Block Drag Handles: Hover handles for tactile drag-and-drop block reordering, selection, and contextual block transformations.
• Interactive Data Tables: 10×10 visual dimension picker, cell merging/splitting, and contextual table action toolbars.
• Pre-Rendered KaTeX Math: Math equations are compiled server-side into accessible SVG/HTML without requiring client-side KaTeX runtime scripts.
• Lowlight Syntax Highlighting: High-speed AST syntax highlighting across 16 programming languages with 1-click clipboard copy buttons.
• Draft Auto-Save & Recovery: Background debounced persistence with live status indicators (saving, saved, error) and crash recovery dialogs.

Basic Example

import React, { useState } from 'react';
import { MarkonEditor } from '@nofinite/markon/react';
import '@nofinite/nuicss/styles.css';

export default function DocumentEditor() {
  const [content, setContent] = useState('<h2>Project Vision</h2><p>Start writing with rich formatting...</p>');

  return (
    <div className="w-full max-w-3xl p-6 rounded-2xl border border-default bg-surface shadow-xs">
      <MarkonEditor
        content={content}
        onChange={setContent}
        slashCommands={true}
        dragHandle={true}
        placeholder="Type '/' for commands..."
      />
    </div>
  );
}

Documentation Directory

Publication & UI Renderer

• Markon Publication Renderer (MarkonRender) — The UI rendering engine for compiled Markon AST JSON: 4 layout modes, metadata, KaTeX, and SSR.
• Publication Production Examples — Production-ready examples for blogs, API handbooks, newsroom releases, and Next.js App Router Server Components.

Editor & Authoring Capabilities

• Slash Commands Palette — Keyboard-driven / command menu and custom action extensions.
• Block Drag Handles — Notion-style gutter drag handles and contextual block menus.
• Tables and Grids — Visual dimension picker, cell merging, and interactive table toolbars.
• Callouts & Collapsible Sections — 4 semantic alert boxes and toggle accordions.
• Media & File Uploads — Resizable images, video embeds, and downloadable file cards.
• Draft Auto-Save & Recovery — Debounced local persistence and crash recovery workflows.