Free · Fast · Privacy-first

Validate HTML in JavaScript

JavaScript applications that generate, transform, or sanitise HTML strings need to validate that output before rendering it to the DOM.

⚡

Validates HTML strings before inserting them into the DOM

🔒

Covers DOMParser API for JavaScript-based parsing

✨

Identifies errors in dynamically generated HTML

⚡

Free online validation for JavaScript-generated HTML output

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this HTML Validator to your website

Drop the HTML Validator into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/html/html-validator?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Validator by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/html/html-validator?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Validator by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

DOMParser, innerHTML, and Spec Validation: Three Ways JavaScript Handles HTML

JavaScript interacts with HTML strings in three main ways, and each has different error behavior. The innerHTML property parses an HTML string using the browser's native parser and inserts the result into the DOM. Like direct HTML parsing, it applies the browser's error-recovery algorithm: invalid HTML is silently corrected. No errors are thrown and no error events are fired. You cannot use innerHTML to detect HTML errors because the browser hides them. This is the most common way JavaScript handles HTML and also the most opaque from a validation perspective.

The DOMParser API (available in all modern browsers) provides a way to parse an HTML string into a separate document object without inserting it into the live DOM. Calling new DOMParser().parseFromString(htmlString, "text/html") returns a Document object. The browser's parser is used, so errors are still silently corrected. However, the DOMParser result includes a parsererror element inside the document if the content type is "text/xml" or "application/xml". For "text/html", the browser parser silently fixes all errors without generating parsererror elements. DOMParser does not provide spec-based error detection for HTML in the way that a validator does.

For programmatic spec-based validation of HTML strings in JavaScript, the html-validate library is the primary tool. It provides a Node.js API that validates an HTML string against the HTML Living Standard rule set and returns an array of error objects with messages, line numbers, and rule identifiers. This can be used in build scripts, test suites, and server-side rendering pipelines to validate generated HTML before it is served. For client-side validation in the browser, the same library can be bundled. FixTools handles the manual validation case: paste the JavaScript-generated HTML output and validate it against the spec without any code integration.

HTML Living Standard (WHATWG)MDN, DOMParser API

How to use this tool

💡

Paste the HTML string output from your JavaScript code and validate it against the spec. Use this to check HTML generated by template literals, string concatenation, or rendering functions before testing it in the browser.

How It Works

Step-by-step guide to validate html in javascript:

1
Generate your HTML string in JavaScript
Run your JavaScript code and capture the HTML string output from your template literal, render function, or HTML generation logic.
2
Copy the generated HTML
Copy the HTML string that your JavaScript code produces.
3
Paste into FixTools
Paste the generated HTML into FixTools HTML Validator.
4
Validate
Click Validate to check the generated HTML against the spec.
5
Fix the generation logic
Fix errors by correcting the JavaScript code that generates the HTML, not just the output string. Validating HTML inside JavaScript code rather than as standalone files is a growing need as more applications generate markup dynamically. Template literals, JSX, and Vue templates all produce HTML at runtime, but the markup is embedded in JS strings or components rather than .html files. Standard validators cannot parse these JS files directly, so teams have historically validated only the rendered output rather than the source templates. This catches errors late and makes the source-of-truth file harder to fix. Our tool addresses this by exposing a JavaScript API that accepts HTML strings or DOM fragments and returns validation results. You can call it from within your JS code to validate markup at the point where it is generated, before any rendering happens. This catches errors at the cheapest point in the development cycle. For React, Vue, or Svelte projects, integrate the API call as a step in your component testing suite so every component is validated whenever its tests run. Server-side rendering frameworks benefit especially. SSR generates the final HTML on the server before sending to the browser, which means validation can run inline with rendering. If validation fails, your application can log the issue, alert the on-call engineer, and either fall back to a known-good template or serve the rendered HTML with a noindex meta tag so search engines do not index the broken output. This kind of defensive validation is far easier when the validator runs in JavaScript than when it requires a separate HTTP request to an external service. Another common pattern is to validate user-generated HTML, such as comments, posts, or rich-text inputs from your users. Before storing user HTML in your database or rendering it on a public page, validate it to catch malformed markup that could break page layout or open XSS attack vectors. Pair the validator with an HTML sanitizer for full input protection: the sanitizer strips dangerous elements, the validator confirms the result is well-formed. Together they form a robust defence against user-supplied markup issues that have historically been a top source of web application bugs. For library authors building reusable components, expose validation as an optional development-mode warning. When consumers of your library use your components incorrectly (missing required slots, malformed children, invalid prop combinations), your component can detect the issue and log a clear warning during development. This dramatically improves library DX without adding production runtime cost, since the validation runs only when development-mode flags are active.

Real-world examples

Common situations where this approach makes a real difference:

Validating HTML generated by a template literal function

A JavaScript function generates table rows using template literals. Validating the output reveals that the function occasionally generates td elements outside of tr elements when the input data has certain shapes, producing a structural HTML error that was invisible in browser testing because the browser silently corrected it.

Checking React component rendered output

A React component renders HTML that will be sent as a string via server-side rendering. Copying the rendered HTML string and pasting it into FixTools reveals a missing alt attribute on a dynamically generated image element where the alt property was not being passed to the img component.

Validating HTML from a sanitisation library

A content sanitisation library processes user-submitted HTML before inserting it into the DOM. Validating sample outputs from the sanitiser reveals that certain sanitisation operations leave unclosed elements in edge cases, which the browser corrects but which indicate a bug in the sanitisation logic.

Testing a server-side template engine output

A Node.js application generates HTML via a template engine. Adding html-validate to the test suite validates the generated HTML for each route. Automated testing catches a template that generates a duplicate id attribute when the same component is rendered twice on a page.

