skills.rest
bearded-giant
bearded-giantCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mdlive

Serves markdown files as live-reloading HTML previews in the browser using mdlive.

Updated Jan 15, 2026
Search Tags:#documentation#markdown#mermaid#preview#browser#live reload#mdlive
One-click install
npx skills add https://github.com/bearded-giant/claude-code-config --skill mdlive-bearded-giant
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mdlive
Source: https://github.com/bearded-giant/claude-code-config/tree/main/skills/mdlive
Command: npx skills add https://github.com/bearded-giant/claude-code-config --skill mdlive-bearded-giant

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Reading raw markdown in a terminal makes it hard to review formatting, tables, and diagrams. This Skill renders markdown files as HTML in the browser with automatic reload on every edit, so you can verify the final rendered output while you write. ## Core Features & Use Cases - Live-reloading preview: Start a background mdlive server for a markdown file and see every edit reflected in the browser instantly. - Directory mode: Serve a whole folder of related markdown files with a collapsible tree sidebar for navigation, including nested subdirectories. - Mermaid diagram support: Render flowcharts, sequence diagrams, ER diagrams, and state diagrams directly in the preview. - Use Case: After drafting a multi-file design doc under docs/, ask for a preview and navigate the rendered pages in your browser while continuing to edit. ## Quick Start Ask the assistant to preview the markdown file you just wrote in the browser, for example by saying "preview plan.md with mdlive".

Frequently Asked Questions about mdlive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview a markdown file in the browser with live reload?▼

Run mdlive followed by the file path as a background task, such as mdlive plan.md. The browser opens automatically and reloads the rendered HTML every time the file is edited and saved.

How do I preview multiple markdown files at once?▼

Point mdlive at the parent directory instead of a single file, for example mdlive docs/. It renders a collapsible tree sidebar so you can navigate between all files, including nested subdirectories.

Does mdlive support Mermaid diagrams in markdown?▼

Yes, mdlive renders Mermaid diagrams including flowcharts, sequence diagrams, entity-relationship diagrams, and state diagrams. Mermaid is preferred over ASCII art for diagrams showing relationships and flow.

What happens if port 3000 is already in use?▼

mdlive automatically cycles to the next available port when 3000 is occupied, so no manual port checking or configuration is needed before starting the preview server.

How do I install mdlive if the command is not found?▼

Install mdlive with Cargo using cargo install mdlive, or build from source by cloning the repository and running cargo build --release. The Skill prompts you to choose between these two options.

Related Skills

Explore More Software Engineering Skills→
dragoscirjandragoscirjan

lang-md

Standardize Markdown formatting with Google style, Prettier, and markdown lint.

Community
Basic
RonanCodesRonanCodes

slides

Generate Marp-format slide decks from wiki content.

Community
Intermediate
nano-stepnano-step
3

mermaid-validator

Validate Mermaid diagram syntax in Markdown files using a Node.js script.

Official
Intermediate
xbg-solutionsxbg-solutions

firebase-hosting-basics

Deploy static sites and SPAs to Firebase Hosting with firebase-tools.

Official
Intermediate