@termaxjs/view ⚡

Unified high-performance Markdown & .todo rendering engine, WYSIWYG live editor studio, LaTeX math, SVG diagrams, and themes for Web and Desktop.

Part of the Termax project suite alongside @termaxjs/editor and @termaxjs/web.

🚀 Key Features

• Zero Runtime Dependencies in Core — 0 external npm packages.
• Built-in LaTeX Math Formulas — Native compilation of $E=mc^2$ and $$\sum ...$$ without KaTeX.
• Built-in SVG Mermaid Diagrams — Direct compilation to crisp SVG elements (Flowcharts, Sequences, Pie charts) without Mermaid.js.
• Native .todo Plain-Text Task System — Line-oriented task parser with 3-state checkbox cycling ([ ] ➔ [>] ➔ [x]), priorities (A)–(D), due dates, and tags.
• WYSIWYG In-Place Studio Editor — 4 modes (split, visual, source, live) with Notion-style slash commands (Cmd+/), table controls, and bi-directional scroll sync.
• 9 Prebuilt CSS Themes — Driven by --tv-* design tokens.

📦 Installation

npm install @termaxjs/view
# or
pnpm add @termaxjs/view

💻 Quick Start

1. Unified Import

import { renderMarkdown, renderTodo } from '@termaxjs/view';

// Render Markdown with Math and Diagrams
const { html, warnings } = renderMarkdown(`
# Hello Termax View
$$E = mc^2$$
\`\`\`mermaid
graph TD
  A[Start] --> B[Fast DOM]
\`\`\`
`, {
  highlight: true,
  math: true,
  mermaid: true,
});

2. React Studio Components

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>
  );
}

🧩 Modular Subpackages

If you only need specific components, you can install the individual subpackages:

• @termaxjs/view-core — Zero-dependency core parser, AST, math, diagrams, .todo.
• @termaxjs/view-react — React viewer, editor, and TOC components.
• @termaxjs/view-themes — Pure CSS variables and themes.

📄 License

Apache-2.0