Sections
File Viewer
- Overview
- Anatomy
- Header
- Navigation
- Renderers
The HTML Viewer renders standalone .html and .htm documents through the
File Viewer. HTML is loaded as a bounded text resource, then mounted inside a
sandboxed iframe so untrusted documents can be previewed without running
scripts or reaching the host app.
"use client";
import { FileViewerPreview } from "@/components/ui/file-viewer";
export function HtmlViewerDemo() {
return (
<div className="h-[540px] min-h-0">
<FileViewerPreview
source={{
kind: "url",Installation
pnpm dlx shadcn@latest add @retab/file-viewer
Usage
import { FileViewerPreview } from "@/components/ui/file-viewer";
export function Example() {
return (
<FileViewerPreview
source={{
kind: "url",
url: "/samples/welcome.html",
fileName: "welcome.html",
mimeType: "text/html",
}}
/>
);
}Inline HTML is supported too:
<FileViewerPreview
source={{
kind: "text",
text: "<!doctype html><html><body><h1>Hello</h1></body></html>",
fileName: "inline.html",
mimeType: "text/html",
}}
/>Use category="html" when a URL or Blob does not carry a useful file name or MIME
type:
<FileViewerPreview
category="html"
source={{ kind: "url", url: "/rendered-document", fileName: "document" }}
/>Features
- Sandboxed rendering — HTML is mounted in an iframe with an empty
sandboxattribute, so scripts, forms, modals, and same-origin access are disabled. - Resource-based sources — URL, Blob, and inline text sources share the File Viewer resource path.
- Viewer chrome — zoom, retry, and download actions use the same shell as other File Viewer document routes.
- Explicit routing —
.html,.htm, andtext/htmlsources route to the HTML viewer;category="html"can force the route.
API Reference
The HTML route is exposed through FileViewerPreview and composed
FileViewerDocument routes.
| Prop | Type | Description |
|---|---|---|
source | ViewerSource | Canonical file source. URL, Blob, and text sources carry file metadata with the payload identity. |
category | FileCategory | Pass "html" to force HTML rendering when detection is ambiguous. |
className | string | Optional class on the viewer root element. |
Source
file-viewer-html-viewer.tsx
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import {
viewerContentRenderKey,
type ViewerResource,
} from "@/lib/viewer-resource";
import { ViewerFallback } from "./file-viewer-fallback";
import { getHtmlViewerSrcDoc } from "./file-viewer-html-srcdoc-cache";