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

srcdoc

The srcdoc property of the HTMLIFrameElement interface gets or sets the inline HTML markup of the frame's document.

This reflects the srcdoc attribute of the <iframe>.

EmbeddingSandboxingDocuments

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
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