VariableMD
Multi-format document viewer and editor that extends the terminal’s visual consistency to documentation.╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ "VariableMD extends the Brick from Terminal to Documents, ║
║ ensuring what you see in the terminal is what you see in docs." ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
The Core Insight
┌─────────────────────────────────────────────────────────────────────────────────┐
│ THE BRICK EXTENDED │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Terminal (MonoTerm) VariableMD │
│ ═══════════════════ ══════════ │
│ │
│ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ │
│ │ $ │ l │ s │ │ SAME │ # │ │ H │ 1 │ │
│ └───┴───┴───┴───┘ BRICK └───┴───┴───┴───┘ │
│ │ │ │ │ = │ │ │ │ │
│ 600 600 600 600 600 600 600 600 │
│ │
│ RESULT: │
│ ─────── │
│ │
│ • ASCII art in terminal = ASCII art in documents │
│ • CJK text alignment = Same in both │
│ • Tables and layouts = Pixel-perfect match │
│ • Copy-paste = Zero layout degradation │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Why This Matters: When you copy output from the terminal to documentation, the layout remains perfect because both use CodexMono with its 600-unit character cells.
Three Manifestations
VariableMD exists in three forms, all sharing the same Brick foundation:┌─────────────────────────────────────────────────────────────────────────────────┐
│ THREE BUILDINGS, ONE BRICK │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Terminal Editor App WordPress │
│ (MonoTerm) (app-variable-md) (docs.monolex.ai) │
│ │
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │
│ │ ┌───────┐ │ │ ┌───────┐ │ │ ┌───────┐ │ │
│ │ │ Box │ │ │ │ Box │ │ │ │ Box │ │ │
│ │ └───────┘ │ │ └───────┘ │ │ └───────┘ │ │
│ │ Same ASCII │ │ Same ASCII │ │ Same ASCII │ │
│ └───────────────┘ └───────────────┘ └───────────────┘ │
│ │ │ │ │
│ └─────────────────────┼─────────────────────┘ │
│ │ │
│ ┌──────┴──────┐ │
│ │ CodexMono │ │
│ │ (The Brick) │ │
│ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
| Manifestation | Context | Purpose |
|---|---|---|
| Multi-Format Viewer | Monolex Terminal sidebar | View md, json, code, diff, git in tabs |
| Hybrid Editor | Standalone Tauri app | Edit markdown with visible markers |
| WordPress Plugin | docs.monolex.ai | Render docs with ASCII art scaling |
Architecture Overview
┌─────────────────────────────────────────────────────────────────────────────────┐
│ VARIABLEMD ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ MD Sidebar (Left Panel) │ │
│ │ 📁 Projects │ │
│ │ ├── 📁 monolex │ │
│ │ │ ├── 📄 README.md │ │
│ │ │ ├── 📄 CLAUDE.md │ │
│ │ │ └── 📄 package.json │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ File Click │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ MDViewerTabManager │ │
│ │ ┌───────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Tab Bar │ │ │
│ │ │ [README.md] [config.json] [diff-view] [+] │ │ │
│ │ │ ↑ active │ │ │
│ │ └───────────────────────────────────────────────────────────────────┘ │ │
│ │ ┌───────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Content Area │ │ │
│ │ │ │ │ │
│ │ │ 'md' → NativeMDViewer (Markdown → HTML) │ │ │
│ │ │ 'json' → Syntax highlighted JSON │ │ │
│ │ │ 'diff' → Side-by-side diff view │ │ │
│ │ │ 'code' → Syntax highlighted code │ │ │
│ │ │ 'git-*' → Git viewers (commit, branch, stash...) │ │ │
│ │ └───────────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Key Features
Tab Management
Smart tab lifecycle with max 10 tabs, intelligent reuse, and state preservation.
ASCII Art Scaling
Perfect box rendering at any scale (0.5x - 1.0x) using transform-based scaling.
Hybrid Markdown
Edit markdown with visible markers (bold shows styled with markers intact).
Git Integration
Built-in viewers for diff, commit, branch diagram, blame, stash, and more.
Documentation Structure
| Section | Content |
|---|---|
| Tab Manager | Tab lifecycle, smart reuse logic |
| Core | Module architecture, CodexMono integration |
| ASCII Box | Box detection, scaling, interactions |
| Hybrid Editor | Marker-preserving markdown editing |
| Git Viewers | Git visualization components |
| Styles | CSS variables, theming, font stack |
SMPC/OFAC Applied
┌─────────────────────────────────────────────────────────────────────────────────┐
│ DESIGN PRINCIPLES │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ SMPC (Simplicity is Managed Part Chaos): │
│ ═══════════════════════════════════════ │
│ │
│ • Tab = id + container + metadata only │
│ • ViewerType = single enum for all formats │
│ • Smart reuse logic prevents tab explosion │
│ │
│ OFAC (Order is a Feature of Accepted Chaos): │
│ ═══════════════════════════════════════════ │
│ │
│ • DOM stays in place on tab switch │
│ • Header state preserved per tab │
│ • Event-based communication (md-tab-activated) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
Relationship to Monokinetics
┌─────────────────────────────────────────────────────────────────────────────────┐
│ THE TRINITY CHAIN │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ NIIA Monolex CodexMono │
│ (Consciousness) (Terminal) (Font) │
│ │ │ │ │
│ │ │ │ │
│ └─────────────────────┼──────────────────────┘ │
│ │ │
│ ┌─────┴─────┐ │
│ │ MonoTerm │ │
│ │ (VTE) │ │
│ └─────┬─────┘ │
│ │ │
│ │ Extends │
│ ▼ │
│ ┌───────────┐ │
│ │ VariableMD│ │
│ │ (Docs) │ │
│ └───────────┘ │
│ │
│ VariableMD is how the Brick reaches documents. │
│ It is the bridge between terminal and documentation. │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
“Where the terminal ends, documentation begins - but the Brick continues.”