Writing

HTML (HyperText Markup Language) is the standard language for creating web pages. Every website you visit is built with HTML at its core. A previewer lets you see how your code will look in a browser without saving files or setting up a development environment. This is especially useful for testing email templates, debugging markup from a CMS, reviewing AI-generated HTML, or learning HTML by experimenting with tags in real time.

Any standard HTML tag works: structural tags like div, section, article, header, and footer; text tags like h1 through h6, p, span, strong, em, and blockquote; list tags like ul, ol, and li; table tags including table, thead, tbody, tr, th, and td; media tags like img (with external URLs) and video; form elements like input, select, and textarea; and link tags using a with href. Script tags are sandboxed and will not execute for security reasons.

Use inline styles with the style attribute directly on elements, like style="color: red; font-size: 16px". This is the most reliable method, especially for email templates where external stylesheets are stripped. You can also include a style tag inside your HTML for internal CSS that applies to multiple elements. The previewer renders both approaches. External stylesheet links will not load since the preview is sandboxed.

Most email clients (Gmail, Outlook, Yahoo) strip out style tags and ignore external CSS files. The only reliable way to style an email is with inline CSS on each element. This means writing style="font-family: Arial; color: #333333; padding: 16px" on individual tags. The HTML Previewer is ideal for testing these templates because what you see is what email recipients will see.

Prettify takes compressed or messy HTML and adds indentation and line breaks so the code is easy to read and edit. Each tag gets its own line with proper nesting shown through indentation. Minify does the opposite — it removes all unnecessary whitespace, line breaks, and comments to produce the smallest possible code. Minified HTML loads faster and is useful when pasting into systems with character limits.

The responsive toggle simulates three screen widths: Desktop (full width of your browser), Tablet (768px, matching an iPad in portrait mode), and Mobile (375px, matching an iPhone). The preview iframe resizes to these widths so you can see how your HTML reflows. This is critical for testing email templates and responsive layouts that use media queries, percentage widths, or CSS grid and flexbox.

Yes, this is one of the primary use cases. Paste your email HTML and it renders exactly as an email client would display it. Use the responsive toggle to check how the email looks on desktop and mobile. The starter templates include an email template with a header, call-to-action button, and footer that you can customize. Remember to use inline styles, table-based layouts for Outlook compatibility, and explicit widths for images.

The most frequent issues are: unclosed tags (every opening tag like div needs a closing /div), mismatched nesting (closing tags in the wrong order), missing quotes on attribute values, using single quotes inconsistently, forgetting alt attributes on images, and using deprecated tags like font or center instead of CSS. The element counter in the stats bar can help you verify your tag count matches expectations.