Responsive, SVG based HAR waterfall viewer
TypeScript JavaScript CSS HTML
Latest commit b512653 Jan 19, 2017 @micmro Release v0.2.23


Extensible waterfall-viewer that works with HAR and other formats (in the future).

Build status

Live example at:

example screenshot

How to use PerfCascade

PerfCascade is exported with UMD, so you can use it as global object, via AMD (e.g. requireJS) or commonJS (internally it uses ES6 modules).

If using it without any module system it exports as a global object perfCascade, you can use as following:

/** override selected options for PerfCascade (all have defaults) */
var options = {
  showIndicatorIcons: false, //default: true
  leftColumnWith: 30 //default: 25

/** pass HAR and options to `perfCascade.fromHar` to generate the SVG element*/
var perfCascadeSvg =  perfCascade.fromHar(harData.log, options)

You can find the compiled (and minified) JS in src/dist. For the basic version without zHAR support you need perf-cascade.min.js and some basic CSS styles perf-cascade.css.

Use via npm

As of 2.0.5 you can install PerfCascade via NPM as well:

npm install perf-cascade


  • node_modules/perf-cascade/dist/: bundled UMD modules and the css file in the directory.
  • node_modules/perf-cascade/lib: contains the full project exported as seperate ES6 modules
  • node_modules/perf-cascade/types: Typescript typings


see options.d.ts for source


number, default: 23 Height of every request bar block plus spacer pixel (in px) default: 23


boolean, default: true Show verticale lines to easier spot potential dependencies/blocking between requests


boolean, default: true Show mime type icon on the left


boolean, default: true Show warning icons for potential issues on the left


number default: 25 Relative width of the info column on the left (in percent)


HTMLSelectElement default: undefined DOM <select> element to use to select a run if the HAR contains multiple runs.


HTMLElement (DOM element) default: undefined (not shown) If set a legend explaining the waterfall colours is rendered in the legendHolder DOM element.

*.zhar - zipped HAR files

By loading /perf-cascade-file-reader.min.js as in this example you can use perfCascadeFileReader.readFile to read a gzip and convert it to a JSON HAR object.

perfCascadeFileReader.readFile(fileFromTheFileInput, fileName, function(error, data){
    // handle error
    // handle success


  • Start live-reload server and Typescript compiler with watch: npm run watch
  • Create uglified version: npm run build (not tracked ITM)
  • Build and publish assets to Github Page npm run ghPages (pushes to gh-pages branch) (contributers only)

See package.json for other useful tasks like linting etc.

Specs and resources