html-outline

streaming transform html to a plaintext DOM outline.

Usage no npm install needed!

<script type="module">
  import htmlOutline from 'https://cdn.skypack.dev/html-outline';
</script>

README

Build Status

html-outline

streaming transform html to a plaintext DOM outline.

Usage

var outline = require('html-outline');

var strm = outline({indent: '..'});
strm.pipe(process.stdout);

strm.write('<html><body><div><p><img></p><p></p><ul><li></li></ul></div></body></html>')

Outputs:

html
..body
....div
......p
........img
......p
......ul
........li

Options

Options, with their defaults:

{
  indent: '  ',
  minDepth: 0,
  maxDepth: undefined,
  selector: '*',
  attributes: false,
  classNames: false
}
  • indent is a stringish; repeated depth times and prepended to each element name.
  • minDepth and maxDepth refer do depth in the DOM tree, with the first element considered depth 0. Indentation repsects minDepth.
  • selector is a css selector (or array of them) supported by cssauron, and can be used to filter the outline. Any elements matching the provided selector(s) and all of their children (up to maxDepth) will be included. (So, e.g., {minDepth: 2} and {selector: 'div'} would do the same thing in the example above.)
  • attributes flag determines whether or not to print attributes after the element name (e.g., img[class="bray" src="img/donkey.jpg"])
  • classNames flag determines whether or not to print class names, e.g., div.container.

Note: these are all also available as command line options: --classNames=true,etc.

Thanks