Help › Markdown editor and live preview

Markdown editor and live preview

Writing long-form prose, technical chapters, or blog articles in Markdown gives you speed, clarity, and portable plain text without proprietary lock-in. However, writing without a preview can lead to formatting surprises, broken table pipes, unclosed code fences, and missed heading levels.

The Markdown editor and live preview tool provides a full-page, side-by-side editing environment designed for books, manuscripts, and documentation. It runs entirely inside your browser with zero latency, zero cloud uploads, and instant feedback.

Workspace layouts and view modes

The editor adapts to your workflow with three view modes and a distraction-free fullscreen setting:

• Split View: The default layout places the monospace editor on the left and the rendered HTML preview on the right. Both panes can scroll in sync so you always see what you are editing.
• Editor Only: Hides the preview pane, maximizing screen space for typing long passages without visual distraction.
• Preview Only: Displays the final rendered manuscript in a clean typography layout, perfect for proofreading before export.
• Fullscreen Mode: Expands the entire editor across your full browser window, hiding navigation and headers for focused writing sessions.

You can switch between these views at any time using the mode buttons in the top toolbar.

Formatting toolbar and keyboard shortcuts

Above the editing pane, the quick-access toolbar lets you apply Markdown formatting with a single click or keyboard shortcut:

Tab key indentation

Unlike standard web textareas where pressing the <kbd>Tab</kbd> key jumps focus out of the input, this editor intercepts the Tab key and inserts two spaces ( ), allowing you to indent lists, nested bullets, and code blocks smoothly.

GitHub Flavored Markdown (GFM) support

The live preview engine renders standard CommonMark alongside GitHub Flavored Markdown (GFM) extensions:

1. Tables

Create structured comparison tables with pipe separators and alignment markers:

| Feature | Basic | Professional |
|:---|:---:|---:|
| Page Export | Yes | Unlimited |
| High-Res PDF | Included | Print-Ready |
| Delivery Time | Instant | Instant |

Colon markers control column alignment: :--- for left-aligned, :---: for centered, and ---: for right-aligned.

2. Interactive task checklists

Track writing milestones with checkboxes:

- [x] Draft introductory chapter
- [x] Add code listings and diagrams
- [ ] Review copy with proofreader

3. Syntax-styled code blocks with copy button

Fenced code blocks with language identifiers display with a dedicated header, language badge, and a one-click copy button:

```python
def publish_book(title: str, pages: int) -> str:
    return f"Published {title} ({pages} pages)"
```

Live manuscript statistics

As you type, real-time counters compute the key metrics of your manuscript:

• Word count: Counts alphanumeric tokens, treating hyphenated terms (e.g., state-of-the-art) and apostrophes (don't) as single words while omitting Markdown syntax characters (#, **, >).
• Characters: Displays total characters including spaces, as well as character count without whitespace.
• Paragraphs: Detects distinct text blocks separated by blank lines.
• Estimated reading time: Calculated using the standard adult silent reading rate of 230 words per minute.

Local file management and autosave

Auto-saving to browser storage

The editor automatically persists your current draft to browser local storage (localStorage) as you write. If you accidentally close the tab, refresh the page, or lose power, your work is restored immediately upon reopening the tool.

Opening files and drag-and-drop

• Click Open File to browse and select any .md, .markdown, or .txt file from your computer.
• Alternatively, drag any Markdown or text file directly from your desktop and drop it onto the editor pane. The contents will be loaded instantly into the editor.

Exporting and next publishing steps

When your draft is complete, the bottom utility bar gives you multiple export avenues:

1. Copy Markdown: Copies the raw Markdown source to your clipboard.
2. Copy HTML: Copies the rendered HTML output, ready to paste directly into Medium, Substack, Ghost, WordPress, or your CMS.
3. Download .md: Downloads the file as document.md.
4. Download HTML: Downloads a self-contained, standalone .html document complete with clean embedded typography styles.
5. Convert to PDF, Word, or EPUB: When you are ready to compile your Markdown manuscript into a finished book with table of contents, running headers, and page numbers, use our free converter tools:
   • Markdown to PDF
   • Markdown to Word (DOCX)
   • Markdown to EPUB
   • Markdown to Medium Post
   • Create Book: Upload a zip of multiple Markdown files, images, and custom Typst templates for full print-ready book publication.

Privacy and security

The editor operates 100% locally on your computer. No keystrokes, text content, or uploaded files are sent over the internet or saved to our servers. Everything is processed through client-side JavaScript in your browser sandbox.

Something unclear? Tell us and we will improve this guide.