> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zerotwo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Preview

> A split-pane canvas that renders live HTML, CSS, and JavaScript — build landing page mockups, UI prototypes, and data visualizations.

The HTML Preview canvas renders real HTML, CSS, and JavaScript in a live split-pane view. The AI writes the code on the left; the rendered output appears on the right and updates as the code changes. Use it to prototype UI components, build interactive data visualizations, create styled reports, and produce any content that benefits from live rendering.

## The Split-Pane View

| Left Pane                   | Right Pane                |
| --------------------------- | ------------------------- |
| HTML/CSS/JS source code     | Live rendered output      |
| Editable directly           | Updates when code changes |
| AI writes and modifies here | Sandboxed iframe          |

You can click directly in the left pane to edit the code. The right pane refreshes to reflect your changes in real time.

## What You Can Build

<CardGroup cols={2}>
  <Card title="Landing Page Mockups" icon="globe">
    Full-page UI prototypes with hero sections, feature lists, CTAs, and pricing tables. Specify product name, color scheme, and key sections.
  </Card>

  <Card title="Data Visualizations" icon="layers">
    Interactive charts using Chart.js, D3.js, or plain SVG. Bar charts, line charts, pie charts, scatter plots, and more.
  </Card>

  <Card title="UI Components" icon="pen-line">
    Buttons, modals, navigation bars, form layouts, cards, accordions, and any other reusable interface element.
  </Card>

  <Card title="Interactive Demos" icon="sparkles">
    Components with JavaScript logic — toggle menus, filterable tables, tab interfaces, sliders, calculators.
  </Card>

  <Card title="Styled Tables and Reports" icon="table2">
    HTML tables with rich formatting, colors, icons, and layout that CSV cannot provide.
  </Card>

  <Card title="Animations and CSS Demos" icon="wand2">
    CSS and JavaScript animations — loading spinners, transitions, hover effects, gradient backgrounds.
  </Card>
</CardGroup>

## Prompts to Try

### Landing Pages

* "Create a dark-themed landing page for a SaaS product called Flux with a hero section, three feature highlights, and a pricing table with Free and Pro tiers. Use purple accent colors."
* "Build a product landing page for a mobile fitness app. Include a hero placeholder, feature bullets, and a download CTA button."
* "Make a professional consulting firm homepage with a header, services section, team bios, and a contact form."

### Data Visualizations

* "Build an interactive bar chart using Chart.js showing monthly revenue for January through June: $42k, $51k, $48k, $63k, $71k, $68k"
* "Create a D3.js pie chart showing browser market share: Chrome 65%, Safari 18%, Firefox 9%, Edge 5%, Other 3%"
* "Make an animated line chart tracking stock price over 12 months. Use a dark background with a neon green line."
* "Build a filterable data table for a product catalog with columns for name, category, price, and rating"

### UI Components

* "Create a responsive pricing table with three plans: Starter, Pro, and Enterprise. Highlight the Pro plan with a border and 'Most Popular' badge."
* "Build a modal dialog with a header, body text, and Cancel / Confirm buttons. Animate it on open and close."
* "Make a navigation bar with a logo placeholder, five nav links, and a sign-in button. Collapse to a hamburger menu on mobile."

### Animations and Interactive Demos

* "Create an animated CSS loading spinner centered on the page"
* "Build an animated gradient background that slowly cycles through three colors"
* "Make a JavaScript-powered to-do list with add, complete, and delete functionality"
* "Create an interactive quiz with three multiple-choice questions and a score at the end"

## Iterating on the Output

The HTML canvas works best as an iterative workflow:

<Steps>
  <Step title="Generate the initial version">
    Send a detailed first prompt. Include the purpose, key sections, and style preferences (color scheme, theme, layout).
  </Step>

  <Step title="Review the rendered output">
    Look at the right pane. Identify what needs to change — layout, colors, content, interactivity.
  </Step>

  <Step title="Send targeted follow-up prompts">
    Refine specific elements:

    * "Make the primary button blue"
    * "Increase the hero headline font size to 64px"
    * "Add a footer with copyright text and three links"
    * "Make the layout responsive for mobile screens"
    * "Replace the placeholder image with a CSS gradient background"
    * "Change the font to Inter or system sans-serif"
  </Step>

  <Step title="Repeat until satisfied">
    Keep iterating. Each follow-up modifies the existing code in place.
  </Step>
