@termaxjs/view-react

Interactive React Markdown & .todo studio, WYSIWYG editor, and scroll-synchronization components for Termax View.

Part of the Termax View engine family.

Components Included

• <MarkdownEditor> — Full studio editor with 4 modes (split, visual, source, live), slash command palette, and table controls.
• <MarkdownViewer> — High-performance rendered Markdown viewer.
• <TodoEditor> & <TodoViewer> — Interactive .todo task studio with 3-state checkbox toggling.
• <TableOfContents> — Dynamic outline drawer with active scroll tracking.

Installation

npm install @termaxjs/view-react @termaxjs/view-core @termaxjs/view-themes
# or
pnpm add @termaxjs/view-react @termaxjs/view-core @termaxjs/view-themes

Usage

import React, { useState } from 'react';
import { MarkdownEditor, TodoEditor } from '@termaxjs/view-react';
import '@termaxjs/view-themes/base.css';
import '@termaxjs/view-themes/github-dark.css';

export function App() {
  const [content, setContent] = useState('# Interactive Studio\n\nType `/` to insert blocks!');

  return (
    <div style={{ height: '700px' }}>
      <MarkdownEditor
        value={content}
        onChange={setContent}
        mode="split"
        theme="github-dark"
        options={{ highlight: true, math: true, mermaid: true }}
      />
    </div>
  );
}

License

Apache-2.0