HTML Viewer

Installation

bunx --bun shadcn@latest add @sui/html-viewer

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import { HtmlViewer } from "@workspace/ui/components/html-viewer";

<HtmlViewer
  content="<h2>Hello</h2><p>Isolated HTML content.</p>"
  title="HTML content preview"
  className="h-64 w-full rounded-xl border"
/>;

Iframe isolation

The component writes content to the iframe srcDoc. Styles inside the HTML document do not affect the surrounding application, and the application theme is not automatically injected into the document. Include the document styles you want to preview. Give the iframe a descriptive title, or translate labels.preview.

The default sandbox is "allow-scripts", permitting scripts inside an opaque-origin frame without granting allow-same-origin. The first example demonstrates a button that changes only the iframe content.

Restricting scripts

Set sandbox="" for a static preview without script execution. Pass other native iframe attributes, such as allow, loading, and ref, when needed. Changing sandbox permissions changes the capabilities of the content; keep permissions limited to what your preview requires.

Layout and glass

The iframe defaults to filling its container. Set an explicit height on the component or its parent. glass styles the outer surface; it does not refract, capture, or theme the separate iframe document. Glass background snapshots cannot reliably include iframe contents.

API reference

The module exports HtmlViewerProps. See the iframe element documentation for sandbox permissions. For source editing with preview, use Editor.