HTML Preview

How to Use the HTML Preview Tool

This free online HTML previewer lets you write HTML, CSS, and JavaScript code and see the results instantly in a sandboxed iframe. Enter your code in the left panel and click "Run" to render it in the preview panel on the right. The preview is safely sandboxed to prevent any interference with the main page.

Features

• Live HTML/CSS/JavaScript preview in a sandboxed iframe
• Split-panel layout for side-by-side editing and viewing
• Sample HTML template with CSS styling and JavaScript interactivity
• Safe execution environment with sandbox restrictions
• No server-side processing - everything runs in your browser

Use Cases

This tool is perfect for quickly testing HTML snippets, prototyping UI components, learning HTML/CSS/JS, debugging layout issues, and sharing code examples. It works like a simplified version of CodePen or JSFiddle, but runs entirely in your browser without requiring any account or setup.

Security

The preview iframe uses the sandbox attribute which restricts potentially dangerous operations. Scripts are allowed to run within the sandbox for interactive previews, but they cannot access the parent page, make network requests to external servers, or access your browser storage. Your code never leaves your browser.

HTML Preview vs. HTML Formatter

This tool answers the question "what does this code look like when rendered?" If your question is "how do I make this messy source readable?", use the HTML Formatter instead — it re-indents and normalizes markup without rendering it. A common workflow is to format first, then preview the result here to confirm nothing broke.

HTML Previewの使い方

HTML、CSS、JavaScriptを入力してリアルタイムでプレビュー表示できるツールです。左の入力欄にコードを貼り付けて「実行」を押すと、右側のプレビュー枠に描画結果が表示されます。内部的には入力コードをsandbox="allow-scripts" 付き iframe の srcDocに流し込んでいるため、サンドボックス内で安全に実行され、メインページへの影響はありません。UIプロトタイプやコードスニペットのテストに便利です。

HTML Formatterとの使い分け

本ツールの役割は「描画結果の確認」です。インデントが崩れたHTMLソースを読みやすく整えたい場合は、整形特化のHTML Formatterを使ってください。逆に、整形済みのコードが意図どおりに表示されるかを確かめるのは本ツールの出番です。実務では「Formatterでソースを整える → Previewで見た目を確認する」という往復が定番の流れになります。

活用例1: 生成AIが出力したHTMLの動作確認

ChatGPTやClaudeが生成したHTML/CSS/JSスニペットを貼り付ければ、ローカルにファイルを保存してブラウザで開く手間なく、その場で動作を確認できます。ただしalert() や localStorageなど、サンドボックス制限で動かないAPIがある点には注意してください（下の落とし穴表を参照）。

活用例2: メールHTMLテンプレートのレイアウト確認

メルマガや通知メールのHTMLは外部CSSが使えず、インライン style属性主体で書きます。配信前にこのツールへ貼り付ければ、テーブルレイアウトの崩れや余白のズレを素早くチェックできます。画像はhttps:// から始まる絶対URLで指定されていればプレビューにも表示されます。

活用例3: 技術記事・READMEに載せるスニペットの検証

ブログ記事やドキュメントに掲載するコード例が「実際に動くか」を公開前に最終確認できます。コピペミスでタグの閉じ忘れがあると描画が大きく崩れるので、掲載前のワンクッションとして有効です。

よくある落とし穴と対処 / Common Pitfalls and Fixes

プレビュー自体はエラーを出しませんが、サンドボックスiframeの制限により「ブラウザで直接開けば動くのにプレビューでは動かない」ケースがあります。代表的なものをまとめました。

The preview itself never throws, but the sandboxed iframe restricts several APIs — code that works in a normal browser tab may behave differently here.

言語別コード例 / Code Examples by Language

同じ「HTMLをすぐ表示して確認する」処理を自分のコードや手元の環境で再現する最小サンプルです。

Minimal snippets to reproduce the same render-and-check workflow in your own code or local environment.

