Skip to main content
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 PaneRight Pane
HTML/CSS/JS source codeLive rendered output
Editable directlyUpdates when code changes
AI writes and modifies hereSandboxed 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

Landing Page Mockups

Full-page UI prototypes with hero sections, feature lists, CTAs, and pricing tables. Specify product name, color scheme, and key sections.

Data Visualizations

Interactive charts using Chart.js, D3.js, or plain SVG. Bar charts, line charts, pie charts, scatter plots, and more.

UI Components

Buttons, modals, navigation bars, form layouts, cards, accordions, and any other reusable interface element.

Interactive Demos

Components with JavaScript logic — toggle menus, filterable tables, tab interfaces, sliders, calculators.

Styled Tables and Reports

HTML tables with rich formatting, colors, icons, and layout that CSV cannot provide.

Animations and CSS Demos

CSS and JavaScript animations — loading spinners, transitions, hover effects, gradient backgrounds.

​
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,42k, 51k, 48k,48k, 63k, 71k,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:
1

Generate the initial version

Send a detailed first prompt. Include the purpose, key sections, and style preferences (color scheme, theme, layout).
2

Review the rendered output

Look at the right pane. Identify what needs to change — layout, colors, content, interactivity.
3

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”
4

Repeat until satisfied

Keep iterating. Each follow-up modifies the existing code in place.
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.

​
Using External Libraries

The AI can include popular CDN-hosted libraries in the HTML:
LibraryUse For
Chart.jsBar, line, pie, doughnut, radar charts
D3.jsComplex, custom data visualizations
Tailwind CSSUtility-first styling
Alpine.jsLightweight JavaScript interactivity
Animate.cssCSS animation utility classes
Lucide IconsClean SVG icon set
Marked.jsRender 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

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.
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
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.

​
Tips for Best Results

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.”
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.
Include actual data in the prompt. “Here are the values: Jan 12k,Feb12k, Feb 15k, Mar 11k,Apr11k, Apr 18k, May 22k,Jun22k, Jun 19k” produces a ready-to-use chart instead of a generic placeholder.
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.

​
Related Pages

Canvas Overview

All 7 canvas editor types and how to activate Canvas Mode.

Code Editor

Write and edit code without a live preview pane.

Export Canvas

Copy your HTML source for use outside ZeroTwo.

Troubleshooting

Fix common HTML canvas issues.