Popular Text & Data tools

• JSON Repair ToolRepair and fix malformed JSON data from AI outputs, API responses, and copy-paste.
• jq Playground & Filter BuilderInteractive jq expression tester, filter builder, and JSON transformer powered by WebAssembly.
• Base64 Encode/DecodeEncode and decode Base64 strings, files, and data URIs instantly.
• CSV to JSONConvert CSV/TSV to JSON and JSON to CSV with type inference and multiple output formats.
• JSONL ConverterConvert between JSONL (JSON Lines / NDJSON) and standard JSON arrays with auto-detection.

How to Markdown Preview Online

1. 1

   Paste or type Markdown content directly into the left editor panel, or click the upload icon to ingest a .md, .markdown, or .txt file directly from your machine.

2. 2

   Choose your visual preview theme: GitHub Light for classic documentation, GitHub Dark for low-light code authoring, or Minimal for distraction-free typography.

3. 3

   Toggle advanced renderers according to your document requirements: enable KaTeX Math ($...$ and $$...$$), Mermaid visual diagrams, or GitHub emoji shortcodes (:rocket: → 🚀).

4. 4

   Experience instant live rendering as you edit, or disable "Live" mode to manually trigger unified AST recompilation with the ⌘↵ (Ctrl+Enter) keyboard shortcut.

5. 5

   Inspect document structural tabs: switch between "Preview" for rich styled HTML, "HTML" for raw semantic markup, "Stats" for word/character/reading metrics, "TOC" for interactive heading anchors, and "Lint" for syntax errors.

6. 6

   Review automated linting alerts to catch CommonMark hierarchy jumps (e.g. h1 directly to h3), unencoded URL spaces in links, and missing image alt attributes for accessibility.

7. 7

   Export your rendered document: copy clean semantic HTML with ⌘⇧H / ⌘⇧C, download as an .html file for publishing to CMS platforms, or create a gzip-compressed shareable URL for team reviews.

Markdown Preview Features

• ✓

  Unified Remark & Rehype Pipeline: Industry-standard abstract syntax tree (AST) compilation ensuring 100% adherence to GitHub Flavored Markdown (GFM) and CommonMark specifications.

• ✓

  Three Theme Modes: Precision GitHub Light, GitHub Dark, and Minimalist typography stylesheets matching developer documentation standards.

• ✓

  KaTeX Math & LaTeX Typesetting: Real-time client-side rendering for inline math ($E=mc^2$) and multiline display equations ($$...$$) without remote TeX server calls.

• ✓

  Mermaid Dynamic Diagrams: Native rendering of flowcharts, sequence diagrams, class models, Gantt charts, state diagrams, and entity-relationship models via fenced ```mermaid code blocks.

• ✓

  GitHub Emoji Shortcode Conversion: Automatic translation of 1,800+ standard emoji shortcodes (:sparkles:, :white_check_mark:, :warning:) into native Unicode glyphs.

• ✓

  YAML & TOML Frontmatter Parser: Extracts and isolates structured frontmatter metadata headers (title, date, author, tags, layout) from the rendered document body.

• ✓

  Automated Table of Contents (TOC): Recursively parses heading levels (h1–h6) and generates clickable, nested anchor links with collision-free slugified IDs.

• ✓

  Real-Time Markdown Linter: Scans AST for heading level hierarchy skips, missing image alt tags, consecutive blank lines, and whitespace formatting errors.

• ✓

  Document Analytics & Metrics: Real-time computation of total word count, visible character count, reading time (230 wpm standard), link counts, image counts, and table counts.

• ✓

  Multi-Language Syntax Highlighting: Highlight.js integration featuring auto-detection and language-specific token styling across 30+ programming languages.

• ✓

  Safe XSS DOM Sanitization: Built-in rehype-sanitize schema allows safe KaTeX spans and syntax classes while actively stripping malicious script injections and dangerous protocols.

• ✓

  Semantic HTML Export: Generates clean, W3C-compliant HTML5 output ready for static site generators (Next.js, Astro, Hugo, Jekyll) and headless CMS platforms.

• ✓

  Gzip-Compressed Shareable URLs: Encodes document state and Markdown content into compact shareable link parameters for seamless team collaboration.

• ✓

  Local File Import: Drag-and-drop or select any local .md, .markdown, or .txt file without uploading data to external servers.

• ✓

  100% Browser-Side Privacy: Complete Markdown parsing, KaTeX math rendering, and diagram synthesis run locally in browser memory with zero server telemetry.

• ✓

  Power User Keyboard Shortcuts: Accelerate authoring with ⌘↵ (Render), ⌘⇧P (Preview), ⌘⇧H (HTML Mode), ⌘⇧T (TOC View), ⌘⇧L (Lint View), and ⌘⇧C (Copy).

Supported Formats & Dialects

The Markdown Preview supports 6 syntax formats and dialects for accurate parsing and processing.

CommonMark Specification

The standardized, unambiguous Markdown specification defining strict rules for block structures, list nesting, indented code blocks, thematic breaks, and inline emphasis parsing.

GitHub Flavored Markdown (GFM / RFC 7763)

The de facto web development standard extending CommonMark with GFM tables (| a | b |), interactive task list checkboxes (- [x]), strikethrough (~~del~~), and URL autolinking.

Markdown with YAML/TOML Frontmatter

Document format featuring structured key-value metadata enclosed between triple dashes (---) or plus signs (+++), widely used by static site generators (Hugo, Jekyll, Astro, Next.js).

KaTeX / LaTeX Mathematical Markdown

Scientific typesetting syntax allowing inline expressions ($f(x) = \int_a^b x^2 dx$) and display math blocks ($$...$$) rendered to fast, accessible HTML and MathML.

Mermaid Text-to-Diagram Syntax

Declarative diagram syntax enclosed in ```mermaid code fences for building sequence diagrams, state machines, Git graphs, and flowcharts directly inside documentation.

