Skip to main content
The HTML Preview tool renders HTML content in a secure, sandboxed iframe so you can see how it will display in a browser. This is essential for testing HTML snippets, debugging styles, and previewing user-generated content without security risks.

​
Use Cases

  • Testing HTML snippets before embedding them in production
  • Previewing email templates in HTML format
  • Debugging CSS styles and layout issues
  • Rendering user-generated content safely (e.g., from a CMS)
  • Validating responsive designs with different viewport sizes
  • Inspecting HTML from web scraping or API responses

​
How It Works

The tool takes raw HTML input and renders it in an iframe sandbox with restricted permissions. This prevents malicious scripts from accessing the parent page or making network requests.
The iframe uses sandbox attributes to isolate the content:
  • allow-same-origin: Allows rendering within the iframe
  • No allow-scripts: JavaScript is disabled by default for security
  • No allow-forms: Form submissions are blocked

​
Input Format

Any valid HTML, from simple snippets to complete documents: 
<div style="padding: 20px; background: #f0f0f0; border-radius: 8px;">
  <h1>Welcome</h1>
  <p>This is a <strong>preview</strong> of your HTML.</p>
  <button>Click Me</button>
</div>

​
Output

The tool displays:
  1. HTML source in the output pane (for reference)
  2. Live preview in the preview pane (iframe rendering)

​
Examples

<div style="max-width: 300px; border: 1px solid #ddd; border-radius: 8px; padding: 16px; font-family: Arial, sans-serif;">
  <h3 style="margin: 0 0 8px 0; color: #333;">Product Name</h3>
  <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">This is a short description of the product.</p>
  <button style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Add to Cart</button>
</div>

​
Security Features

JavaScript execution is disabled in the preview iframe for security. If you need to test interactive behavior, use a local development environment.

​
Sandbox Restrictions

The iframe uses sandbox attributes to prevent:
  • Script execution: <script> tags are ignored
  • Form submission: Forms cannot be submitted
  • Popups: window.open() and similar are blocked
  • Top-level navigation: Cannot change the parent page URL
  • Plugin loading: <embed>, <object>, <applet> are blocked

​
Safe for User-Generated Content

Because scripts are disabled, you can safely preview:
  • HTML from untrusted sources (user comments, CMS content)
  • Scraped web pages
  • Third-party widgets (in display-only mode)

​
Technical Details

Located in lib/tools/engine.ts:483-484
The tool is one of the simplest in the suite: 
case 'html-preview':
  return { output: input, previewHtml: input };
  • output: The raw HTML (displayed in the output pane)
  • previewHtml: The HTML to render in the iframe (preview pane)

​
Preview Pane Implementation

The preview pane (in ToolWorkbench.tsx) creates a sandboxed iframe: 
<iframe
  sandbox="allow-same-origin"
  srcDoc={result.previewHtml}
  className="w-full h-full border-0"
/>

​
Limitations

JavaScript is intentionally disabled for security. The iframe sandbox prevents script execution to protect against XSS attacks. If you need to test interactive JavaScript, use a local HTML file or a service like CodePen.
Yes! External resources (CSS, images, fonts) loaded via <link> or <img> will work if they are publicly accessible. However, resources blocked by CORS or requiring authentication may not load.
The preview pane has a default white background and no base styles. Your production site may have global CSS resets, base fonts, or container styles that affect rendering. For the most accurate preview, include all necessary inline styles or <style> tags.

​
Common Patterns

​
Inline Styles for Email Templates

Email clients often strip <style> tags, so use inline styles: 
<p style="margin: 0; padding: 10px; color: #333; font-size: 16px; line-height: 1.5;">
  Your content here
</p>

​
Testing Responsive Design

Use CSS media queries and resize the preview pane: 
<style>
  .container { padding: 20px; background: #f0f0f0; }
  @media (max-width: 600px) {
    .container { padding: 10px; background: #fff; }
  }
</style>
<div class="container">
  Resize the preview to test responsiveness
</div>

​
Complete HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
  </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is a complete HTML document.</p>
</body>
</html>