GitHub lets you preview changes before committing them so you never save something you did not intend. When editing a file in the browser, click the 'Preview' tab to see rendered Markdown or the 'Preview changes' view to see a color-coded diff of your edits. For multi-file previews, open your repository in github.dev and use the Source Control panel to review all pending changes before committing.
Why You Should Always Preview Before Committing
Committing a change on GitHub is permanent — every commit is recorded in your project's history forever. While you can revert changes later, it is much easier to catch mistakes before they are saved. GitHub provides several preview features that let you see exactly what your changes will look like and what lines you have added or removed. When editing a Markdown file (like a README), the Preview tab shows you the rendered output with formatting, links, and images. For any file type, the commit dialog shows a diff — green lines for additions and red lines for deletions. And if you are working on multiple files at once, the github.dev editor (a free VS Code-like editor that runs in your browser) provides a Source Control panel where you can review every change across all files before committing. These preview tools are especially useful when working alongside AI tools like Cursor or Lovable, where you might be reviewing generated code before saving it to your repository.
Prerequisites
- A GitHub account (free plan works)
- A repository with at least one file to edit
- A modern web browser
Step-by-step guide
Open a file for editing in the GitHub web editor
Open a file for editing in the GitHub web editor
Navigate to any repository you have write access to on github.com. Click on a file to open it — a Markdown file (like README.md) works best for demonstrating the preview feature. Once the file is open, click the pencil icon in the top-right corner of the file content area. This opens the browser-based file editor where you can make changes directly. You'll see two tabs above the editor: "Edit" (where you type) and "Preview" (where you see the result).
Expected result: The file opens in edit mode with Edit and Preview tabs visible above the text area.
Use the Preview tab to see rendered Markdown
Use the Preview tab to see rendered Markdown
If you are editing a Markdown file (.md), make a small change — for example, add a new heading or a bullet point. Then click the "Preview" tab above the editor. GitHub renders your Markdown into formatted text: headings appear as large bold text, bullet points are properly indented, links become clickable, and images display inline. Your changes are highlighted with a green background so you can spot exactly what is new. This is the fastest way to verify that your formatting looks correct before committing.
Expected result: The Preview tab shows your Markdown rendered with formatting, and new additions highlighted in green.
Review the diff in the commit dialog
Review the diff in the commit dialog
Click back to the "Edit" tab and make your desired changes to the file. When you are ready to save, scroll down to the commit section below the editor. Before clicking "Commit changes," GitHub shows you a summary of your modifications. For Markdown files, the Preview tab already showed your diff. For code files, the commit dialog may show a compact summary. Click the "Commit changes" button to open the commit dialog — you'll see fields for the commit message and description. Before finalizing, you can review what will be committed. The green lines show additions and red lines show deletions.
Expected result: You see a clear diff of your changes before clicking the final commit button.
Open github.dev for multi-file preview
Open github.dev for multi-file preview
For a more powerful preview experience, go to your repository's main page and press the period key (.) on your keyboard. This opens github.dev — a free VS Code-like editor that runs entirely in your browser. Navigate through your files using the file explorer on the left sidebar. Make edits to one or more files. Then click the "Source Control" icon in the left sidebar (it looks like a branch/fork symbol and may show a blue badge with the number of changed files). Here you'll see every modified file listed. Click on any file name to see a side-by-side diff showing your changes highlighted in green and red.
Expected result: The github.dev editor shows all your modified files with side-by-side diffs in the Source Control panel.
Commit your changes after previewing
Commit your changes after previewing
In the github.dev Source Control panel, review each changed file by clicking it. Once you are satisfied that all changes look correct, type a commit message in the text field at the top of the Source Control panel. Click the checkmark icon (or press Ctrl+Enter / Cmd+Enter) to commit. GitHub saves all your changes in a single commit. If you were working in the regular GitHub editor instead, click the green "Commit changes" button after reviewing. Either way, your previewed changes are now safely committed to the repository.
Expected result: All changes are committed to the repository, and the Source Control panel shows no pending changes.
Complete working example
1# Preview Before You Commit23This file demonstrates Markdown formatting you can4preview using GitHub's Preview tab.56## Formatted Text78- **Bold text** appears with double asterisks9- *Italic text* appears with single asterisks10- `Inline code` appears with backticks11- [Links](https://github.com) use brackets and parentheses1213## Code Block1415```typescript16const greeting = "Hello, world!";17console.log(greeting);18```1920## Table2122| Feature | Where to Find It |23|----------------|------------------------|24| Preview tab | File editor toolbar |25| Diff view | Commit dialog |26| Source Control | github.dev left sidebar|2728## Image2930Common mistakes when previewing a File Before Committing in GitHub
Why it's a problem: Committing without checking the Preview tab first
How to avoid: Always click the Preview tab when editing Markdown files. It takes two seconds and catches formatting errors like broken links, missing headings, and malformed tables.
Why it's a problem: Not realizing github.dev exists for multi-file previews
How to avoid: Press the period key (.) on any repository page to open github.dev. It gives you a full VS Code-like editor with Source Control for reviewing changes across multiple files.
Why it's a problem: Editing code files without seeing the diff
How to avoid: For code files (TypeScript, JavaScript, etc.), the Preview tab shows a diff rather than a rendered preview. Read the green and red lines carefully — green means added, red means removed.
Why it's a problem: Making too many changes before previewing
How to avoid: Preview frequently as you edit, not just at the end. Small incremental previews make it easier to spot errors than reviewing a massive diff.
Best practices
- Always click Preview when editing Markdown to catch formatting issues
- Use github.dev (press period key) for reviewing changes across multiple files
- Read the full diff before clicking Commit — look for accidental deletions in red
- Preview code changes in github.dev's Source Control panel for a side-by-side view
- Write a descriptive commit message that explains what you changed and why
- If a diff looks larger than expected, cancel the commit and investigate before saving
- Use the Preview feature when reviewing AI-generated code from tools like Cursor or Lovable before committing it to your main branch
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm editing a README.md file on GitHub. Explain what the Preview tab shows me and how to read the green and red highlighted lines in the diff view.
Frequently asked questions
Does the Preview tab work for all file types?
The rendered preview works for Markdown (.md), reStructuredText (.rst), and a few other markup formats. For code files like .js, .ts, or .py, the Preview tab shows a diff (added/removed lines) rather than a rendered output.
Can I preview changes without committing them?
Yes. The Preview tab and github.dev Source Control panel let you review changes without committing. You can close the editor or discard changes if you decide not to save them.
What is github.dev and is it free?
github.dev is a free, browser-based code editor built on VS Code. It opens when you press the period key on any repository page. It includes file editing, search, and Source Control — all without installing anything.
How do I preview changes when using Lovable or V0?
Lovable and V0 show a live preview of your app as you make changes. If they push code to GitHub, you can review those changes on GitHub by clicking the commit or pull request they create.
Can RapidDev help me review code changes before committing?
Yes. RapidDev's engineering team can review pull requests, explain diffs, and help you understand what AI-generated code changes mean before you merge them into your main branch.
Can I undo changes in github.dev before committing?
Yes. In the github.dev Source Control panel, hover over a changed file and click the curved arrow icon to discard changes for that file. You can discard changes for individual files or all files at once.
Is there a keyboard shortcut to open Preview?
In the standard GitHub file editor, there is no keyboard shortcut for the Preview tab — just click it. In github.dev, you can use Ctrl+Shift+V (or Cmd+Shift+V on Mac) to toggle the Markdown preview pane.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation