Markdown README Generator — GitHub-Flavored Live Preview
7 templates · Live preview · Badge builder · Tech stack · GitHub stats · Export .md
A Markdown README generator with real-time GitHub-Flavored Markdown (GFM) preview. Write in the form fields and see rendered output — headings, code blocks, badges, links, tables, and blockquotes — exactly as they will appear on GitHub. Section manager, badge builder, tech stack icons, and markdown linter included.
my-awesome-project
A short description of your project.
📋 Table of Contents
📖 About
A short description of your project.
✨ Features
⚙️ Installation
npm install my-awesome-project
🚀 Usage
import { myFunc } from 'my-awesome-project';const result = myFunc({ option: 'value' });
console.log(result);
🤝 Contributing
Contributions are always welcome!
See CONTRIBUTING.md for ways to get started.
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)⚖️ License
Distributed under the MIT License. See LICENSE for more information.
Frequently Asked Questions
What is GitHub-Flavored Markdown (GFM)?
GitHub-Flavored Markdown (GFM) is GitHub's extended version of standard Markdown. It adds: task lists (- [ ] item), tables (| col | col |), fenced code blocks with syntax highlighting (```python), autolinks (bare URLs become clickable), strikethrough (~~text~~), and emoji shortcuts (:smile:). CalcNation's preview renders the core GFM features including fenced code blocks, tables, and images.
How do fenced code blocks work in README Markdown?
Fenced code blocks use triple backticks followed by the language name: ```javascript (then your code on the next lines) then closing ```. GitHub renders these with syntax highlighting. Common language identifiers: javascript, typescript, python, bash, go, rust, java, json, yaml, html, css, sql. The README generator pre-fills installation and usage sections with properly formatted code blocks.
How to create tables in Markdown README?
Markdown tables use pipes and dashes: | Header 1 | Header 2 | then a separator row | --- | --- | then data rows. CalcNation's API Reference template generates a properly formatted parameter table. The pipe character creates column borders, and the separator row with hyphens separates headers from data rows. Colons add alignment: :--- (left), :---: (center), ---: (right).
Can I write raw Markdown in the generator?
For the Installation, Usage, API Reference, and Configuration sections, the input fields accept raw Markdown including code fences, tables, and headers. The raw mode view (toggle with the Raw/Preview buttons or press M) shows the exact Markdown that will be downloaded. You can also copy the raw output and edit it in any text editor.
How do image links work in GitHub README Markdown?
Image syntax is . For repository images, use the raw GitHub URL format: https://raw.githubusercontent.com/username/repo/main/path/image.png. For hosted badges, shields.io URLs work directly. GitHub caches images — new images may take a few minutes to appear. Enable the Screenshots section and enter your image URL to include it.
What is the difference between raw Markdown and rendered preview?
Raw Markdown is the plain text file with Markdown syntax (# headings, **bold**, ``` code ```, etc.) — this is what you download and commit as README.md. Rendered preview is what GitHub displays to viewers — styled HTML with visual headings, colored code, clickable links, and embedded badge images. Toggle between both views using the Raw/Preview toggle buttons.