Generates a table of contents for your HTML document based on the headings present.
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit 85c8c09 Aug 5, 2013 @matthewkastor matthewkastor updated readme
Failed to load latest commit information.
License version 0.1.1 Aug 5, 2013
src version 0.1.1 Aug 5, 2013
.gitattributes version 0.1.1 Aug 5, 2013
.gitignore version 0.1.1 Aug 5, 2013 updated readme Aug 5, 2013
example.html renamed html example, updated readme Aug 5, 2013
html-table-of-contents.css version 0.1.1 Aug 5, 2013
package.json updated docs Aug 5, 2013


Generates a table of contents for your HTML document based on the headings present.

Where do I get it?

You can download it from github at or, if you have node installed you can get it from npm

npm install html-table-of-contents


Using this module in your browser is as simple as including it in your page and calling htmlTableOfContents() after the page has loaded.

The table of contents will be generated in the first element with the id of toc. It will consist of a series of sibling div's whose class directly maps to the heading level of the heading it describes. By default there is no styling done to the table of contents, to allow you to style it however you wish. This module comes with a css stylesheet which you can include in your page if you would like to. The provided stylesheet simply indents entries in the table of contents based on the heading level in the document. Take a look at the stylesheet html-table-of-contents.css, in this module's root folder, to get an idea of how to access the table of contents entries if you wish to create your own stylesheet.

If you're using this module outside of a browser you will have to supply a reference to a dom document object, unless you've called it document and declared it globally. I did not require any specific module for parsing the DOM, because there are a few out there and it would be rude of me to force you to use a specific one for such a simple function.

Generating a table of contents in Browser

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            html-table-of-contents Example
        <script src="./node_modules/html-table-of-contents/src/html-table-of-contents.js"
        <link rel="stylesheet"
            href="./node_modules/html-table-of-contents/html-table-of-contents.css" />
    <body onload="htmlTableOfContents();">

        <div id="toc">

            top heading 1

            second heading

            top heading 2

Generating a table of contents in Node

// parse your html into a DOM Document using jsdom
// or something

var fs = require('fs'); 
var jsdom = require("jsdom").jsdom;
var htmlTableOfContents = require('html-table-of-contents');

var html = fs.readFileSync('example.html', 'utf8');
// javascript written for the browser expects global
// window and document objects
var document = global.document = jsdom(html, null, {
    features: {
        FetchExternalResources : false,
        ProcessExternalResources : false
var window = global.window = global.document.parentWindow;

// alternatively, if you've called the 
// document object something other than 
// document, you may supply it as the 
// first argument and everything will 
// work out fine.
// htmlTableOfContents(nonstandardDocumentReference);


// Shazam. The document now contains a table of 
// contents you didn't have to write.