</Steps>

<Tip>
  **Provide your color palette upfront.** "Use these brand colors: primary #6366F1, secondary #8B5CF6, background #0F172A, text #F8FAFC" gives ZeroTwo specific values to use throughout the design, producing more on-brand results.
</Tip>

## Using External Libraries

The AI can include popular CDN-hosted libraries in the HTML:

| Library          | Use For                                |
| ---------------- | -------------------------------------- |
| **Chart.js**     | Bar, line, pie, doughnut, radar charts |
| **D3.js**        | Complex, custom data visualizations    |
| **Tailwind CSS** | Utility-first styling                  |
| **Alpine.js**    | Lightweight JavaScript interactivity   |
| **Animate.css**  | CSS animation utility classes          |
| **Lucide Icons** | Clean SVG icon set                     |
| **Marked.js**    | Render Markdown in HTML                |

**Example prompt:** "Build a bar chart using Chart.js (include from CDN) showing weekly active users for the last 8 weeks: 1200, 1450, 1380, 1620, 1890, 1750, 2010, 2230"

## Sandbox Restrictions

<Warning>
  The HTML Preview pane runs in a **sandboxed iframe**. The following are not available:

  * External API calls (`fetch` / `XMLHttpRequest` to third-party URLs)
  * Browser storage (`localStorage`, `sessionStorage`, cookies)
  * Popups and navigation (`window.open`, `location.href`)
  * Camera, microphone, and geolocation access
  * CORS-restricted external fonts and images

  These restrictions are a security constraint of the sandbox environment. Content that relies on live API data will not work in the preview — provide data inline instead.
</Warning>

For visualizations that need data, include the data directly in your prompt so ZeroTwo hardcodes it into the HTML.

## Exporting HTML

Click **Export** in the canvas toolbar and select **Copy HTML source**. This copies the complete HTML document to your clipboard. You can then:

* Save it as a local `.html` file and open it in any browser
* Drop it into a static hosting service (Netlify Drop, GitHub Pages, Vercel)
* Embed it in a web application
* Use it as the starting point for a React or Vue component

<Note>
  The copied HTML is fully self-contained — all CSS and JavaScript is either inline or sourced from CDN links in the `<head>`. No server-side dependencies.
</Note>

## Tips for Best Results

<Tip>
  **Describe the visual in specific terms.** "A dark hero section with a gradient from indigo to purple, a centered white headline in 60px bold font, a subtitle in gray, and a green CTA button" produces far better output than "make a nice hero section."
</Tip>

<Tip>
  **Reference real-world design inspiration.** "Match the style of Stripe's pricing page" or "use Linear's dark minimal aesthetic" gives ZeroTwo a strong visual reference to work from.
</Tip>

<Tip>
  **Include actual data in the prompt.** "Here are the values: Jan $12k, Feb $15k, Mar $11k, Apr $18k, May $22k, Jun $19k" produces a ready-to-use chart instead of a generic placeholder.
</Tip>

<Tip>
  **Ask for comments in the code.** "Add comments explaining each section of the HTML and CSS" makes the exported code much easier to customize in your own editor.
</Tip>

## Related Pages

<CardGroup cols={2}>
  <Card title="Canvas Overview" icon="layers" href="/tools/canvas/overview">
    All 7 canvas editor types and how to activate Canvas Mode.
  </Card>

  <Card title="Code Editor" icon="code-2" href="/tools/canvas/code-editor">
    Write and edit code without a live preview pane.
  </Card>

  <Card title="Export Canvas" icon="download" href="/tools/canvas/export-canvas">
    Copy your HTML source for use outside ZeroTwo.
  </Card>

  <Card title="Troubleshooting" icon="wand2" href="/tools/canvas/troubleshooting">
    Fix common HTML canvas issues.
  </Card>
</CardGroup>