Pro tips

Get better results with these expert suggestions:

Validate generated HTML, not just template source

JavaScript templates and rendering functions can produce different HTML depending on the input data. Validate the HTML output for multiple representative inputs, including edge cases like empty arrays, null values, and maximum-length strings. The template source may be correct for typical inputs but produce invalid HTML for edge case inputs.

Use html-validate in your test suite for generated HTML

Add html-validate as a dev dependency and write test assertions that validate the HTML output of your rendering functions. This catches HTML errors at the unit test level, where they are cheapest to fix. The html-validate API returns structured error objects that integrate naturally with assertion libraries like Jest or Vitest.

innerHTML does not report errors

Setting innerHTML with an invalid HTML string does not throw an error or trigger any event. The browser silently corrects the HTML and inserts the corrected result. You cannot detect invalid HTML by catching errors from innerHTML. Use a spec-based validator to check HTML strings before inserting them.

Sanitise then validate, in that order

When processing user-submitted HTML, sanitise it first (to remove dangerous elements and attributes) and then validate it (to confirm the sanitised output is spec-compliant). Sanitisation can leave the HTML in a valid but structurally incorrect state. Validating after sanitisation confirms the sanitisation result is not just safe but also well-formed.

FAQ

Frequently asked questions

The html-validate npm library provides a Node.js API for programmatic HTML validation. Call htmlValidate.validateString(htmlString) to receive an array of errors and warnings with message text, line numbers, and rule identifiers. This integrates with test suites for automated validation of generated HTML. For manual validation of JavaScript-generated HTML output, paste the string into FixTools without any code integration.

DOMParser parses HTML strings into a document object using the browser's native parser. For the "text/html" content type, the browser applies its error-recovery algorithm and produces a valid DOM regardless of input errors. No errors are thrown and no parseerror is generated. DOMParser is useful for reading HTML as a tree but is not a validator.

The innerHTML setter uses the browser's HTML parser, which implements the WHATWG HTML error-recovery algorithm. The browser silently corrects unclosed tags, fixes invalid nesting, and inserts missing elements before building the DOM. The error is invisible because the corrected DOM is what you see. The original HTML string contained an error, but the browser fixed it without reporting anything.

Yes. The html-validate library can be bundled for use in the browser. FixTools also provides browser-based validation: paste your HTML string and validate without any server request. For one-off validation of JavaScript-generated HTML during development, FixTools is the fastest option. For systematic automated validation in an application, bundle html-validate or use it server-side.

In React, use renderToStaticMarkup or renderToString from react-dom/server to get the HTML string output of a component, then validate that string with html-validate. In Vue, use renderToString from vue/server-renderer. Validating the server-rendered HTML output catches errors in the rendered HTML that would not be visible in the JSX or Vue template source.

If the HTML string comes from user input or an external source, yes. You should sanitise it first (with a library like DOMPurify to remove dangerous content) and then validate it to confirm the sanitised output is well-formed. If the HTML string is generated entirely by your own code, validating during development and testing is sufficient; you do not need to validate at runtime in production.

html-validate is a Node.js package that implements spec-based HTML validation locally without any external server requests. It validates against the HTML Living Standard and is designed for integration into build tools, test suites, and CI pipelines. The W3C Nu HTML Checker is a Java server that can be called via HTTP API. Both validate against the same spec. html-validate is easier to integrate into JavaScript projects and does not require sending HTML to external servers. JavaScript-based HTML validation uses the browser DOMParser API to check for syntactic correctness, then applies additional rules from libraries like html-validate or v.Nu compiled to JavaScript. This approach lets you validate dynamically generated HTML before inserting it into the DOM, which is essential when displaying user-generated content, server-side data, or templated output. Building validation into your JavaScript application also provides immediate feedback during development without requiring a separate validation step. For React, Vue, or Angular applications, you can hook validation into your component test suite so that any rendered output that contains invalid markup fails the test immediately. JavaScript validation also enables progressive enhancement: you can validate user input before submission, catch errors client-side. Many JavaScript frameworks now bundle HTML validation utilities as opt-in features. JavaScript-based validation also enables novel debugging workflows. By validating intermediate rendered output during development, you can pinpoint exactly which component or state transition introduces invalid markup. This precise attribution accelerates debugging compared with validating only the final page output, where errors can be hard to trace back to their source in a complex component tree. Modern dev tools like React DevTools and Vue DevTools can integrate validation hooks to surface validation warnings directly in the component inspector, making the development feedback loop tighter than ever. For Single Page Applications with complex client-side state, JavaScript validation also provides regression protection during refactoring work.

Yes, render the component using React Testing Library's render method, then pass the resulting container.innerHTML to html-validate. This validates the actual DOM output that users will see, catching issues with conditional rendering, prop interpolation, or composition that purely static validation would miss. Many teams add this as a custom Jest matcher named toBeValidHtml, making the test syntax concise and consistent across the codebase. Failed tests show specific lines and rule violations, making debugging fast even in large component trees.

Yes, they catch different things. DOMParser uses the browser's permissive HTML parser that silently corrects most errors during parsing. It catches only catastrophic structural problems like unclosed XML in text/xml mode. html-validate uses the HTML Living Standard rule set to enforce stricter spec compliance, catching missing attributes, deprecated elements, and accessibility violations that DOMParser ignores. Most projects need html-validate for genuine quality checking, with DOMParser used only for parsing already-validated input into a DOM tree. Many test runners now support custom matchers that wrap validation logic into single assertions like expect(rendered).toBeValidHtml(), reducing boilerplate dramatically. The combination of test-driven validation and live debug feedback creates a tight loop that catches HTML quality issues at the exact moment they enter the codebase during everyday development workflows.