When you need to free up room on your hard drive, your OS often does little to help you figure out what's taking up so much space. You may be able to guage the relative size of each file in a directory, but it's hard to get a more comprehensive picture than that.

Crocus visualizes how much space each part of your file tree takes up.

This comes in handy for a number of common use cases:

Hover over an area of the graph to see a breadcrumb of its file path, along with how much space it is taking up. If something seems to be taking up a large amount of space, click on it to zoom in and get a more detailed look.


Here's Crocus looking at it's own directory:


Crocus can be downloaded from npm and installed globally:

$ npm install -g crocus

After that, type crocus in any directory to start a crocus instance, which will be served over localhost:8642. Once you've taken a look around, you can navigate to other directories from within the app, without having to ever go back to the command line.

How it works

Crocus is an express app with one API endpoint and one view. The API endpoint takes a path and returns a recursive data structure describing the file tree below that point. The view takes that data and renders the Sunburst twice. First it renders the sunburst in canvas, which allows for smooth animations. Then it renders an invisible layer on top in SVG, which allows for easier event handling and tooltips. Only the canvas is animated: the SVG simply skips from the beginning state of the animation to the end state with its events disabled until the canvas animation is complete.


Crocus was inspired by a few other projects:

Fork me on GitHub