validate-html-nesting

Parent-child nesting validation library for HTML

GitHub

validate-html-nesting is a parent-child nesting validation library for HTML. It detects element nesting that causes browsers to modify the DOM structure - for example, placing an <hr> inside a <p> causes the browser to split the paragraph, which the library flags as invalid, regardless of HTML spec validity.

This library is being used by popular frameworks like Vue.js and Solid.js with over 150k downloads weekly!

Markup

<p>
  hello
  <hr/>
</p>

Browser output

<p>hello</p>
<hr />
<p></p>

Usage

import { isValidHTMLNesting } from "validate-html-nesting";

isValidHTMLNesting("a", "a"); // false
isValidHTMLNesting("p", "hr"); // false
isValidHTMLNesting("div", "a"); // true

This library is designed to be used internally in frameworks who need to ensure rendered DOM matches authored markup - specially when the framework relies on compilation

Related