A local Markdown preview server enabling real-time document rendering, side-by-side editing, and rich text export to publishing platforms.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install claw-markdown-preview-skill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install claw-markdown-preview-skill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Claw Markdown Preview?
Claw Markdown Preview is a developer-centric rendering utility designed for integration with AI coding environments. Instead of manually exporting files or toggling layout viewers, this skill enables your assistant to display formatted Markdown documents directly inside your browser.
Running as a lightweight local Python HTTP service, the interface features 22 layout themes, 9 code-highlighting schemes, and a variety of preview configurations. It provides an integrated double-pane sync editor, local clipboard image pasting, and rich-text copying for publishing workflows.
Claw Markdown Preview Use Cases
- Immediate Layout Verification: Check rendering quality, tables, lists, and syntax highlights of AI-generated Markdown documents.
- Direct Rich-Text Copying: Export styled content directly to your clipboard for pasting on platforms like WeChat or blog hosts, converting local images to base64 format automatically.
- Dual-Pane Interactive Editing: Refine documents collaboratively with a side-by-side sync-scrolling editor.
- Simplified Local Media Assets: Save clipboard images directly to your local file path and insert standard Markdown image links.
How Claw Markdown Preview Works
- Environment & File Validation: The system verifies the existence of the targeted .md file and tests that the local Python server script is present and executable.
- Clean up Pre-existing Instances: Active preview processes from previous runs are terminated to prevent network port collision.
- Unbuffered Server Launch: The server initiates with unbuffered standard output to capture the assigned port dynamically.
- PID State Recording: The active process ID (PID) is identified using a network query and saved locally for process control.
- Automated Client Launch: The utility issues an OS-level command to open the preview portal in the user's default browser.
Claw Markdown Preview Setup
To clean up older services and launch the local preview application, execute the following commands:
# 1. Kill prior running processes
PID_FILE="/tmp/claw-markdown-preview.pid"
if [ -f "$PID_FILE" ]; then
OLD_PID=$(cat "$PID_FILE")
kill "$OLD_PID" 2>/dev/null || true
rm -f "$PID_FILE"
fi
pkill -f "preview_server.py" 2>/dev/null || true
# 2. Run preview server in the background
PYTHONUNBUFFERED=1 python3 scripts/preview_server.py --file "<MD_FILE_PATH>" --no-open --heartbeat-timeout 60
# 3. Detect port, record PID, and open browser (Example port: 8765)
PID=$(lsof -iTCP:8765 -sTCP:LISTEN -P -n -t 2>/dev/null | head -1)
echo "$PID" > /tmp/claw-markdown-preview.pid
open "http://127.0.0.1:8765"
Claw Markdown Preview Data Schema & Taxonomy
The preview script manages assets, configurations, and internal states according to the schema below:
| Item | Type | Description |
|---|---|---|
--file |
File Parameter | Target Markdown file to poll, render, and update. |
--port |
Network Property | Local port (defaults to 8765, auto-negotiates up to 20 alternate options if occupied). |
images/ |
Directory | Storage path for clipboard-pasted files, co-located with the parent Markdown directory. |
claw-markdown-preview.pid |
State Log | Temp process file to coordinate starting, killing, and monitoring the server process. |
Claw Markdown Preview Advanced Features
- Auto-Polling Hot Reload: Monitors local files for changes every 3 seconds to keep layouts refreshed during AI-generation steps.
- Base64 Image Inlining: Transforms local image assets into inline data strings to ensure styling is maintained during clipboard copying.
- Smart Heartbeat Monitor: Automatically terminates background tasks if browser connections are lost, utilizing a default 60-second threshold for AI agents.
- CodeMirror Integration: Includes developer-focused markdown text editing within the viewer itself.
- Extensible Integration Workspace: Coordinates with multi-agent setups to show the utility of Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
LegionSpace Version Checker
An Openclaw Skills utility that checks LegionSpace version availability across seven Chinese app stores and exports the latest results automatically.
step-parts
A precision skill for searching, validating, and pulling off-the-shelf catalog component STEP files directly into CAD workflows.
DXF Generation and Validation
An AI agent skill to programmatically generate, update, and validate 2D DXF drawings and CAD projections from Python sources.
TKSeller
TKSeller is an interactive automation skill designed to integrate custom TikTok seller SaaS platforms directly with messaging clients.
anymermaid
A professional tool to generate, validate, and render Mermaid syntax diagrams to SVG, PNG, and PDF formats using the mmdc CLI.
blooming-elf (绽放精灵)
An AI-powered gardening companion that automates watering reminders, maintains structured plant archives, and provides real-time health diagnostics.
Featured*
