# table of contents This notebook can generate a table of contents, with indentations, automatically for your notebook. ## origin Thanks to [Mike Bostock](/@mbostock "@mbostock") for creating the [original version](/@mbostock/toc "TOC") of the library and to [Bryan Hughes](/@nebrius "@nebrius") for adapting his code to [add indentation](/@nebrius/indented-toc "Indented ToC")! This code is a total rewrite that avoids using a [generator](/@observablehq/introduction-to-generators "Introduction to Generators") and avoids writing and parsing HTML.

improvements

Rather than using a [generator](/@observablehq/introduction-to-generators "Introduction to Generators") and yielding a new ToC element each time, the element is only returned once, and the [MutationObserver](//developer.Mozilla.org/en-US/docs/Web/API/MutationObserver "MutationObserver API") is just used to replace the list items. Instead of assembling the HTML syntax with strings and then parsing it with [HTL](/@observablehq/htl "Hypertext Literal"), each element is created separately, and nodes are appended and indented as necessary. Individually wrapped event listeners per heading have been replaced with one listener, using [event delegation](//developer.Mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation "Building blocks: Events: Event delegation"). Previous versions only allowed [true heading elements](//developer.Mozilla.org/en-US/docs/Web/API/HTMLHeadingElement "HTMLHeadingElement") to be used; this version allows any CSS selector to be used, and in any order. The skip option [added](/@nebrius/indented-toc "Indented ToC") by [Bryan Hughes](/@nebrius "@nebrius") has been replaced with the filter option, which behaves nearly the same as the skip option when given the same values. When filter is a function, only headings that pass the filter are listed. Instead of using [`textContent`](//developer.Mozilla.org/en-US/docs/Web/API/Node/textContent "Node.prototype.textContent") to make an item display, the heading nodes’ contents are deeply copied into the link elements, to preserve formatting as much as possible. Lastly, lots of options have been added to customise behavior and appearance!