MarkSight

Turn any Markdown document into an installable Claude Agent Skill. One click, in your browser. MarkSight is a free, open source Markdown editor whose core doubles as a remote MCP server that Claude Code can call directly. Live preview, GFM, Mermaid diagrams, and Markdown/HTML/PDF export come with it.

🔗 Live (no signup): marksight.laramateo.com · 🧩 One-click .skill export · 🔌 Built-in MCP server · 🔒 100% client-side

⭐ If MarkSight is useful to you, starring the repo helps others find it.

Quick start

Use it (nothing to install):

1. Open marksight.laramateo.com, write or paste Markdown, and press ⌘⇧K. An installable .skill bundle downloads immediately.

2. Or add MarkSight's MCP server to Claude Code and let Claude build and validate skills for you:

   claude mcp add --transport http marksight https://marksight.laramateo.com/api/mcp
   

   Then ask Claude to turn Markdown into a skill or convert it to HTML. Tools: create_skill, validate_skill, markdown_to_html, document_outline, document_metrics.

Want to run MarkSight locally or contribute? See Getting started.

About

Every README I've ever written started the same way: type some Markdown into GitHub's editor, click Preview, spot something broken, click back to Write, fix it, click Preview again. Write, preview, write, preview. Tiny friction, repeated a thousand times, stops being tiny. So I did the most programmer thing possible: I built my own editor.

MarkSight is the editor I wanted to exist: the preview lives right next to your words. No tabs, no round trips, everything rendering live as you type. I built it with React, Next.js, TypeScript, and CodeMirror, and obsessed over making it feel snappy. It runs entirely in your browser, with no account and no server-side storage: your document sits in localStorage, exports are generated on your machine, and your writing never leaves your device.

I could have kept it as a private little tool that solved a private little annoyance. Instead I made it open source, free for anyone to use, fork, break, and improve. That decision turned out to matter more than any feature I shipped. The longer version of that story is on my blog: Why I built an open source Markdown editor.

Features

• Live preview — CodeMirror editor with an instantly-rendered preview pane
• Smart toolbar — context-aware formatting that detects and toggles existing markdown
• Keyboard shortcuts — bold (⌘B), italic (⌘I), strikethrough (⌘U), link (⌘K), inline code (⌘`), headings (⌘⇧1–3), lists, and more
• Document outline — auto-generated, clickable heading navigation that scrolls the preview
• Export — download the raw Markdown source or styled HTML, print to PDF, or preview the HTML in a new tab; set a custom file name before exporting
• Skill Creator — package your document as an Agent Skill (⌘⇧K) that Claude and other AIs can receive: copy the generated SKILL.md or download a ready-to-install .skill bundle. Import existing skills from a .skill/.zip file or straight from GitHub-hosted marketplaces (like anthropics/skills), modify them, and re-export with bundled files preserved
• GitHub-flavored markdown — tables, task lists, strikethrough (via remark-gfm)
• Syntax highlighting — fenced code blocks rendered with Prism
• Mermaid diagrams — fenced mermaid blocks render as live SVG in the preview and exports, themeable per diagram via %%{init}%% directives or YAML frontmatter
• Light / dark theme — system-aware, persisted across sessions
• Local persistence — your document is saved to localStorage automatically

Keyboard Shortcuts

Note: On macOS, use ⌘ (Command). On Windows and Linux, use Ctrl.

Action	macOS	Windows / Linux
Bold	⌘ B	Ctrl + B
Italic	⌘ I	Ctrl + I
Strikethrough	⌘ U	Ctrl + U
Link	⌘ K	Ctrl + K
Inline Code	⌘ `	Ctrl + `
Heading 1	⌘⇧1	Ctrl+Shift+1
Heading 2	⌘⇧2	Ctrl+Shift+2
Heading 3	⌘⇧3	Ctrl+Shift+3
Unordered List	⌘ ⇧ L	Ctrl + Shift + L
Ordered List	⌘ ⇧ O	Ctrl + Shift + O

Editor Preview

Light Theme

Dark Theme

A fenced mermaid block renders as a diagram:

graph LR
  A[Type Markdown] --> B[Live Preview]
  B --> C{Export?}
  C -->|HTML| D[Styled HTML]
  C -->|PDF| E[Print-ready PDF]
  C -->|Markdown| F[.md file]

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