JavaScript

// サンドボックス付き iframe でHTML文字列を描画 / Render an HTML string in a sandboxed iframe
const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts";   // 最小権限 / least privilege
iframe.srcdoc = htmlSource;         // 文字列を直接流し込む / inject the string directly
document.body.appendChild(iframe);

Python

import tempfile, webbrowser, pathlib

html = "<h1>Hello</h1><p>preview me</p>"
path = pathlib.Path(tempfile.mkdtemp()) / "preview.html"
path.write_text(html, encoding="utf-8")
webbrowser.open(path.as_uri())  # 既定ブラウザで開く / open in default browser

Go

package main

import "net/http"

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        w.Header().Set("Content-Type", "text/html; charset=utf-8")
        w.Write([]byte("<h1>Hello</h1><p>preview me</p>"))
    })
    http.ListenAndServe(":8080", nil) // http://localhost:8080 で確認 / check at localhost:8080
}

Shell

# カレントディレクトリを簡易サーバで配信 / serve the current directory
python3 -m http.server 8000
# または / or
npx serve .

# 単一ファイルなら直接ブラウザで開く / open a single file directly
start index.html   # Windows
open index.html    # macOS

Before / After 実例 / Before & After

例1: エスケープ忘れで本文が消える / Unescaped characters swallow text

<p>条件は a < b && b > 0 です</p>

プレビューでは < b && b > が不明なタグとして解釈され、本文の一部が消えます。

↓ エンティティでエスケープ / Escape with entities

<p>条件は a &lt; b &amp;&amp; b &gt; 0 です</p>

プレビュー表示: 「条件は a < b && b > 0 です」と意図どおりに表示されます。

Raw < and & are parsed as markup; escape them as < and & to display them literally.

例2: インラインstyleのカードを描画 / Render an inline-styled card

<div style="max-width:240px;padding:16px;border:1px solid #d1d5db;border-radius:8px;font-family:sans-serif">
  <strong>Deploy Notice</strong>
  <p style="margin:8px 0 0">6/12 15:00 にメンテナンスを実施します。</p>
</div>

↓ プレビュー結果: 角丸・枠線つきのカードに太字見出しと本文が表示されます。メールHTMLのようにインラインstyleだけで組んだレイアウトの確認に最適です。

Renders as a rounded, bordered card — ideal for checking inline-style-only layouts such as HTML emails.

例3: JavaScriptの動作確認 / Verify JavaScript behavior

<button onclick="this.textContent = 'Clicked: ' + (++window.n || (window.n = 1))">
  Click me
</button>

↓ プレビュー結果: ボタンを押すたびに「Clicked: 1」「Clicked: 2」とラベルが更新され、イベントハンドラが動いていることを確認できます。

Each click updates the label, confirming that the event handler runs inside the sandbox.

Why browser-only? / なぜブラウザ完結か

The HTML you preview is often exactly the material you do not want leaving your machine: an unreleased landing page, an email template containing customer names and order details, or markup from an internal admin tool. Online playgrounds that save your code on their servers turn a quick layout check into an accidental data disclosure. This tool takes a different approach — your input is written into the srcDocattribute of a sandboxed iframe inside the same page, so rendering happens entirely in your browser. There is no save button, no share URL, and no server that ever receives your markup. You can verify this yourself: open DevTools, switch to the Network tab, click "Run", and observe that no request is sent. The sandbox also works in the other direction, preventing the previewed code from touching this page, your cookies, or your storage.

プレビューするHTMLには、未公開のランディングページ、顧客名や注文情報を含むメールテンプレート、社内管理画面のマークアップなど、外部に出したくない内容が含まれがちです。本ツールは入力を同一ページ内のサンドボックスiframeのsrcDocに書き込むだけで、サーバへの送信は一切行いません。DevToolsのNetworkタブを開いたまま「実行」しても通信が発生しないことを自分で確認できます。