Componenteditors0.53 KB gzipZero dependencies

Html Preview

Sandboxed HTML preview frame.

Preview

Live Preview

HTML Previewsandbox

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add html-preview

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { HtmlPreview } from "@/components/ui/html-preview";

<HtmlPreview />

Usage guidance

Use Html Preview when a ticket stub surface needs Sandboxed HTML preview frame. Keep props minimal and prefer composition with sibling stubs.

Avoid Html Preview for long form flows or dense data grids where a dedicated layout block fits better.

Source code

html-preview.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface HtmlPreviewProps extends React.HTMLAttributes<HTMLIFrameElement> {
  html: string;
  title?: string;
  height?: string;
}

/** Sandboxed HTML preview iframe. */
export function HtmlPreview({ html, title = "HTML Preview", height = "240px", className, ...props }: HtmlPreviewProps) {
  return (
    <div className={cn("overflow-hidden rounded-lg border border-border", className)} {...props}>
      <div className="flex items-center justify-between border-b border-border bg-secondary/60 px-3 py-1.5">
        <span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">HTML Preview</span>
        <span className="rounded-full border border-success/40 bg-success/10 px-1.5 py-px font-mono text-[8px] uppercase tracking-wider text-success">sandbox</span>
      </div>
      <iframe
        title={title}
        srcDoc={html}
        sandbox="allow-scripts"
        style={{ height }}
        className="w-full border-0 bg-white"
      />
    </div>
  );
}

Props

Prop	Type	Description
html	string
title	string
height	string