MDX & Component-Driven Markdown

Modern documentation dialect embedding interactive JSX/React components within Markdown copy, bridging static technical documentation with live interactive UI widgets.

Frequently Asked Questions

How does the unified, remark, and rehype AST pipeline convert Markdown to HTML?

The conversion pipeline processes text through three distinct stages: 1) remark-parse ingests the raw Markdown string and tokenizes it into a Markdown Abstract Syntax Tree (MDAST); 2) remark plugins (remark-gfm, remark-math, remark-frontmatter, remark-emoji) augment and mutate the MDAST to handle tables, equations, and metadata; 3) remark-rehype transforms the MDAST into a Hypertext Abstract Syntax Tree (HAST); and 4) rehype plugins (rehype-katex, rehype-highlight, rehype-sanitize) apply mathematical styling, code coloring, and security filtering before rehype-stringify serializes the final clean HTML5 output.

What are the main differences between standard CommonMark and GitHub Flavored Markdown (GFM)?

Standard CommonMark defines a strict, unambiguous parsing grammar for core Markdown elements (headings, blockquotes, lists, emphasis, and basic links). GitHub Flavored Markdown (GFM) is a formal extension of CommonMark that adds essential developer primitives: pipe tables with column alignment (| :--- | :---: |), interactive task lists with checkbox states (- [ ] and - [x]), strikethrough formatting (~~text~~), autolink literals (e.g. https://wtool.dev auto-linking without brackets), and relaxed single-character spacing rules for list items.

How does rehype-sanitize protect against Cross-Site Scripting (XSS) when rendering Markdown?

When rendering user-supplied Markdown or HTML blocks, malicious actors might attempt script injection via <script> tags, <img onerror="..."> handlers, or javascript: URI schemes. DevFlow uses rehype-sanitize configured with a strict custom schema based on GitHub security standards. It strips arbitrary scripts, dangerous attributes, and non-whitelisted protocols while safely preserving syntax highlighting CSS classes (span.hljs-*), KaTeX mathematical markup (span.katex), SVG symbols, and GFM checkbox input controls.

How does KaTeX render LaTeX mathematical equations in the browser without server calls?

KaTeX is a high-performance JavaScript math typesetting library that compiles TeX math expressions directly into semantic HTML and MathML on the client side. By leveraging remark-math to identify single dollar delimiters ($...$) for inline equations and double dollar delimiters ($$...$$) for display equations, rehype-katex parses the formula tokens into structured DOM nodes styled with KaTeX web fonts. This executes entirely in browser memory with zero network latency.

How are Mermaid diagrams parsed and rendered from fenced code blocks?

Mermaid definitions are declared inside fenced code blocks tagged with the mermaid language specifier (```mermaid). The renderer intercepts these blocks during preview generation, extracts the declarative graph syntax (such as flowcharts, sequence diagrams, class hierarchies, or Gantt schedules), and invokes the client-side Mermaid parser to compute node coordinates and render responsive, vector-based SVG elements directly in the preview DOM.

What is YAML/TOML frontmatter and how does the previewer handle document metadata?

Frontmatter is a structured metadata block positioned at the very beginning of a Markdown file, delimited by triple dashes (---) for YAML or triple pluses (+++) for TOML. It is commonly used by static site generators (Next.js Contentlayer, Astro, Hugo, Jekyll) to define page titles, publication dates, author profiles, and taxonomy tags. DevFlow uses gray-matter and remark-frontmatter to isolate frontmatter fields into a structured metadata card while rendering only the clean document body below.

How does the automated Table of Contents (TOC) generator assign heading anchors and slug IDs?

The Table of Contents parser performs a linear scan over the document AST to identify all heading levels (h1 through h6) outside fenced code blocks. It extracts clean heading text and computes URL-safe slug identifiers (converting spaces to hyphens and removing punctuation). If duplicate heading names occur (such as multiple "Overview" or "Configuration" sections), the generator appends incremental numeric suffixes (e.g. overview-1, overview-2) to ensure collision-free anchor navigation.

What common syntax and accessibility issues does the real-time Markdown linter identify?

The Markdown linter audits your document structure against quality and accessibility best practices: 1) Heading Hierarchy: detects skipped heading levels (such as jumping directly from an h1 title to an h3 subsection), which violates WCAG accessibility criteria; 2) Image Alt Text: flags images lacking descriptive alt text needed by screen readers; 3) Broken Link URIs: identifies unencoded spaces or malformed relative paths in markdown links; and 4) Formatting Hygiene: highlights trailing whitespace and redundant consecutive blank lines.

Why do single line breaks not create a new line in standard Markdown, and how do you force one?

Under both CommonMark and original Gruber Markdown specifications, a single newline character within a paragraph is treated as soft whitespace. This design allows technical authors to wrap lines at 80 characters in code editors without creating unintended paragraph breaks. To create a forced line break (<br>), you must either end the line with two trailing spaces or use a backslash (\) before pressing enter. Alternatively, leaving a completely blank line starts a new paragraph (<p>).

How can you export and integrate rendered Markdown HTML into static site generators and CMS platforms?

DevFlow allows you to export rendered Markdown in multiple formats. You can click "HTML" to view and copy the raw, semantic HTML5 snippet with syntax-highlighted classes, or click "Download HTML" to obtain a standalone .html document. Because the HTML is sanitized and semantic, it can be pasted directly into headless CMS rich-text fields (WordPress, Strapi, Sanity), imported into static site pipelines (Astro, Next.js, Hugo), or sent via email templates with consistent cross-client typography.

Related Developer Tools

• HTML to MarkdownConvert HTML to Markdown with support for GFM, CommonMark, and Obsidian syntax.
• HTML FormatterFormat, minify, and validate HTML with attribute sorting and template support.
• HTML Entities Encoder/DecoderEncode and decode HTML entities with named, numeric, and hex modes.
• AI Token CounterCount tokens and estimate API costs for 100+ LLMs with exact BPE and provider tokenization.
• Text Diff CheckerCompare two text blocks and highlight exactly what changed.
• Git Conflict ResolverVisually resolve Git merge conflicts by picking current, incoming, or both versions.
• YAML ConverterConvert between JSON and YAML with validation, formatting, and multi-document support.
• TOML ConverterConvert between TOML and JSON formats with syntax validation, key sorting, and auto-direction detection.
• Text Case ConverterConvert text between 20+ case formats: camelCase, snake_case, kebab-case, Title Case, and more.
• Lorem Ipsum GeneratorGenerate placeholder text in multiple formats and styles instantly.
• JSON FormatterPrettify, minify, and validate JSON data instantly.
• Regex TesterTest, debug, and explain regular expressions with real-time match highlighting.