GitHub
Profile README Studio
Build a GitHub profile README with a pixel-accurate preview, and badges, icons and cards the studio draws itself instead of outside servers.
GitHub · Coming 3 Jan 2027The whole release plan
Markdown Studio is almost here.
Write Markdown and see it the way GitHub will show it, with a problems list, visual editing, Mermaid diagrams and HTML or PDF export.
--days
--hours
--min
--sec
Opens 3 Jan 2027GitHub · free · no sign-up · runs in your browser
Markdown Studio
Markdown Studio is a Markdown editor in your browser with a preview that matches how GitHub shows your file. It points out problems as you type and exports to HTML, PDF or rich text.
- free
- no sign-up
- runs in your browser
- updated
10
diagram templates
5
alert types
5
export options
What it does
What Markdown Studio does.
Markdown looks simple until a file renders differently on GitHub than in your editor. Alerts, footnotes, heading links and diagrams are GitHub extras that many editors do not show, and small mistakes like an unclosed code block or a skipped heading level are easy to miss.
Markdown Studio renders your text with GitHub's rules in light and dark, lists problems as you write, and lets you jump to the line. You can also edit visually like a word processor, draw Mermaid diagrams and export the result.
GitHub-accurate preview
Alerts, task lists, tables, footnotes, emoji shortcodes, code colours and heading links are shown the way GitHub shows them, in light and dark.
┃ ⓘ Note
┃ Run pnpm test before you open a pull request.
┃ ⚠ Warning
┃ Migrations cannot be undone once they reach main.
Problems list
It flags links to headings that do not exist, skipped heading levels, images without alt text, empty links, broken table rows and code blocks that are never closed. Click a problem to jump to its line.
Tables without the pain
Paste cells from a spreadsheet to get a Markdown table, and line up the pipes of every table with one click.
Visual editing
Edit on a page that works like a word processor, with bold, headings, lists, links and tables, and get clean Markdown back.
Mermaid diagrams
Write diagrams as text with a live preview, start from one of 10 templates, and download them as SVG or PNG or add them to your document.
Export anywhere
Download a .md file or a single HTML page with GitHub's styles in light or dark, save a PDF through the print dialog, or copy rich text for Google Docs, Word, Notion or email.
In a minute
See Markdown Studio in action.
A short video of Markdown Studio doing its one job, from an empty screen to the finished result.
Video coming soonMarkdown Studio in a minute
How it works
How to use Markdown Studio in three steps.
Best for: you want to write Markdown for GitHub and see exactly how it will look, with mistakes pointed out before you commit.
01
Write or paste
Type Markdown on the left, or switch to the visual editor if you prefer to write like a document.
02
Check the preview and problems
Watch the GitHub-style preview update and fix anything listed in the Problems tab.
03
Export or copy
Copy the Markdown, or export it as HTML, PDF or rich text from the export page.
From the blog
Read more about Markdown Studio.
How to centre an image or text in a GitHub READMEGitHub removes CSS from a README, so text-align and style attributes do nothing. The old align attribute still works. How to centre images, text, headings and tables, and how to keep Markdown working inside a centred block.A GitHub profile README for job seekersWhat recruiters and hiring managers look for in the ten seconds they spend on your GitHub profile, and how your profile README can give it to them.Dark mode images in a GitHub READMEHow to show one image to light-mode visitors and another to dark-mode visitors, so the cards in your GitHub README never look out of place.GitHub Markdown alerts, collapsible sections and MermaidGitHub's Markdown does more than headings and lists. Here are alerts, collapsible sections, Mermaid diagrams, footnotes, task lists and keyboard keys, with the exact syntax for each.
Questions
Markdown Studio questions, answered.
What is GitHub-flavoured Markdown?
GitHub-flavoured Markdown is the version of Markdown that GitHub uses, with extras on top of the basic syntax. The extras include tables, task lists, strikethrough, footnotes, alerts and Mermaid diagrams. The guide page shows each one with an example you can edit in place.
How do I add a note or warning box in GitHub Markdown?
Start a blockquote with a line like > [!NOTE] and put your text on the lines below it, each starting with >. The five types are NOTE, TIP, IMPORTANT, WARNING and CAUTION, and GitHub shows each with its own colour and icon. Markdown Studio shows them the same way in the preview.
How do I convert Markdown to PDF?
Open the export page and choose PDF, then pick Save as PDF in your browser's print dialog. The page is printed with GitHub's styles, so the PDF looks like the preview.
Why do my table of contents links not work on GitHub?
The link has to match the id GitHub gives the heading, which is lower case with spaces turned into hyphens and most punctuation removed. Markdown Studio makes heading ids the same way GitHub does, can insert a table of contents for you, and warns you when a link points to a heading that does not exist.
Where are my documents saved?
They are saved in your browser. You can keep several documents and switch between them, and nothing is uploaded.
Is pasted HTML safe in the preview?
Yes. Everything that is rendered goes through a sanitizer first, so pasted HTML cannot run scripts.
Is Markdown Studio made by GitHub?
No. Markdown Studio is independent: it is not made, endorsed or supported by GitHub. Product names on this page are their owners' trademarks, used only to say what it works with.
Coming 3 Jan 2027
Markdown Studio is on its way.
It opens on 3 Jan 2027. Everything above is what it will do.
From the same shelf