Widely availableUseful for self-contained embedded previews when you want document isolation without a separate file.
Embedding Widely available

srcdoc

The srcdoc attribute lets you supply inline HTML content directly for an iframe. It is useful for previews, demos, and generated isolated documents.

EmbeddingSandboxingDocuments

Overview

The srcdoc attribute lets you supply inline HTML content directly for an iframe. It is useful for previews, demos, and generated isolated documents.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLIFrameElement.srcdoc
20
79
25
6
25
6
HTML attribute
srcdoc
20
79
25
6
25
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<iframe srcdoc="<h1>こんにちは</h1><p>インラインHTMLコンテンツ</p>"
  sandbox
  width="400" height="200">
</iframe>

Live demo

inline HTML. embed

Srcdoc attribute in iframe insidedirectly HTML describe.

PreviewFullscreen

style withcontent

Srcdoc inside style tag includesil with. HTML embed.

PreviewFullscreen

Src and srcdoc. Comparison

Src is partURL, srcdoc is inranHTML.srcdoc that priority.

PreviewFullscreen

Use cases

  • Live previews

    Render generated or editable markup in an isolated iframe without creating extra route files.

  • Inline embedded documents

    Generate small document views or previews dynamically inside a constrained frame.

Cautions

  • Inline document strings can become hard to maintain if they grow large or mix too much logic and markup.
  • Untrusted HTML should still be sanitized and paired with appropriate sandboxing before being injected into srcdoc.

Accessibility

  • Like any iframe, srcdoc content should have a meaningful title and predictable focus entry points.

Related links

Powered by web-features