HTML Viewer: Check the Page Behind Your Code

A schedule can look complete in the code and still hide its meeting point in the rendered page. Preview it, check the task order and narrow layout, then fix the source before you send it.

Compare the source with the actual page

The example opens a fictional garden work-day schedule beside its HTML source. The meeting point, task times and packing list stay visible in the preview. Change a heading or a time in the source, then press Preview HTML to inspect the result.

Local HTML viewer — fictional garden schedule, source and layout preview
Local HTML viewer — fictional garden schedule, source and layout preview
Open the full example ↗

Check the information someone needs to act on, not just whether the page renders. In this schedule, a volunteer needs the date, start time and meeting point before reading the tasks. Inspect the column labels and the rain plan as well as the heading.

Keep the page’s styles with its content

A fragment containing only paragraphs will not bring along a separate stylesheet. Put the styles your page needs in the same file when you want a self-contained review copy. The MDN style-element reference explains where that CSS belongs.

The example is a layout viewer. Its inner preview blocks scripts, forms and external resources. That lets you compare static text and inline styling; it does not test a scripted calculator or prove a form submission works. An empty source gets a visible instruction instead of a success message.

Use code you are authorized to inspect. Keep private records out of a public sample. Other viewers have their own loading, script and storage behavior, so inspect the tool you use before putting sensitive content into it.

Check the narrow version before sending it

Select the 360px preview. The garden schedule changes from a table to labeled task blocks rather than squeezing four columns into tiny text. Check that each time still belongs to the right task and that the packing list remains readable.

The width control changes the layout preview. It is not a physical-phone test. If the final page is important to someone using a phone, open the finished page on that device too.

Turn your notes into the page you will inspect

Give AI the actual schedule and its intended audience. Keep missing details visible so you can resolve them before the page reaches volunteers.

Create a self-contained HTML work-day schedule from these notes.
Organization and audience: [PASTE]
Date, hours and meeting point: [PASTE]
Schedule: [TIME | TASK | PLACE | LEAD]
What to bring: [PASTE]
Contact and rain plan: [PASTE]
Required delivery format: [PASTE]

Use only my notes. Do not invent names, addresses, times, contact details or events. Put missing details in visible [TO CONFIRM] fields. Preserve the task order.
Use one h1, clear h2 sections, a table with a caption and scoped column headers, and a real packing list. Keep the meeting point beside the date. At 360px stack rows into labeled blocks without horizontal overflow or reduced body text. Use at least 16px text, strong contrast and visible link focus. Keep CSS inside the file. No scripts, external assets, network requests, forms, data collection or fictional success buttons. Return the complete HTML and unresolved facts; it is a review copy and does not replace any required PDF or other delivery format.

Correct the source after a real question

Ask a volunteer to find where the group meets. If they cannot tell whether the gate or the tool shed is the starting point, correct that line in the source and preview it again.

Open the complete HTML review copy in NOS when checking that instruction with the coordinator. Read the meeting point beside the start time and task order, then correct the source file if the starting location is still unclear. Review the revised page before sending the schedule again.

Send the corrected schedule and call out the changed instruction. Ask the coordinator to confirm the time and rain plan. A preview update is not a message to the people who received an earlier copy.

Keep reading