MyDevTools
EN

Markdown Preview

Write Markdown with a live HTML preview side by side: GitHub Flavored tables, task lists, strikethrough. Copy sanitized HTML or download an .html file.

Your inputs and files stay in your browser

Write or paste Markdown here, or load an example.

Preview

The rendered preview appears here as you type.

On this page

Type Markdown on one side and see the rendered result on the other as you type — handy for drafting READMEs, issue comments, documentation and release notes, then exporting them as HTML.

Detailed Functionality

Rendering uses the marked library with GitHub Flavored Markdown: tables, task lists - [x], strikethrough ~~text~~, fenced code blocks and automatic links for bare URLs. A single line break becomes <br>, as in GitHub comments, so lines are not merged into one paragraph. Code blocks are shown in a monospace font without syntax coloring.

Raw HTML inside the Markdown is sanitized: scripts, iframes, forms, styles and event attributes such as onclick are removed and javascript: links are blocked, while harmless tags like <kbd>, <details> or <sub> are kept. Links open in a new tab. In the preview, headings are shown one level lower so they do not compete with the page title; Copy HTML and Download HTML keep the original <h1>–<h6>.

The toolbar inserts bold, italic, heading, link, image, inline code and list syntax at the cursor, and Sync Scroll keeps both panes at the same relative position. Everything runs in the browser and the tool does not save your text — copy it before closing the page.

Practical Examples

Task list: - [x] tests and - [ ] docs render as a checked and an unchecked checkbox.

Line breaks: the two lines line one and line two ~~old~~ become <p>line one<br>line two <del>old</del></p>.

Table: the rows | A | B |, |---|---|, | 1 | 2 | become an HTML table with a header row.

Unsafe HTML: <script>alert(1)</script><b onclick=x>hi</b> is exported as just <b>hi</b>.

How to Use This Tool

  1. Write Markdown

    Type in Markdown Editor. A sample document is shown on first open; press Clear to start from an empty page.

  2. Format with the toolbar

    Select text and use the formatting buttons (bold, italic, heading, link, image, code, list) to insert the syntax.

  3. Check the preview

    The Preview pane updates on every keystroke; turn Sync Scroll on to scroll both panes together.

  4. Export

    Use Copy HTML or Copy Markdown, or Download HTML to save markdown-preview.html with basic styles.

Tips and Best Practices

  • Relative image paths such as img/logo.png cannot be resolved here; use full https:// URLs to see images.
  • Images from other sites are loaded by your browser directly from those servers.
  • GitHub-only extras — @mentions, emoji shortcodes like :smile:, Mermaid diagrams and math — are shown as plain text.
  • Inline HTML such as <kbd>Ctrl</kbd> or <details> works, but style and class attributes are stripped.
  • The downloaded file is a standalone page with light styles that is ready to print or attach.