Online Markdown Live Preview Editor

Online Markdown preview tool — edit on the left, see the rendered result on the right in real time. Built on react-markdown + remark-gfm, supports the full GitHub Flavored Markdown syntax (tables, task lists, strikethrough, autolinks, fenced code blocks). All rendering happens locally; content is never uploaded.

Markdown 预览

Name: Online Markdown Live Preview Editor
Author: PTBox

这是 H2 标题

支持加粗、斜体、~~删除线~~、行内代码 等基本语法。

列表

无序项目 1
无序项目 2
- 嵌套项
已完成的任务
未完成的任务

表格

工具	状态	备注
JSON 格式化	✓	支持宽松解析
Markdown 预览	✓	实时渲染
繁简转换	✓	OpenCC 词典

代码块

function hello() {
  console.log("Hello, PTBox!");
}

引用

Markdown 让写文档变得简单。

—— 任何一个写过 README 的程序员

链接 & 图片

PTBox 是一个程序员工具箱。

水平线

支持 GitHub Flavored Markdown，所有渲染在浏览器本地完成。

Usage

Edit on the left, see the rendered result on the right. Built on react-markdown + remark-gfm supporting GitHub Flavored Markdown (tables, task lists, strikethrough, autolinks, fenced code blocks).

Raw HTML is auto-escaped to prevent XSS. Large documents are rendered with useDeferredValue so typing stays smooth.

Use cases

README preview

Confirm the rendered look before pushing to GitHub.

Blog writing

Edit on the left, see the result on the right.

Pre-export check

Paste Markdown to confirm rendering before converting to PDF / HTML elsewhere.

Learning Markdown

Side-by-side source and rendering — fastest way to learn tables, task lists and code blocks.

FAQ

Which extensions are supported?

GitHub Flavored Markdown: tables, task lists [ ], strikethrough ~~, autolinks, fenced code blocks.

Does it render math or diagrams?

KaTeX / Mermaid aren't supported yet. May be added later.

Are raw HTML tags rendered?

No. HTML is auto-escaped and shown as text to prevent XSS.

Can I export to HTML?

Not as a one-click export yet. You can copy the rendered HTML from devtools.