HTML viewer and online HTML editor

Paste HTML, open a file or edit the example. The preview updates as you type and runs in a sandbox, so the code cannot touch this page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Event ticket</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f4f8; margin: 0; padding: 32px; }
    .ticket { max-width: 340px; margin: 0 auto; background: #fff; border-radius: 16px;
              padding: 24px; box-shadow: 0 8px 24px rgba(20, 20, 60, .08); }
    .tag { color: #6d4aff; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
    h1 { font-size: 26px; margin: 6px 0 4px; color: #16142b; }
    p { color: #55546a; margin: 0 0 16px; }
    .row { display: flex; justify-content: space-between; border-top: 1px dashed #d7d6e3;
           padding-top: 14px; font-size: 14px; color: #3c3b4f; }
    button { margin-top: 18px; width: 100%; border: 0; border-radius: 10px; padding: 12px;
             background: #6d4aff; color: #fff; font-size: 15px; cursor: pointer; }
    @media (min-width: 700px) { .ticket { max-width: 520px; } h1 { font-size: 32px; } }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="tag">FRONT-END MEETUP</div>
    <h1>CSS Grid in practice</h1>
    <p>Thursday 7 pm, room 2. Bring a laptop.</p>
    <div class="row"><span>Seat</span><strong>B-14</strong></div>
    <button onclick="this.textContent = 'Added to calendar'">Add to calendar</button>
  </div>
</body>
</html>

How to use the HTML viewer

Paste your code into the editor, or press Open file to load an .html file from your device.
Watch the preview on the right. Switch between Mobile (390px), Tablet (768px) and Desktop to check the layout at each width.
Edit until it looks right and press Download .html to keep the result.

Turn off Update as I type when you work on a large page or on scripts that should only run once; the preview then refreshes only when you press Run.

What people use it for

Checking a snippet before pasting it into a project. Code from a chatbot, a forum answer or a colleague renders here first, without touching your repository.
Reading an HTML attachment on a phone. Email clients often show .html files as raw text. Open the file here and it renders as a page.
Testing a responsive layout. The Mobile and Tablet buttons resize the preview to real device widths, so media queries and Tailwind breakpoints switch the way they would on the device.

What the sandbox allows

The preview is an iframe with sandbox="allow-scripts" and nothing else. Your HTML, CSS and JavaScript run, and external resources such as Google Fonts or a Tailwind CDN script load normally. The frame gets an opaque origin, so it cannot read cookies or storage from img2html.com, cannot submit forms, open popups or navigate this tab. Output from console.log goes to your browser developer tools.

HTML viewer questions

Is my HTML uploaded anywhere?

No. The code stays in this browser tab. The preview is built from a local string (an iframe srcdoc), so nothing is sent to IMG2HTML or to anyone else.

Does JavaScript run in the preview?

Yes, inside a sandboxed iframe with a unique, opaque origin. Scripts can change the preview, but they cannot read this page, its cookies or its storage. Forms, popups and top-level navigation are blocked.

Why are my images or CSS files missing?

Relative paths such as images/logo.png or style.css have nothing to resolve against when you paste code or open a single file. Use absolute URLs (https://...) or put the CSS inside a <style> tag.

Can I open an .html file from my computer or phone?

Yes. Use Open file, pick the .html or .htm file and it loads into the editor and the preview. This is also the quickest way to read an HTML email attachment on a phone.

How do I save my changes?

Download .html saves the current code as a file. Nothing is stored between visits, so download before you close the tab.