🎋A CLI tool to create an annotated tree visualization of any project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
CHANGELOG.md update version Sep 18, 2018
CODE_OF_CONDUCT.md Create code of conduct Sep 10, 2018
CONTRIBUTING.md add contributing Sep 11, 2018
LICENSE Initial commit Sep 7, 2018
README.md add contributing into readme Sep 11, 2018
basedirectory.tar.gz update to vue cli 3 and fix arrows Sep 10, 2018
index.js fix problem with lack of .gitignore Sep 14, 2018
package-lock.json 8 [add] Add isGlob module and update isGlob condition Sep 11, 2018
package.json update version Sep 18, 2018


🎋 Project Explorer

Check out the site: https://sdras.github.io/project-explorer-site/

Create a tree visualization of any project with this CLI tool. When ramping people up on an existing codebase, there's often a lot of state they have to understand about the project- where everything is, where everything starts, exceptional files. With this tool, you can generate a visualization of any project, as well modify certain directories to be open, or have notes that people can read through easily.


npm i -g project-explorer

Here's an example of what we'll be generating:


A working example of this exists here. I created this for Vue core off of notes taken at a core meeting as Evan You walked us through some of the file structure.


  • You need to be running Node 8 or higher
  • You have to have Yarn installed.


To create the visualization in the same folder as your project:

  1. Go into the directory of a project you'd like to document, and run the first command, pexx nameofyourproject.
  2. When prompted for your path, write . or ./
  3. Magic happens! (but it takes a minute )

To create the visualization in a separate folder:

  1. Go into the directory of a project you'd like to document, and run pwd in your terminal to get the path
  2. Create a new folder to run this CLI in.
  3. Run the first command, pexx nameofyourproject.
  4. Then paste in the output of pwd as your path when the CLI prompts you for it.
  5. Magic happens! (but it takes a minute )

$ pexx nameofyourproject
> path: ./ (or whatever your pwd output is)
‣ Name of Project: nameofyourproject
‣ Path: ./
  • Replace nameofyourproject with the name you'd like to give your project
  • Files in .gitignore will be ignored in the build. We've also removed .gitignore, .git, and the base-directory-tree that this project will generate.
  • Path can either be the current directory or you can use pwd in another local directory of choice. I recommend this option as you might want these files and this documentation in another folder.

This will kick off the processes that will build the directory trees, the UI for traversing, and give you a little example to start with too :) It will even kick off the server for you.

Open directories

You can specify what directories you would like to be open when a user first visits by adding them to the opened array in base-directory-tree/src/store.


You can add comments for the different files by adding them to the comments object in base-directory-tree/src/store. You will specify it using the path as the key and the comment as the value, like this:

`READMEexample`: `This is an example of how a note is made! You can write the pathname of any file and the note will appear ☺️. You can delete this now.`

Github link

You can point the github logo link to your own repo by updating the github string in base-directory-tree/src/store.

(Basically all the state you need is probably in the Vuex store. 😉)


Contributions are welcome! 🤘 Please head over to CONTRIBUTING.md for more information.

🥂 Thanks for using this project! I hope it's helpful. If you see ways to improve it, PRs are welcome.

Twitter: sarah_edo