Getting started
April 18, 2026 · View on GitHub
Prerequisites
- Node.js ≥ 20 and npm ≥ 10.
- Windows, macOS, or Linux.
Install
From the repo root:
npm install
npm run build
This builds all three packages: @mdv/core (parser + renderer), @mdv/cli (mdv command), and mdv-vscode (editor extension).
The mdv binary isn't installed globally yet; invoke it with:
node packages/mdv-cli/dist/index.js <command> [args]
Or add a convenience alias:
# bash / zsh
alias mdv="node $PWD/packages/mdv-cli/dist/index.js"
# PowerShell
function mdv { node D:\mdv\packages\mdv-cli\dist\index.js @args }
Your first .mdv file
Save this as hello.mdv:
---
title: Hello MDV
theme: minimal
---
# Hello MDV
This is standard Markdown. Below is a chart, written as a fenced block:
```chart type=bar x=fruit y=count title="Favorite fruit"
fruit, count
Apple, 12
Banana, 8
Cherry, 5
```
And a KPI card:
```stat
label, value, delta
Survey responses, 25, +3
```
Render it
mdv render hello.mdv
# → writes hello.html next to the source
Open hello.html in any browser. It's a self-contained HTML file: SVG charts are inlined, CSS is inlined, no network requests.
Watch + live-reload
mdv preview hello.mdv --port 3000
Open http://localhost:3000. Edit hello.mdv in any editor — the browser reloads automatically. The server renders in memory; no file is written to disk.
Export a PDF
mdv export hello.mdv --pdf
# → writes hello.pdf next to the source (uses headless Chromium)
Edit in VS Code with side-by-side preview
Open the mdv-vscode folder in VS Code and press F5 — see the VS Code guide. Inside the dev window, open hello.mdv and press Ctrl+Shift+V.
Next steps
- Learn the full syntax.
- Browse the charts reference.
- Pick a theme and define some named styles.