Html Preview

HtmlPreview renders LLM-generated HTML inline using a hardened iframe sandbox. It mirrors how Mermaid is embedded in Markdown, but treats the content as code rather than data — scripts execute inside an isolated frame that cannot reach the host page.

Library

Lobe UI

Framework

React

Type

component

License

MIT

Install

pnpm add @lobehub/ui

Files

• src/HtmlPreview/buildShellSrcDoc.ts
• src/HtmlPreview/buildStaticSrcDoc.ts
• src/HtmlPreview/const.ts
• src/HtmlPreview/HtmlPreview.tsx
• src/HtmlPreview/Iframe.tsx
• src/HtmlPreview/index.ts
• src/HtmlPreview/injectAutoHeightScript.ts
• src/HtmlPreview/injectStorageShim.ts

Source

https://github.com/lobehub/lobe-ui

Categories

• AI Element Components
• React AI Element Components
• Web Preview Components

More from Lobe UI

• Accordion
• Action Icon
• Action Icon Group
• Agent Avatar
• Alert
• Anchor
• Auto Complete
• Avatar
• Badge
• Block
• Breadcrumb
• Burger