Open it on your computer

Right-click the .html or .htm file, choose Open with, and select your browser. You can also drag the file into a browser window. To inspect the source instead of the rendered page, open it in a text editor.

A page saved with a companion folder needs that folder too. Keep both in the same relative locations: moving only the HTML file can break its images and styles.

Open it in HTML Viewer Cat

Go to the HTML viewer and press Open, or drop the file onto the editor. On a phone, use Open and select it from your file picker.
Edit the source and watch the preview update. Files can contain a complete document or just a snippet. The import limit is 5 MB.
Use HTML to download the result. Use PDF to open the browser’s print dialog, then choose Save as PDF where available.

The file is read in your browser, without uploading it to our server. The viewer opens one file at a time; it does not import a website folder or run a server.

Why are images or styles missing?

A path such as images/logo.png points to another file. Selecting the HTML file does not give an online viewer access to the other files on your computer. A relative path in the preview also has a different base URL from the original page.

For a document you want to move around, put CSS in a <style> element and use inline SVG or embedded image data. If the assets are hosted, use their full HTTPS addresses. For a whole local project, run its development server so the original folder structure is available.

If the HTML is from your own hosted site, a <base href="https://your-site.example/path/"> in the head can resolve relative addresses against that location. It affects links and other relative URLs too. Remote assets still need to exist and allow the browser to load them.

Try a file with no external dependencies

This example keeps the CSS and illustration inside the HTML. Open it below, switch to phone preview, download it as HTML, and reopen the downloaded file. The accents and Japanese text should remain readable.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A file that travels on its own</title>
  <style>
    body { margin: 0; padding: 24px; font: 18px/1.5 system-ui; background: #f5f7f3; color: #182820; }
    main { max-width: 600px; margin: auto; }
    svg { width: 120px; height: 80px; }
  </style>
</head>
<body>
  <main>
    <h1>A file that travels on its own</h1>
    <svg viewBox="0 0 120 80" role="img" aria-label="Green hills">
      <rect width="120" height="80" fill="#dcece5"/>
      <path d="M0 80V60L40 20L80 65L100 45L120 70V80Z" fill="#38664d"/>
    </svg>
    <p>Café, crème brûlée, 日本語 — all in UTF-8.</p>
    <p>The styles and illustration are in this file. No companion folder is needed.</p>
  </main>
</body>
</html>

Open this example in the viewer →

Why does the page show code or broken characters?

Visible backticks: copy the HTML inside a Markdown code fence, without the opening ```html and closing backticks.
Visible <h1>: the tags were escaped as text. Use the original <h1> markup when you intend to render it.
Broken accents: the file’s bytes and declared encoding may disagree. The viewer recognises UTF byte-order marks and supported HTML charset declarations in the first 1,024 bytes. Without either, it assumes UTF-8. Re-save an incorrectly labelled file as UTF-8 in a text editor.
PHP, JSX or template expressions: opening the source does not compile it. Run the project’s build or server, then preview the resulting HTML.

What a browser preview can tell you

The preview runs JavaScript in a sandbox, and the Console panel shows script errors. External resources and scripts can make network requests, so use documents you trust. A sandbox does not make arbitrary code harmless.

Phone and tablet controls change the viewport width. They are useful for testing responsive layouts, but they do not reproduce Safari, Outlook or Gmail. For email, use a browser preview to check the structure, then test the message in the email clients your audience uses.

References

The relevant browser behavior is documented in the HTML Standard’s encoding rules and MDN’s references for iframe previews and the base element.