HTML Code
Loading editor...
Live Preview
This page is a browser-based HTML workstation with five sub-tools accessible from the left sidebar. Every tool runs entirely in your browser — nothing is uploaded or processed on a server. There is no account to create and no time limit on how long you can use it.
HTML Editor
Full CodeMirror editor with syntax highlighting, auto-close tags, line wrap toggle, file open, and a side-by-side live preview you can show or hide.
HTML Validator
Checks HTML for missing DOCTYPE, duplicate IDs, images without alt text, deprecated elements, missing labels, and more — colour-coded by severity.
HTML Entity Encoder / Decoder
Toggle between encode and decode mode. Converts <, >, &, ", and ' in both directions instantly as you type.
HTML to Markdown
Converts HTML headings, bold, italic, lists, tables, blockquotes, links, images, and code blocks to clean Markdown syntax.
HTML Snippet Library
Over 20 ready-to-copy HTML patterns across 7 categories: Page Structure, Typography, Forms, Tables, Media, Layout, and Links.
The HTML Editor sub-tool uses CodeMirror 5, the same code editor engine used in browser-based IDEs and online playgrounds. It provides HTML syntax highlighting with the Dracula colour theme, auto-close tags, bracket matching, two-space tab indentation, and an optional line-wrap toggle. The split-pane layout puts the editor on the left and a live preview on the right. You can drag the divider to give more space to whichever side you need.
Use the Open File button in the toolbar to load any .html or .htm file from your local machine. The file is read using the FileReader API — it never leaves your device. Once you have finished editing, click .html to download the current code as a standalone HTML file that you can open in any browser or add to your project.
The Preview button in the toolbar shows or hides the right-hand preview panel. When you need maximum editor width to work on a long document, hide the preview. When you want to check your layout, show it again. The preview uses a sandboxed iframe with the srcdoc attribute, so JavaScript in your code runs safely in isolation without affecting the parent page.
The HTML Validator checks your code against a set of structural, accessibility, and best-practice rules. Validation runs automatically with a short debounce as you type, so you get continuous feedback without needing to click a button. Results are displayed in a colour-coded list: red for errors, amber for warnings, and blue for informational suggestions.
<!DOCTYPE html> declarationlang attribute on <html><title> element<meta charset="UTF-8">alt attributes (WCAG accessibility error)hreffont, center, marquee, frame, and others<label> elementsFor formal W3C spec validation, use the official W3C HTML Validator. This tool is designed for fast local feedback while you write, not as a replacement for the official spec checker.
The HTML Entities tool converts text in both directions. In Encode mode, it converts special characters that have meaning in HTML — <, >, &, ", and ' — into their safe HTML entity equivalents. In Decode mode, it reverses the process, turning entity strings back into readable plain text.
Any time user-supplied content is rendered in a web page without encoding, it can break the page layout or create a cross-site scripting (XSS) vector. If a user types <script>alert(1)</script> into a form and that text is rendered as HTML without encoding, the script runs. Encoding the output converts the string to <script>, which displays as text in the browser rather than executing. The decoder is useful when you receive encoded HTML from an API or template and need to read the original text.
The HTML to Markdown converter processes your HTML using the browser's DOMParser API and walks the resulting DOM tree to produce clean Markdown output. It handles both full HTML documents (with <html>, <head>, and <body> tags) and plain HTML fragments. The <head> and any <style> or <script> blocks are silently ignored.
h1–h6 → # through ######strong / b → **bold**em / i → *italic*del / s → ~~strikethrough~~a → [text](url)img → ul / ol → bullet and numbered listsblockquote → > quote linescode → inline backtickpre → fenced code blocktable → pipe-separated Markdown table
The converted Markdown can be downloaded as a .md file or copied directly. It is ready to paste into GitHub READMEs, Notion, Obsidian, Ghost, and any other system that accepts Markdown.
The Snippet Library contains over 20 HTML code patterns organised into seven categories. Click any snippet in the left column to view its code on the right. Toggle between Code and Preview to see how the snippet renders in a browser. Use Copy Snippet to copy the code directly to your clipboard, or download it as a standalone HTML file.
Every tool on this page runs entirely in your browser. The HTML editor uses CodeMirror loaded from a CDN. The live preview uses the srcdoc attribute on a sandboxed iframe. The validator uses DOMParser. The entity encoder and decoder use string replacement and innerHTML parsing. The HTML to Markdown converter uses DOMParser and DOM tree traversal. None of these operations touch a server. Your HTML code is processed on your own device and is never transmitted anywhere.
This means the tools work offline once the page has loaded, respond instantly regardless of server load, and never log or store your content. If you need to handle sensitive HTML — internal documents, draft code with credentials in comments, or proprietary templates — you can use this editor safely.
If you work with HTML regularly, these related tools on the site complement the HTML Editor: