How it works
- Paste the AI answer. You do not need to copy each code block separately.
- Extract. Code inside
```html,```cssand```jsblocks is found. CSS blocks are added inside a<style>tag and JavaScript blocks inside a<script>tag at the end of the page. If there are no code blocks, the text from the first HTML tag onwards is used. - Check. The report lists files the page expects but cannot get, code that looks cut off, and code that needs a build step.
- Preview on desktop or at a 390 × 844 phone size, read JavaScript errors in the console, then open the result in the full HTML editor or download it as an .html file.
Common problems with AI-generated HTML
The code stops in the middle
Long answers can be cut off before the closing tags. The report warns when a code block is never closed or when <html> has no </html>. Ask the assistant to continue, or to send the file in shorter parts.
Images and files with relative paths
Code often refers to files such as images/hero.jpg or styles.css that were never created. They cannot load in any online preview. Replace them with real https:// links, or paste the CSS into the page.
Separate HTML, CSS and JavaScript blocks
When the answer gives three separate blocks, pasting only the HTML shows an unstyled page. This page joins the blocks for you.
React, Vue or other framework code
Code with import statements, JSX such as className=, or .vue single-file components needs a build tool and will not run as a plain HTML file. The report tells you when code looks like this. Ask for "a single HTML file with inline CSS and JavaScript and no build step" instead.
Libraries loaded from a CDN
Links to Tailwind, Bootstrap, Chart.js and similar libraries on a CDN work in the preview when you are online. The report lists every external file so you can see what the page depends on.
What this page does not do
- It does not send your text anywhere, and it does not contact any AI service. It only reads what you paste.
- It cannot fetch files that exist only on your computer or in the AI tool's workspace.
- It does not run PHP, Python or other server-side code.
- Its checks are basic. For a full standards check, use the W3C Markup Validation Service.
Frequently asked questions
How do I preview HTML from ChatGPT, Claude or Gemini?
Copy the whole answer, paste it into the box on this page and press Preview. The HTML, CSS and JavaScript code blocks are pulled out, joined into one page and shown in the preview.
Why does my AI-generated page look unstyled or broken?
Usually the CSS or JavaScript came in a separate code block that was not pasted, or the page refers to files such as style.css or images/logo.png that do not exist. This page joins separate blocks and lists missing files in the report.
Is the pasted text sent to an AI service or to your server?
No. The text is processed in your browser only. This page does not contact any AI service and does not upload what you paste.
Can I preview React or Vue code from an AI assistant?
Not directly. React, Vue and other framework code usually needs a build step. Ask the assistant for a single HTML file with inline CSS and JavaScript, then preview that.
Can I keep editing the result?
Yes. Use Open in full editor to continue in the HTML Viewer Online editor with formatting, validation and accessibility checks, or Download .html to save the page.
Need formatting, a minifier, accessibility checks or a Meta/OG preview? Use the HTML Viewer Online editor.