TFT

Live Markdown Editor with Preview

Write and preview your Markdown simultaneously in this live editor. Supports GitHub Flavored Markdown with real-time rendering. A essential tool for drafting documentation and README files.

Preview will appear here...

How It Works

This live Markdown preview editor provides a split-pane interface where you write Markdown on one side and see the rendered HTML output in real-time on the other. It supports GitHub Flavored Markdown (GFM) with all common extensions.

The editing workflow:

  1. Write Markdown: Type or paste your Markdown content in the left editor pane with syntax highlighting.
  2. Instant preview: As you type, the right pane renders the HTML output in real-time.
  3. Use toolbar shortcuts: Quick buttons for common formatting like bold, italic, links, code blocks, and lists.
  4. Export: Download your content as raw Markdown or rendered HTML when finished.

The editor handles all GFM features: tables, task lists, strikethrough, autolinks, syntax-highlighted code blocks, and emoji. Word and character counts update live.

When You'd Actually Use This

Writing README Files

Draft and preview your project README with live formatting before committing to GitHub.

Creating Documentation

Write technical docs with code blocks, tables, and links while seeing exactly how they'll render.

Blog Post Drafting

Compose blog posts in Markdown for static site generators like Jekyll, Hugo, or Gatsby.

GitHub Issues and PRs

Draft well-formatted issues and pull request descriptions before submitting them.

Learning Markdown Syntax

See immediately how Markdown syntax translates to formatted output - great for beginners.

Content Creation

Write articles, notes, or any formatted content that needs to be exported as Markdown or HTML.

What to Know Before Using

Content isn't automatically saved

This runs in your browser. Refresh or close the tab and you'll lose your work. Copy your content or export before leaving.

Rendering may differ from your target platform

GitHub, GitLab, Stack Overflow, and others have slight Markdown variations. Preview is GFM-standard but may not match exactly.

Large documents may slow rendering

Very long documents with complex formatting might cause slight delays in preview updates. Consider breaking into smaller files.

Some HTML may be sanitized

For security, certain HTML tags might be stripped from the preview. Raw Markdown export preserves everything.

Images use external URLs

Images in your Markdown need to be hosted somewhere. Local file paths won't work when the Markdown is used elsewhere.

Common Questions

What Markdown features are supported?

All GitHub Flavored Markdown: headers, lists, tables, code blocks with syntax highlighting, task lists, strikethrough, tables, autolinks, and emoji.

Can I edit existing Markdown files?

Yes! Paste your existing Markdown into the editor, make changes with live preview, then copy or export the updated version.

How do I insert code blocks?

Use triple backticks (```) with optional language identifier: ```python for syntax highlighting. Or use the toolbar button.

Can I customize the editor theme?

Yes, toggle between light and dark themes using the theme switcher. Your preference is remembered for next time.

How do I create a table of contents?

Some platforms auto-generate TOC from headers. Or manually create links: [Section](#section-name) using lowercase with hyphens.

What's the difference between Markdown and HTML export?

Markdown export gives you the source (.md file). HTML export gives you rendered web page (.html). Use Markdown for version control, HTML for publishing.

Can I collaborate with others in real-time?

No, this is a single-user editor. For collaboration, use platforms like GitHub, GitLab, or dedicated collaborative Markdown editors.