> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# VariableMD Overview
> The Brick Extended to Documents - Unified document viewing and editing with CodexMono alignment
# 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
Smart tab lifecycle with max 10 tabs, intelligent reuse, and state preservation.
Perfect box rendering at any scale (0.5x - 1.0x) using transform-based scaling.
Edit markdown with visible markers (**bold** shows styled with markers intact).
Built-in viewers for diff, commit, branch diagram, blame, stash, and more.
***
## Documentation Structure
| Section | Content |
| ----------------------------------------------------- | ------------------------------------------ |
| [Tab Manager](/variablemd/tab-manager/lifecycle) | Tab lifecycle, smart reuse logic |
| [Core](/variablemd/core/architecture) | Module architecture, CodexMono integration |
| [ASCII Box](/variablemd/ascii-box/detection-scaling) | Box detection, scaling, interactions |
| [Hybrid Editor](/variablemd/hybrid-editor/philosophy) | Marker-preserving markdown editing |
| [Git Viewers](/variablemd/git-viewers/viewertypes) | Git visualization components |
| [Styles](/variablemd/styles/css-system) | 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."*