HTML Preview Not Working?
Fix a blank or stale HTML preview with checks for the selected file, CSS paths, JavaScript errors and refresh behavior in HCODX.
Find why the HTML preview is blank or out of date
The preview runs a document in a separate browser frame so you can inspect the output of your project without leaving the editor.
That distinction explains both the fidelity and the limits. The frame uses a real browser engine, so ordinary layout, fonts, media queries and DOM interactions behave like browser content. But a frame is not your future production server: relative paths, external resources, permissions and server-side endpoints can behave differently after deployment.
Start by identifying the failure: no document, missing styles, an image that cannot load, an interaction that fails, or an older version of the page. Check the selected entry file, then resource paths and console messages, then refresh behavior. The separate preview shell renders front-end files in a browser; a server-side endpoint still needs a real server.
Markup is parsed, not compiled
HTML defines elements and their structure. The browser builds a document tree even when some markup is malformed.
CSS is applied by the browser
A rule can be valid but invisible when its selector misses, specificity loses, or the stylesheet fails to load.
JavaScript has a separate failure path
A script exception can stop an interaction while the HTML and CSS still render correctly. The console is the place to look.
Four checkpoints between a keystroke and the rendered page
Pinpoint the stage that failed before rewriting code that already works.
A common script-timing mistake
<script>
// Runs before #send exists: querySelector returns null.
document.querySelector("#send").addEventListener("click", () => console.log("Sent"));
</script>
<button id="send" type="button">Send</button>
<!-- Move the script below the button, or wait for DOMContentLoaded. -->A preview that shows the button but ignores clicks is not necessarily stale. In this example the script throws before the button is created, so the first useful clue is a console error—not another CSS edit.
A blank, stale or mismatched preview: what to inspect
Use the symptom to choose the next check rather than pressing refresh repeatedly.
Blank frame
Check for a document-load error, an accidental full-page overlay, or white text on a white background. Inspect the frame before assuming the editor lost your work.
Old output
Verify the current project and file, then refresh the preview manually. If auto-updates are disabled, source changes will wait until you request a rerun.
Missing image or font
Review the URL and resource origin. A path that works on a deployed domain may not resolve the same way in a preview frame.
Works here, fails after publishing
Compare deployment paths, server headers, API URLs and CORS rules. The preview validates the front-end behavior it can see, not the entire hosting environment.
When the content is present but a layer covers it
A white preview is not proof that HTML failed to load. A positioned element can cover otherwise valid content.
In this example the heading exists and is styled, but a fixed white cover sits above it. The frame looks blank. Inspect the preview document: if the heading is present in the DOM, the next question is which element paints over it, not whether the editor saved the source. Temporarily disable the .cover rule or remove the covering element to confirm the diagnosis.
This is different from a missing resource or a script error. The browser successfully parsed the HTML and applied CSS; the CSS simply produced an unintended visual result. A systematic preview check keeps you from rewriting the heading or repeatedly refreshing the frame.
<main><h1>Release notes</h1><p>The document loaded.</p></main>
<div class="cover" aria-hidden="true"></div>
<style>
main { color:#111; padding:2rem; }
.cover { position:fixed; inset:0; background:#fff; z-index:10; }
</style>
<!-- Remove .cover or correct its stacking behavior to reveal the page. -->The editor preview and a published URL answer different questions
A local edit-and-preview loop is fast feedback; a staged or published page is the release check.
Preview frame
Best for immediate visual and client-side behavior checks while source is changing. It is a development context, so verify resources and permissions again on the final host.
Exported files
Best for checking the actual package you will move. Extract the ZIP and verify filenames, folder relationships and linked assets.
Staging or published site
Best for testing real routes, headers, API permissions, caching, fonts and device/browser combinations under the intended host.
Diagnose a missing script, font or image by its request
A resource failure is not always a markup failure. Read the failed request before changing the page structure.
Classic cross-origin script tags, JavaScript modules and fetch requests have different loading rules. Name the request type before concluding that every failure is “CORS”.
Live preview questions worth asking
Debug the rendered page with the source beside it
Open HCODX, make a small change, and follow the preview checkpoints if the result surprises you.
Instant HTML Runner & Viewer with Live Preview
Need to run a short HTML, CSS and JavaScript snippet? The HTML Runner Online has a focused editing surface with live output.
Open HTML Runner Online