GitHub does not render HTML files as web pages — it displays the raw HTML source code instead. To preview HTML files as they would appear in a browser, you have three options: enable GitHub Pages to host the file as a live website, open the repository in github.dev and use a preview extension, or use an external tool like CodeSandbox or StackBlitz that can import your GitHub repository and render it live.
Why GitHub Does Not Render HTML Files
If you have ever clicked on an HTML file in a GitHub repository expecting to see a web page, you were probably surprised to see raw code instead. GitHub intentionally does not render HTML files as web pages for security reasons — rendering arbitrary HTML could allow malicious scripts to run in your browser. GitHub does render Markdown files (.md) beautifully, which is why READMEs look nice, but HTML, CSS, and JavaScript files are always shown as source code. This can be confusing for non-technical founders who just want to see what their web page looks like. The good news is there are several free, no-terminal workarounds. GitHub Pages turns your repository into a live website with a few clicks. External tools like CodeSandbox and StackBlitz can import any GitHub repository and render it instantly. And if you built your project with AI tools like Lovable or V0, they provide built-in preview panels that show your HTML rendered live as you work.
Prerequisites
- A GitHub account (free plan works)
- A repository containing HTML files
- A modern web browser
Step-by-step guide
Understand what GitHub shows when you open an HTML file
Understand what GitHub shows when you open an HTML file
Navigate to any repository on github.com that contains an HTML file (like index.html). Click on the file to open it. Instead of seeing a rendered web page, you'll see the raw HTML source code with syntax highlighting — tags like <html>, <head>, and <body> displayed as colorful text. This is normal and expected. GitHub shows all code files as source, not rendered output. To actually see the web page, you need to use one of the methods in the following steps.
Expected result: You see the HTML source code with syntax highlighting, not a rendered web page.
Enable GitHub Pages to host your HTML as a live site
Enable GitHub Pages to host your HTML as a live site
Go to your repository's main page and click the "Settings" tab in the top navigation bar. In the left sidebar, scroll down and click "Pages" under the "Code and automation" section. Under "Source," click the dropdown that says "None" and select "Deploy from a branch." Choose your main branch (usually "main") from the branch dropdown, and select "/ (root)" as the folder. Click "Save." GitHub will build and deploy your site within a few minutes. Once ready, a green banner at the top of the Pages settings shows your live URL — it will look like https://yourusername.github.io/repository-name/. Click this URL to see your HTML rendered as a real web page.
Expected result: GitHub Pages deploys your repository and you can view your HTML file as a live web page at the provided URL.
Use CodeSandbox to instantly preview any GitHub repository
Use CodeSandbox to instantly preview any GitHub repository
Open a new browser tab and go to codesandbox.io. Click "Import repository" or use the URL shortcut: take your GitHub repository URL (like github.com/user/repo) and change it to codesandbox.io/s/github/user/repo. Press Enter. CodeSandbox imports your repository and opens it in a cloud-based editor with a live preview panel on the right side. Your HTML files are rendered exactly as they would appear in a browser. You can even edit files and see changes reflected instantly in the preview. No installation or account required for public repositories.
Expected result: CodeSandbox shows your repository files on the left and a live rendered preview of your HTML on the right.
Use StackBlitz as an alternative live preview tool
Use StackBlitz as an alternative live preview tool
Another option is StackBlitz. Open a new browser tab and modify your GitHub URL: change github.com to stackblitz.com/github in the URL. For example, change github.com/user/repo to stackblitz.com/github/user/repo. Press Enter. StackBlitz opens a VS Code-like editor in your browser with the repository files loaded and a preview panel showing the rendered output. StackBlitz is particularly good for projects using frameworks like React or Next.js (the same frameworks used by AI tools like V0 and Lovable), as it understands how to build and run them automatically.
Expected result: StackBlitz renders your repository with a live preview in the browser, alongside an editable code view.
Use github.dev for code review with limited preview
Use github.dev for code review with limited preview
Press the period key (.) on your repository page to open github.dev. This gives you a VS Code-like editor in your browser. While github.dev does not have a built-in HTML preview by default, you can use it to browse and edit your HTML files with full syntax highlighting and a file explorer. For Markdown files, you can press Ctrl+Shift+V (or Cmd+Shift+V on Mac) to open a live preview. For HTML files, you will still need GitHub Pages or an external tool for a rendered preview, but github.dev is excellent for reviewing the code structure and making quick edits.
Expected result: github.dev opens with your repository files in a VS Code-like editor for browsing and editing.
Complete working example
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>My GitHub Pages Site</title>7 <style>8 body {9 font-family: -apple-system, BlinkMacSystemFont, sans-serif;10 max-width: 800px;11 margin: 0 auto;12 padding: 2rem;13 background: #f8f9fa;14 }15 h1 { color: #1a1a2e; }16 .card {17 background: white;18 padding: 1.5rem;19 border-radius: 8px;20 box-shadow: 0 2px 4px rgba(0,0,0,0.1);21 margin-top: 1rem;22 }23 </style>24</head>25<body>26 <h1>Welcome to My Project</h1>27 <div class="card">28 <h2>About</h2>29 <p>This page is hosted with GitHub Pages.</p>30 <p>Push changes to your repo and they appear here.</p>31 </div>32</body>33</html>Common mistakes when previewing HTML Files Directly in GitHub
Why it's a problem: Expecting GitHub to render HTML files when you click on them
How to avoid: GitHub always shows HTML as source code for security reasons. Use GitHub Pages, CodeSandbox, or StackBlitz to see the rendered output.
Why it's a problem: Forgetting to enable GitHub Pages in repository settings
How to avoid: Go to Settings → Pages → Source → select your branch and root folder → Save. Wait a few minutes for deployment to complete.
Why it's a problem: Using raw.githubusercontent.com URLs expecting them to render HTML
How to avoid: Raw GitHub URLs serve files with a text/plain content type, so browsers show code instead of rendering HTML. Use GitHub Pages for proper HTML hosting.
Why it's a problem: Not waiting for GitHub Pages to deploy
How to avoid: GitHub Pages can take 1-5 minutes to build and deploy. Check the Pages settings page for a green banner showing the live URL. If it says 'queued' or 'building,' wait and refresh.
Best practices
- Use GitHub Pages for any repository that contains HTML files you want to share as a website
- Use CodeSandbox or StackBlitz for quick one-time previews without changing repository settings
- Keep your main HTML file named index.html so GitHub Pages serves it automatically at the root URL
- Remember that Markdown files (.md) render beautifully on GitHub — use them for documentation instead of HTML
- Test your GitHub Pages site on mobile by visiting the URL on your phone
- If using AI tools like Lovable, use the built-in preview instead of GitHub Pages for development previews
- Add a link to your GitHub Pages URL in your repository README so visitors can find the live site easily
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I have an HTML file in a GitHub repository and I want to see it as a web page. Explain the simplest way to do this without using the terminal or installing anything.
Frequently asked questions
Why doesn't GitHub render HTML files like it renders Markdown?
Security. HTML can contain JavaScript and other executable content that could be used for phishing or cross-site scripting attacks. GitHub renders Markdown because it is a safe, text-only format. HTML rendering is left to GitHub Pages, which serves files from a separate domain.
Is GitHub Pages free?
Yes. GitHub Pages is free for public repositories on all GitHub plans. Private repository Pages are available on GitHub Pro ($4/month) and higher plans. There are usage limits (100 GB bandwidth/month, 1 GB storage) but most small projects never hit them.
Can I use a custom domain with GitHub Pages?
Yes. In Settings → Pages, there is a 'Custom domain' field where you can enter your own domain name. You will need to configure DNS records (a CNAME record) with your domain provider. GitHub provides free HTTPS for custom domains.
Do Lovable and V0 projects need GitHub Pages for previewing?
No. Lovable and V0 have built-in live preview panels that render your app as you work. You only need GitHub Pages if you want to host a static version of your project separately, or if you want to share a preview URL with someone.
Can RapidDev set up GitHub Pages for my project?
Yes. RapidDev's engineering team can configure GitHub Pages, set up custom domains, and optimize your static site — especially useful if your project was generated by AI tools and needs cleanup before going live.
Can I preview CSS and JavaScript files on GitHub too?
GitHub shows CSS and JS as source code, just like HTML. To see them in action, you need to preview the HTML file that references them. GitHub Pages, CodeSandbox, and StackBlitz all handle CSS and JS correctly.
How long does GitHub Pages take to update after I push changes?
Usually 1-5 minutes. After pushing a new commit, GitHub rebuilds and redeploys your site automatically. You can check the deployment status in Settings → Pages or in the 'Actions' tab.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation