hidekazu-konishi.com

Markdown Live Editor Tool - Real-time GFM Editor with Live Preview and Syntax Highlighting

First Published: 2026-04-02
Last Updated: 2026-04-02

This tool provides a full-featured Markdown editing experience with a real-time split-pane preview. Write Markdown on the left and instantly see the rendered output on the right with synchronized scrolling. Supports GitHub Flavored Markdown (GFM) including tables, task lists, strikethrough, and code blocks with syntax highlighting. All processing is performed entirely in your browser.

Features

• Real-time split-pane preview - See your rendered Markdown instantly as you type, with a resizable divider between editor and preview.
• GitHub Flavored Markdown (GFM) - Full support for tables, task lists, strikethrough, fenced code blocks, and more.
• Syntax highlighting - Code blocks are automatically highlighted with language-specific colors for JavaScript, Python, HTML, CSS, Bash, and many more languages.
• Synchronized scrolling - Editor and preview scroll positions stay in sync for seamless editing of long documents.
• Auto-save to browser storage - Your work is automatically saved to localStorage with up to 10 version snapshots.
• Document outline - Auto-generated clickable table of contents from your headings for easy navigation.
• Template snippets - Quick-start templates for articles, READMEs, meeting notes, and API documentation.
• Formatting toolbar - One-click buttons for bold, italic, headings, links, images, code blocks, tables, lists, and more.
• Keyboard shortcuts - Power-user shortcuts for common formatting operations.
• Zen mode - Distraction-free fullscreen editing experience.
• Multiple export formats - Download as .md or standalone .html file, or copy Markdown/HTML to clipboard.
• Drag and drop import - Drop a .md or .txt file directly onto the editor to load it.
• Real-time statistics - Word count, character count, line count, and estimated reading time.
• Responsive design - On mobile devices, editor and preview switch to a tab-based layout.
• 100% client-side - All processing happens in your browser. No data is ever sent to a server. Works offline once loaded.

How to Use

1. Type or paste Markdown in the left editor pane. The preview updates in real-time on the right.
2. Use the toolbar buttons to insert formatting (bold, italic, headings, links, tables, etc.) or use keyboard shortcuts.
3. Click the Templates dropdown to load a pre-built document structure.
4. Drag the center divider to adjust the editor/preview ratio.
5. Toggle Sync to enable/disable synchronized scrolling between panes.
6. Click Outline to show a navigable table of contents from your headings.
7. Click Zen for distraction-free fullscreen editing (press Escape to exit).
8. Import existing .md files by clicking Import .md or by dragging a file onto the editor.
9. Export your work using Export .md (Markdown file), Export HTML (standalone HTML), or the copy buttons.
10. Your work is automatically saved to browser storage and will be restored when you return.

Keyboard Shortcuts

• Ctrl+B (Cmd+B on Mac) - Bold
• Ctrl+I (Cmd+I on Mac) - Italic
• Ctrl+K (Cmd+K on Mac) - Insert Link
• Ctrl+E (Cmd+E on Mac) - Inline Code
• Ctrl+Shift+X (Cmd+Shift+X on Mac) - Strikethrough
• Ctrl+S (Cmd+S on Mac) - Save to browser storage

Important Notes

• Auto-save uses your browser's localStorage, which may be cleared if you clear browser data.
• For important documents, always export and save a copy using the Export buttons.
• The tool works completely offline once the page is loaded - you can disconnect from the internet and continue editing.
• This tool is distinct from the Markdown HTML Converter Tool which focuses on batch conversion between Markdown and HTML.