~/tools/markdown-preview

Markdown Editor & Preview

Write GitHub Flavored Markdown with real-time preview. Tables, checkboxes, syntax-highlighted code blocks, TOC generation, README templates, and HTML export — all client-side.

// How to use

1. Type Markdown in the editor
2. Preview updates in real-time
3. Use toolbar for quick formatting
4. Pick a README template to start
5. Copy or download as .md / .html
* all processing happens in browser

100% client-side — no data ever leaves your browser

markdown — live preview

63w · 31L · ~1min

Project Name

A brief description of what this project does and who it's for.

Features

✅ Feature one
✅ Feature two
✅ Feature three

Installation

bash

npm install project-name

Usage

javascript

const project = require('project-name');

project.doSomething();

Contributing

Pull requests are welcome. For major changes, please open an issue first.

License

MIT

What is GitHub Flavored Markdown?

GitHub Flavored Markdown (GFM) is a superset of standard Markdown, originally introduced by GitHub for rendering README files, issues, and pull requests. It adds syntax for tables, strikethrough text, task lists, and fenced code blocks with syntax highlighting — features that standard CommonMark doesn't support.

Today GFM is the de facto standard for developer documentation. Every major platform — GitHub, GitLab, Bitbucket, Notion, Linear, Jira, and more — supports it. Understanding GFM is essential for writing effective READMEs, wikis, and technical documentation.

Supported Features

Tables

Pipe-delimited tables with header rows and alignment control. Renders as a styled HTML table with alternating row colors.

Task Lists

- [ ] and - [x] syntax for interactive checklists. Commonly used in project READMEs, issue tracking, and kanban-style notes.

Code Blocks

Fenced code blocks with syntax highlighting for 14+ languages: JS, TS, Python, Bash, JSON, CSS, HTML, SQL, Rust, Go, YAML, Java, and more.

Strikethrough

~~text~~ renders as deleted text. Useful for showing deprecated options, cancelled tasks, or corrections.

Blockquotes

> prefix creates indented quote blocks. Commonly used for callouts, warnings, tips, and important notes.

Auto-linking

URLs and @mentions are automatically converted to clickable links in GFM-compatible renderers.

TOC Generation

Automatically extract all headings from your document and generate a navigable table of contents with anchor links.

HTML Export

Convert your Markdown to clean, standalone HTML with a full CSS stylesheet ready to embed or publish anywhere.

Common Use Cases

README Files

Write polished project READMEs with badges, installation instructions, API docs, and contribution guides using our built-in templates.

Technical Docs

Draft developer documentation, API references, and architecture decision records with full GFM formatting support.

Blog Posts

Write and preview blog content before pasting into platforms like Dev.to, Hashnode, or Ghost which all support Markdown.

Meeting Notes

Take structured notes with headings, bullet points, and task lists. Export to HTML for sharing with non-technical stakeholders.

Code Tutorials

Write step-by-step tutorials with fenced code blocks, syntax highlighting, and sequential numbered lists.

Release Notes

Document changelog entries and release notes with formatted lists, links to issues/PRs, and version headers.