Source Code Viewer
See the HTML source of any public web page, together with the stylesheets and scripts it loads. Enter an address and the page opens in a code editor with syntax highlighting and line numbers. Every linked CSS and JavaScript file is listed beside it, marked as same site or external, and opens in its own tab with one click.
Minified code can be beautified to make it readable, and each file can be searched, copied or downloaded.
About this tool
How it works
Enter an address and the tool fetches the page from our server, exactly as a browser would receive it, and shows the HTML in an editor with syntax highlighting and line numbers. You can leave out https:// and just type a domain such as example.com.
The viewer shows the source the server sends, before any JavaScript runs. To see the page after scripts have changed it, use your browser’s DevTools.
Every linked file
Stylesheets (including preloaded and @imported ones) and scripts (including modules) are listed beside the editor, marked as same site or external, and open in tabs. A page summary shows the title, final address after redirects, HTTP status, size, and the number of inline <style> and <script> blocks.
Reading and searching code
- Beautify: formats minified HTML, CSS, JavaScript and JSON so it is readable, and switches back to the original with one click.
- Find: search the current file, with a match counter, next and previous, and a match-case option.
- Copy & download: copy a file to your clipboard or download it with the right extension.
Shareable links
The viewed address is added to the page link, so you can bookmark it or send it to someone and it opens the same page in the viewer.
Common uses
- Learning how a website is built
- Checking meta tags, headings and structured data
- Finding which stylesheets and scripts a page loads
- Reading minified code after beautifying it
Frequently Asked Questions
What is a source code viewer?
A source code viewer fetches a web page and shows the HTML, CSS and JavaScript behind it in a readable editor. Unlike the browser’s built-in View Page Source, this viewer adds syntax highlighting, line numbers, a Beautify option for minified code, and lists the page’s stylesheets and scripts so you can open each one in its own tab.
How do I view the source code of a website?
Type the address into the box and press View source. You can leave out https:// and just type a domain such as example.com. The page’s HTML opens in the editor, and the files panel lists every stylesheet and script the page links to. Click a file to open it in a new tab. The address is also added to your browser’s address bar, so you can bookmark or share a link that opens the same page in the viewer.
What is the difference between viewing source code and using browser DevTools?
Viewing the source shows the raw HTML the server sent, before any JavaScript has run. Browser DevTools (F12, or right-click → Inspect) show the live DOM, which is the page after scripts have added or changed content. For reading a site’s original markup and finding its CSS and JavaScript files, a source viewer is simpler. For debugging interactive behavior or checking computed styles, use DevTools.
Can I view the CSS and JavaScript files of a website, not just the HTML?
Yes. The viewer finds stylesheets linked with <link rel="stylesheet"> or preloaded as styles, files loaded with @import (including imports inside other stylesheets, which are added once you open the parent file), and scripts loaded with <script src>, including module scripts. Each file is marked as same site or with the name of the external host, such as a CDN. Inline <style> and <script> blocks are part of the HTML, and the summary shows how many there are.
Can I download the source code I am viewing?
Yes. Download saves the file in the active tab with the right extension (.html, .css or .js). Copy copies the whole file to your clipboard. Both use whatever is shown: the original code, or the formatted version if you have pressed Beautify.
Why can’t I view the source code of some websites?
Some sites block automated requests, ask for a login, or show a bot check instead of the real page. In those cases the viewer shows whatever the server sends, and marks HTTP errors such as 403 so you know it isn’t the real page. Pages built entirely by JavaScript may contain very little HTML, because the viewer reads the server’s response without running scripts. For safety, only public http and https addresses on the standard ports can be viewed, and files larger than 5 MB are cut off at 5 MB. Headers such as X-Frame-Options only affect embedding a page in a frame, so they don’t stop the viewer.
How do I search for a specific piece of code in the viewer?
Press Find, or Ctrl+F (Cmd+F on a Mac) while the viewer has focus. Type a class name, selector, function or any other text, and the counter shows how many times it appears in the file in the current tab. Press Enter or the arrows to jump between matches, Shift+Enter to go back, and Aa to match upper and lower case exactly. The search follows you when you switch tabs.
Is it legal to view the source code of a website?
Viewing the source of a public website is generally legal. Browsers download the same code to show every page you visit, and View Source has been a standard browser feature for decades. The code itself, however, is usually protected by copyright and belongs to the site’s owner. You may study and learn from it, but copying it into your own projects without permission could infringe that copyright. Check the site’s terms if you are unsure.
What does the Beautify feature do?
Many sites serve minified code, with whitespace, line breaks and indentation removed to make files smaller. Beautify reformats the file in the current tab with line breaks and indentation so it is easy to read. HTML and CSS are formatted with CSS Portal’s own formatters, and JavaScript and JSON files are formatted too. Beautify doesn’t change the original: press Original to switch back to the code exactly as the server sent it.
Can I use this tool to learn web development?
Yes. Studying the source of real websites is one of the best ways to learn HTML, CSS and JavaScript. You can see how a layout is structured, which CSS properties create a particular effect, and how a script achieves a certain behavior, all from live examples. The tabs and syntax highlighting make it easy to move between a site’s files and focus on the parts you want to learn from.